VUE的指令
vue所有的指令都是以 " v-" 开头。
v-html:类似于 js中的innerHTML 。可以解析模板中的标签。
v-text:类似于 js中的innerText。将模板中的数据以字符串的形式输出。不会解析模板中的标签。等价于 {{ }}
:防止刷新时{{ }}出现在页面上
v-show:通过控制css
的display
来控制元素的实现和隐藏。如果是频繁切换则推荐用此方法。节约性能。
v-if:当属性值为true
时,则显示当前的元素,为false
,那么显示v-false
的元素。如果是偶尔切换,甚至不切换,则建议使用这个。减缓首次加在压力,提高性能。
v-else-if:配合着 v-if 使用,当条件不成立时,执行这步。
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>
v-once:只绑定一次,当数据再次发生变化,也不会导致页面刷新,写在不想刷新的标签上。
v-bind:
单向数据绑定
1 <!--完整写法--> 2 <a v-bind:href="url">1111</a> 3 <!--简写--> 4 <a :href="url">2222</a>
一般用于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>
1 var vm= new Vue({ 2 el:‘.box‘, 3 data:{ 4 isColor:true, 5 isSize:true 6 } 7 })
v-on: 绑定事件。
1 <!--完整写法--> 2 <button v-on:click="doThis"></button> 3 <!--简写--> 4 <button @click="doThis"></button>
监听DOM
事件,函数需要定义在methods
中,不能和data
中的内容重名,不能使用箭头函数
- 如果在绑定时,
fn
不带()
,那么函数会默认接收一个事件对象e
,mouseEvent
,如果绑定时带有小括号,那么默认接收事件对象, - 既需要事件对象,又需要参数,需要在绑定的小括号中加一个$event,后面才是真正的实参
v=for:循环
循环数组
1 <!--html--> 2 <div v-for="item in arr">{{item}}</div>
1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 arr:[1,2,4,574,45,448] 5 }, 6 })
效果如下:item 代表每一项
循环字符串
1 <div v-for="item in str">{{item}}</div>
1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 str:"fdhsde" 5 }, 6 })
效果如下 : item 代表着每一个字符
循环对象
<div v-for="(item,key,index) in obj">{{item}}--{{key}}--{{index}}</div>
1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 obj:{ 5 name:"qi", 6 age:"22", 7 } 8 9 }, 10 })
效果如下: 第一个参数是 属性值 ,第二个参数是 属性名,第三个参数是索引。
循环数字
1 <div v-for="item in 6">{{item}}</div>
效果如下 :
v-cloak
:用于元素加载数据比较多时,vue
解析时间比较长,为了防止{{}}
出现,给该元素加上v-cloak
属性,直到vue
中把DOM
数据插入到真实DOM
中时,让当前的元素显示;
1 <div class="#app" v-cloak> 2 <p>{{value.name}}</p> 3 </div>
1 [v-cloak] { 2 display: none; 3 }
但是有的时候会不起作用,可能的原因有二:
1、v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级
1 [v-cloak] { 2 display: none !important; 3 }
2、样式放在了@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标签中的内容