Vue笔记(一)

时间 2019-11-16

标签 vue 笔记繁體版

原文原文链接

指令：html

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

　　二、v-bind 指令用于属性响应绑定数据，数据改变此绑定的属性也改变，例如：<a v-bind:href="url">连接</a>，数据url改变，则a的href属性值也改变。缓存

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

　　四、函数

计算缓存：this

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

　　二、计算属性computed与methods比较，methods是无需依赖改变，便可调用的方法。若是不但愿用缓存时，它能够代替计算属性spa

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

　　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="输出" 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>