Vue学习笔记 一（数据绑定、指令）

Vue学习笔记（一）

 

1. 基础知识

• vue.js不是框架，它只聚焦视图层，是一个构建数据驱动的web界面的库

2. 数据绑定

1. 插值

   <span>Text:{{text}}</span>
   <span>Text:{{*text}}</span> //只需渲染一次，后续变化不再关心
   <span>Text:{{{html}}}</span> //三个大括号插入html片段，html:'<span>test</span>
   

2. 表达式，表达式后可跟过滤符

   {{expression | filterA filterB}}
   {{expression | filter a b}}
   

3. 还可自定义数据绑定的符号

   Vue.config.delimiters = ["<%","%>"] // {{a}} ==> <%a%>
   Vue.config.unsafeDelimiters = ["<$","$>"] // {{{a}}} => <$a$>
   

3.指令

1. v-model指令后可跟多个参数

   • number：将用户输入自动转换为number类型，若转换后为NAN则返回原值。

     <input v-model="id" number>
     

   • lazy：在input事件同步输入框的值与数据，有此参数将数据改到change事件中触发。

     <input v-model="msg" lazy>
     

   • debounce：输入框中每次敲击之后延时同步输入框的值和数据

     <input v-model="msg" debounce="5000">
     

2. v-for指令

   • 指令得到一个隔离作用域，需要明确制定props属性传递数据，否则组件内将获取不到数据

     <my-item v-for="item in items" :item="item" :index="$index">
     

   • 应尽量避免直接设置数据绑定的数据元素，变化不会被监测到，但可以使用扩展的$set,$set,remove等方法

     vm.items[0]={};//错误用法
     vm.items.$set(0,{});
     

   • 当数组被整个重新替换的情况下，为避免重新渲染整个列表，可以使用track-by特性复用已有实例，这需要每个对象有唯一ID属性

   • v-for也可遍历对象，每个重复的实例都将有一个特殊属性$key，或给对象提供键值别名；还可遍历整数。

     <li v-for="value in object">{{$key}}:{{value}}</li>; //或下面用法
     <li v-for="(key,value) in object>{{$key}}:{{value}}</li>;
     <div v-for="n in 10">Hi {{$index}}</div>
     

   • 对于一个对象上新增或删除属性，vue.js提供了三种方法触发更新视图 $add(key,value)、$set(key,value)、$delete(key,value)。

   • vue.js支持内置过滤器和排序数组使用

     <input v-model="searchText">
     <ul>
     	<li v-for="user in users | filterBy searchText in 'name'">{{user.name}}</li>
     	<li v-for="user in users | orderBy field reverse">{{user.name}}</li>
     </ul>
     

3. v-text作用等同{{text}}，v-html作用等同于{{{html}}}，不提倡直接动态渲染html片段，很容易导致XSS攻击

4. v-bind可绑定一个或多个html的attribute，或组件的prop。当没有绑定参数时，可以绑定到一个对象,对象键即html的attribute。绑定prop时可以用修饰符指定不同绑定类型

   <img v-bind:src="imgSrc"> <==> <img :src="imgSrc">
   <div v-bind={id:someProp, name:otherProp}>
   <my-component :prop.sync="someProp"> //双向绑定
   <my-component :prop.once="someProp"> //单次绑定
   

5. v-on 绑定事件,也可以跟修饰符

   <button @click.stop="doThis"> //调用event.stopPropagation()
   <button @click.prevent="doThis"> //调用event.preventDefault()
   <input @key.enter="onEnter"> == <input @key.13="onEnter">
   

6. 自定义指令

   1. 自定义指令通过钩子函数定义。在钩子函数内this指向指令对象，可以访问到指令实例属性：el、vm、expression、arg、name、modifiers（修饰符）、descriptor（指令解析结果）

      Vue.directive('my-directive',{
      	bind:function(){
      		//指令第一次绑定到元素上时候只调用一次
      	},
      	update:function(value){
      		//bind之后以初始值第一次调用，之后每次绑定值变化时调用
      	}
      	unbind:function(){
      		// 指令从元素上解绑时，只调用一次
      	}
      });
      

   2. 自定义元素指令。

      1. 钩子函数以及params参数

         <my-directive class="hello" a="paramA" b="paramB"></my-directive>
         Vue.elementDirective('my-directive',{
         	params:['a','b'],
         	bind:function(){
         		//指令第一次绑定到元素上时候只调用一次
         	},
         	update:function(value){
         		//bind之后以初始值第一次调用，之后每次绑定值变化时调用
         	}
         	unbind:function(){
         		// 指令从元素上解绑时，只调用一次
         	}
         });
         

      2. deep参数：当自定义指令使用在一个对象上，若对象内部属性变化需要触发update，则需指定deep:true
      3. twoWay参数：让指令向vue实例写回数据
      4. acceptStatement参数：可让自定义指令接受内联语句
      5. Terminal参数：vue递归遍历DOM树编译模块，当遇到terminal指令会停止遍历该元素和后代元素。v-if和v-for都是terminal指令
      6. priority参数：指定优先级，默认指令优先级1000，terminal是2000，流程控制指令v-if和v-for始终拥有最高优先级。

         <div v-my-directive='a'></div>
         	Vue.elementDirective('my-directive',{
         		params:['a','b'],
         		deep:true,
         		acceptStatement:true,
         		terminal:true,
         		priority:3000,
         		bind:function(){},
         		update:function(value){}
         		unbind:function(){}
         	});
         	var vm = new Vue({
         		el:'#demo',	
         		data:{
         			a:{b:{c:2}}
         		}
         	})	```