vue指令参考

Posted 2020-10-23 GIC扫地僧

vue 指令 directive, 只是dom上的行间属性，vue给这类属性赋予一定的意义来实现特殊的功能。所有指令以v-

开头。

<input type="text" v-model=‘message‘ >
//value 属性默认会被vue忽略，selected，checked属性也如此。

 

let vm=new Vue({
   el:‘#app‘,
   data:{
      person:{name: ‘ ‘} //使用变量时先要初始化，否则新加的属性不会导致页面更新。即 name需要赋值，哪怕赋值为空。如果没定义该属性，则需用vm.$set(vm.person, ‘name‘, ‘aaa‘)给对象添加响应式数据变化，或用替换原对象方法，即vm.person={name:‘aaa‘}
    }
});

 

let vm=new Vue({
   el:‘#app‘,
   data:{
      arr:[1,2,3]//改变数组中的某一项是监控不到的，也不能使用改变其长度的方法。即 vm.arr[0]=xxx, vm.arr.length-=1,可使用可改变原数组值的函数加工。如pop,push,shift,unshift,sort,reverse,splice,也可用map, filter等函数，如：
　　//vm.arr=vm.arr.map(val=>val*=2);

    }
});    

 

v-once 指令：只绑定一次。当数据再次变化也不会导致页面刷新。

<div v-once>{{name}}</div>

 

v-html:渲染带html代码的字符串. 一定要是可信任的html

<div v-html="text"></div>

let vm=new Vue({
   el:‘#app‘,
   data:{
      name:‘aaa‘,
      text:‘<p>hello world!</p>‘
    },
  
});    

 

v-for 指令

<ul>
<li v-for="item in items">{{item.name}}:{{item.price}}</li> //不加索引的格式
</ul>

<ul>
<li v-for="(item，index) in items">{{item.name}}:{{index+1}}</li> //加索引的格式
</ul>

v-for 循环嵌套

<ul>
<li v-for="item in items">{{item.name}}:{{item.price}}</li>
<ul>
<li v-for="(type,childindex) in items.types">{{childindex+1}}:{{type}}</li>
</ul>
</ul>

v-on 事件处理

调用无参数函数：
<div v-on:click=‘clickme‘> Click Me </div>
或者：
<div @click="clickme">Click Me </div>

 

let vm=new Vue({
   el:‘#app‘,
   data:{
      name:‘aaa‘
    },
    methods:{
    clickme(){alert(this.name)}
    }
});    

 

调用有参数函数：
<div v-on:click=‘clickme($event,1)‘> Click Me </div>

 

let vm=new Vue({
   el:‘#app‘,
   data:{
      name:‘aaa‘
    },
    methods:{
    clickme(event, param){if param==1 console.log(event)}
    }
});    

如果不传参数，则v-on:click后调用函数不要写括号，会自动传入事件源。如果传参数，要手动传入$event属性。methods中的this指代根实例，即vm. methods和data里的数据会全放到vm上，且名字不能冲突。