一个简单的demo学习Vue.js

最新推荐文章于 2022-12-16 17:44:43 发布

凌空飞翔

最新推荐文章于 2022-12-16 17:44:43 发布

阅读量455

点赞数

分类专栏：开发文章标签： vue

本文链接：https://blog.csdn.net/u010459552/article/details/78337972

版权

开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<head>
  <meta charset="utf-8">
  <title>vue 入门</title>
  <script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
  <style type="text/css">
    .active{
      color:blue;
    }
    .danger{
      font-weight: bold;
    }
    .error{
      color: red;
    }
  </style>
</head>
<body>
  <div id="app" :class="{'active':isActive,'danger':isDanger,'error':isError}">
    hello 
    <span v-text="name" :class="[active,error]"></span>
    <div v-html="description" :style="{color:color}"></div>    <!-- 绑定html标签 -->
    <input v-model="number">    <!-- 数据的双向绑定 -->
    <p>数字：{{number | toInt}}</p>
    <p ref="num" v-once>num:{{num < 100 ? 100 : num}}</p>    <!-- v-once只渲染一次，后面元素中的数据再更新变化，都不会重新渲染 -->
    <p>计算属性：{{sum}}</p>
    <button v-on:click="plus(3)">加3</button>    <!-- 绑定事件的监听器 -->
    <button v-on:click="testDestory">销毁</button>
    <a v-bind:href="link">vue 官网链接</a>    <!-- v-bind绑定属性值 -->
    <button :disabled="dis_true">true</button>
    <button :disabled="dis_false">false</button>    <!-- 绑定属性值的简写，disabled属性值为false时，该属性会被移除 -->
    <p v-show="dis_true">v-show-true</p>
    <p v-show="dis_false">v-show-false</p>    <!-- v-show值为false时，元素的display属性为none，v-show适用于频繁切换隐藏显示，运行后不太可能频繁切换的则用v-if -->
    <p v-if="dis_true">v-if-true</p>
    <p v-if="dis_false">v-if-false</p>    <!-- v-if值为false时，该元素直接不会被渲染于页面上 -->
    <p v-else>else</p>
    <div v-for="(item, index) in array">{{index}}. {{item}}</div>    <!-- 渲染列表 -->
    <card v-for="item in components" :detail="item" style="display: inline-block;" @connect="say"></card>    <!-- @为v-on的简写 -->
  </div>
</body>
<script type="text/javascript">
  Vue.component("card",{
    props:["detail"],    //父-子数据传递
    template:`<div>
    <h2>Vue 组件示例  </h2>
    <p>{{detail.info}}</p>
    <button v-on:click="send">{{detail.btn}}</button>
    </div>`,
    data(){    //此处data必须为函数
      return {msg:"我是子组件"}
    },
    methods:{
      send(){
        this.$emit("connect",this.msg)    //子-父传递数据
      }
    }
  });
  let vm = new Vue({    //此处须先定义card组件，后创建Vue实例
    el:"#app",    //挂载元素
    data:{name:"Amy",number:"",num:123,description:"<strong>这是一个vue实例</strong>",link:"https://cn.vuejs.org/v2/guide/",dis_false:false,dis_true:true,array:["Amy","Jone","Jane"],components:[{info:"组件详细信息1",btn:"按钮1"},{info:"组件详细信息2",btn:"按钮2"},{info:"组件详细信息3",btn:"按钮3"}],isActive:true,isDanger:true,isError:false,active:"active",error:"error",color:"green"},    //实例数据
    filters:{    //过滤器
      toInt(value){
        return parseInt(value);
      }
    },
    computed:{    //计算属性
      sum(){
        return this.num*this.number;
      }
    },
    methods:{    //方法
      plus(value){
        return this.num+=value;
      },
      testDestory(){
        this.$destroy();    //销毁Vue实例，此后vm实例还是存在，vm中的data可发生改变，但是解绑了watch数据与视图的绑定，视图无法再更新
      },
      say(msg){
        console.log(msg);
      }
    },
    watch:{    //观察
      num(){    //检测num值的变化
        console.log("num值有变化了");
        console.log(this.num);
      },
      number(){    //监测number值的变化
        console.log("number值有变化了");
        console.log(this.number);
      }
    },
    beforeCreate(){
      console.log("即将创建");
      console.log(this.$data);
      console.log(this.$el);
    },
    created(){
      console.log("创建完毕");
      console.log(this.$data);
      console.log(this.$el);
    },
    beforeMount(){
      console.log("即将挂载");
      console.log(this.$el);
    },
    mounted(){
      console.log("挂载完毕");
      console.log(this.$el);
    },
    beforeUpdate(){
      console.log("即将更新渲染");
      let num = this.$refs.num.innerHTML;
      console.log(num);
    },
    updated(){
      console.log("更新成功");
      let num = this.$refs.num.innerHTML;
      console.log(num);
    },
    beforeDestroy(){
      console.log('销毁之前');
    },
    destroyed(){
      console.log('销毁成功');
    }
  })
</script>

凌空飞翔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个简单的demo学习Vue.js

vue 入门 .active{ color:blue; } .danger{ font-weight: bold; } .error{ color: red; } hello 数字：{{number | toInt}}
复制链接

扫一扫