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标签中的内容
上一篇： jQuery实现的上下滚动公告栏详细讲解
下一篇： 买卖微信号，微信将梯度封禁处理