首页 > 代码库 > Vue笔记(一)

Vue笔记(一)

2024-08-31 21:17:17   219人阅读

指令：

　　1、v-if 指令用于标签的属性，绑定数据，当数据为true时，显示该标签，当属性为false时，移除该标签。

　　2、v-bind 指令用于属性响应绑定数据，数据改变此绑定的属性也改变，例如：<a v-bind:href=http://www.mamicode.com/"url">链接</a>，数据url改变，则a的href属性值也改变。

　　3、v-on 指令用于监听dom事件，如click、mouseover、mouseout等事件，例如：<button v-on:click="doSomething">点击</button>，事件click，函数doSomething。

　　4、

计算缓存：

　　1、计算属性是基于依赖缓存的，只有在相关的依赖发生改变时才会重新取值，就是说只有他依赖的这个新建vue对象的数据改变了，他才会重新取值计算，只要依赖的数据没有改变，他只会返回之前的计算结果。

　　2、计算属性computed与methods比较，methods是无需依赖改变，即可调用的方法。如果不希望用缓存时，它可以代替计算属性

　　3、计算属性computed与watch比较，watch会监听vue实例的某个数据变化，当监听的数据发生改变的时候，会调用此函数

　　4　、

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div class="contanier">
        <p>无依赖数据的computed：{{now}}</p>
        <p>有依赖数据的computed：{{computedFun}}</p>
        <p  v-if="message"><span>{{message}}</span></p>
        <p><input type="text" v-model="messageTest"></p>
        <p><input type="button" value="http://www.mamicode.com/输出" v-on:click="methodsFun" ></p>
        <p><span></span></p>
    </div>
    <script>
       var vm = new Vue({
           el:".contanier",
           data:{
               message:false,
               messageTest:""
           },
           computed:{
               now: function () {//没有依赖数据，不执行，是计算缓存
                   return Date.now();
               },
               computedFun:function(){//有依赖数据this.messageTest，执行
                   return this.messageTest;
               }
           },
           watch:{
               messageTest:function(val){//当messageTest数据发生改变时调用
                   this.message="等待输出中...";
               }
           },
           methods:{//vue实例定义的方法
               methodsFun:function(){
                   this.message=this.messageTest;
               }
           }
       });
    </script>
</body>
</html>

Vue笔记(一)


联系
我们