vue的指令

时间 2020-06-11

标签 vue 指令繁體版

原文原文链接

vue全部的指令都是以 " v-" 开头。css

v-html：相似于 js中的innerHTML 。能够解析模板中的标签。html

v-text：相似于 js中的innerText。将模板中的数据以字符串的形式输出。不会解析模板中的标签。等价于 {{ }} :防止刷新时{{ }}出如今页面上vue

v-show：经过控制css的display来控制元素的实现和隐藏。若是是频繁切换则推荐用此方法。节约性能。npm

v-if：当属性值为true时，则显示当前的元素，为false，那么显示v-false的元素。若是是偶尔切换，甚至不切换，则建议使用这个。减缓首次加在压力，提升性能。数组

v-else-if：配合着 v-if 使用，当条件不成立时，执行这步。app

v-else ：当以上条件都不成立时，执行这一步。函数

1 <!DOCTYPE html>
 2 <html lang="en">    
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <div v-if="mag<0">小于0</div>
10     <div v-else-if="mag<10">0-9</div>
11     <div v-else>大于10</div>
12 </div>
13 </body>
14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15 <script>
16     var vm=new Vue({ 
17         el:"#app", 
18 data:{ 
19             mag:15
20 }, 
21 }) 
22 </script>
23 </html></pre>

v-once:只绑定一次，当数据再次发生变化，也不会致使页面刷新，写在不想刷新的标签上。
v-bind：单向数据绑定性能

1   <!--完整写法-->
2     <a v-bind:href="url">1111</a>
3     <!--简写-->
4     <a :href="url">2222</a></pre>

通常用于class的获取学习

1 <ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
2     <li>学习Vue</li>
3     <li>学习Node</li>
4     <li>学习React</li>
5 </ul></pre>
1 var vm= new Vue({ 
2 el:‘.box‘, 
3 data:{ 
4         isColor:true, 
5         isSize:true
6 } 7 })</pre>

v-on: 绑定事件。url

1    <!--完整写法-->
2     <button v-on:click="doThis"></button>
3      <!--简写-->
4     <button @click="doThis"></button></pre>

监听DOM事件，函数须要定义在methods中，不能和data中的内容重名，不能使用箭头函数

若是在绑定时，fn不带（），那么函数会默认接收一个事件对象e，mouseEvent ，若是绑定时带有小括号，那么默认接收事件对象，
既须要事件对象，又须要参数，须要在绑定的小括号中加一个$event,后面才是真正的实参
v=for:循环

循环数组

1
2 <div v-for="item in arr">{{item}}</div></pre>

1     var vm=new Vue({ 
2         el:"#app", 
3 data:{ 
4             arr:[1,2,4,574,45,448]
 5 }, 
6     })</pre>

效果以下：item 表明每一项

循环字符串

1 <div v-for="item in str">{{item}}</div></pre>

1     var vm=new Vue({ 
2         el:"#app", 
3 data:{ 
4             str:"fdhsde"
5 }, 
6     })</pre>

效果以下： item 表明着每个字符

循环对象

<div v-for="(item,key,index) in obj">{{item}}--{{key}}--{{index}}</div></pre>

1     var vm=new Vue({ 
2         el:"#app",
 3         data:{
 4             obj:{
 5                 name:"qi",
 6                 age:"22",
 7             }
 8 
 9 }, 
10     })</pre>

效果以下：第一个参数是属性值，第二个参数是属性名，第三个参数是索引。

循环数字

效果以下：

v-cloak ：用于元素加载数据比较多时，vue解析时间比较长，为了防止{{}}出现，给该元素加上v-cloak属性，直到vue中把DOM数据插入到真实DOM中时，让当前的元素显示；

1 <div class="#app" v-cloak>
2     <p>{{value.name}}</p>
3 </div></pre>

1 [v-cloak] {
2     display: none;
3 }</pre>

可是有的时候会不起做用，可能的缘由有二：

一、v-cloak的display属性被层级更高的给覆盖掉了，因此要提升层级

1 [v-cloak] {
2     display: none !important;
3 }  </pre>

二、样式放在了@import引入的css文件中

v-cloak的这个样式放在@import 引入的css文件中不起做用，能够放在link引入的css文件里或者内联样式中

v-model：只用于表单元素忽略了value。checkbox selected，将数据绑定的视图上，视图修改会影响数据的变化（双向数据绑定）

单选框中使用v-model ：会将都绑定val的划分红一组，只能选择其中一个在复选框中，若是只有一个，v-model 会将值默认转换成布尔类型的值若是v-model 在复选框中同时绑定一个值，那么会把这几个进行分组，把选中的值，同一放进数组中若是多个input框同时绑定一个相同的v-model，经过是否在数组中进行选中或者不选择，各自来控制本身的状态用于下拉框那么select上v-model绑定的值：跟option中的value属性有关，那么若是没有value属性，那么会取option标签中的内容