vue常用指命

1.v-text：用于更新标签包含的文本，作用和{{}}的效果一样。

2.v-html：绑定一些包含html代码的数据在视图上。

3.v-show：用来控制元素的display属性，和显示隐藏有关。v-show指令的取值为true/false，当值为true时直接渲染，当值为false时渲染出来之后带有display:none属性。

4.v-if：控制元素是否被渲染出来。v-if指令的取值为true/false，当值为true时直接渲染，当值为false时直接不渲染。和v-show的区别为：如果需要频繁的切换显示/隐藏的，就用

　　v-show，如果运行后不太可能切换显示/隐藏的，就用v-if。

5.v-else：没有对应的值，但是要求前一个兄弟节点必须要使用v-if指令。v-if和v-else只有一个被渲染出来。

6.v-for：实现列表的渲染，可以用于data中存放的是array形式的数据之类。v-for除了可以迭代数组，还可以迭代对象和整数。

7.v-bind：用于动态绑定DOM元素的属性，常见的用法有：<a>标签里边的href属性，<img/>标签的src属性等。

8.v-on：相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。例如click事件等。

9.v-model：实现表单控件和数据的双向绑定，是最重要最常用的指令，一般用在表单输入。

10.v-once：特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

1、v-if系列

v-if="数据|判断"

只要条件成立，就显示if中的元素

v-else （注意:必须跟在v-if或者v-if-else的后面，不然失效）

如果if条件不成立显示当前的元素

v-else-if 要紧跟v-if

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <script src="../js/vue.min.js"></script>

 7     <style>

 8     .box{

 9         width:100px;

10         height:100px;

11         background: red;

12     }

13     .box2{

14         width:100px;

15         height:100px;

16         background: yellow;

17     }

18     .box3{

19         width:100px;

20         height:100px;

21         background: green;

22     }

23     </style>

24 </head>

25 <body>

26     <div id="app">

27         <span>隔山打牛</span>

28         <div class="box" v-if="onOff == 'a'"></div>

29         <div class="box2" v-else-if="onOff == 'b'"></div>

30         <div class="box3" v-else></div>

31     </div>

32     <script>

33    new Vue({

34        el:'#app',

35        data:{

36             onOff:'b'

37        }

38    });

39     </script>

40 </body>

41 </html>

v-if中条件不成立就执行v-else-if中的yellow黄色背景，如果v-else-if也不成立，则执行v-else中的绿色背景

2、v-show

根据表达式之真假值，切换元素的 display CSS 属性

v-show和v-if都是用来控制元素的渲染

v-if——判断是否加载，可以减轻服务器的压力，在需要时加载

v-show——调整css dispaly属性，可以使客户端操作更加流畅

 <div id="app">

        <div v-show="islo">你好，vue</div>

 </div>

1 new Vue({

2        el:'#app',

3        data:{

4            islo:true

5        }

6 })

上面例子中如果islo为false则display属性为none 隐藏元素

3、v-for

该指令根据遍历数组来进行渲染

/*

一个参数：<div v-for="val in obj">{{val}}</div>

两个参数：<div v-for="(val,key)" in obj>{{val}}</div>

三个参数：<div v-for="(val,key,index)" in obj>{{val}}</div>

*/

注意：
当v-for 和 v-if同处于一个节点时候，v-for比v-if优先级高
意味着v-if将运行在每个v-for中

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <script src="../js/vue.min.js"></script>

 7 </head>

 8 <body>

 9     <div id="app">

10        <ul>

11            <li v-for="val in items">{{val}}</li>

12        </ul>

13        <ol>

14            <li v-for="(user,key) in itemObj">{{user.name}}</li>

15        </ol>

16        <div v-for="(val,key,index) in obj" >{{key}}：{{val}}</div>

17     </div>

18     <script>

19     /*

20     val:数组中的每个值，对象每个值

21     key:数据就下标，对象key值

22     index:下标0,1,2

23     */

24    new Vue({

25        el:'#app',

26        data:{

27            items:['苹果','橘子','香蕉','草莓','柚子'],

28            itemObj:[

29                {name:'apple'},

30                {name:'orange'},

31                {name:'banana'},

32                {name:'strawberry'},

33                {name:'pomelo'},

34             ],

35             obj:{

36                id:1,

37                name:'小明',

38                age:22,

39                home:'太原'

40             }

41        }

42

43    });

44     </script>

45 </body>

46 </html>

4、v-text和v-html

v-text => 等同于innerText 文本

v-html => 等同于innerHTML 内容（包括元素）

{{msg}}这种当我们网速很慢或者js出错时，会暴露我们的{{xxx}},这时候可以使用v-text

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../js/vue.min.js"></script>

</head>

<body>

    <div id="app">

       <span>{{msg}}</span>

       <p v-text="msg"></p>

       <p v-html="str"></p>

    </div>

    <script>

   new Vue({

       el:'#app',

       data:{

           msg:'你好，世界',

           str:'<h2>内容</h2>'//这里使用v-html，v-text会把<h2>标签也输出来

       }

   });

    </script>

</body>

</html>

5、v-on

v-on:事件名

缩写:@事件名

事件函数写在methods

methods在根实例下，值为一个对象

methods:{

　　函数名(){

　　　　this指向实例

　　　　this的数据修改，直接this.数据名即可

　　}

*** 改了数据，内容也会随之改变

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../js/vue.min.js"></script>

    <style>

    </style>

</head>

<body>

    <div id="app">

      <button @click="add">添加</button>

      <button @click="rm">删除</button>

      <ul>

          <li v-for="(val,key) in arr">{{val}}</li>

      </ul>

    </div>

    <script>

   new Vue({

       el:'#app',

       data:{

           num:0,

           arr:[]

       },

       methods:{

           add(){

            this.arr.unshift(++this.num)

           },

           rm(){

               if(this.num>0){

                this.arr.shift();

                this.num --;

               }

           }

       }

   });

    </script>

</body>

</html>

v-on修饰符

stop

//调用 event.stopPropagation()

prevent

//调用 event.preventDefault()

self

//只当事件是从侦听器绑定的元素本身触发时才触发回调

<div id="app">

       <div id="box1" @click="b1">

       <!--stop阻止冒泡，prevent阻止默认行为-->

           <div id="box2" @click.stop.prevent="b2">

            12345

           </div>

       </div>

 </div>

 new Vue({

           el:'#app',

           methods:{

               b1(){alert(1);},

               b2(){ alert(2);}

           }

    });

6、v-bind

v-bind:属性名

缩写:

:class

动态绑定数据，及时对页面的数据进行变更

一般是用来操作属性。如class、style、src、href等等

:class="c" 可以写数据

:class="{red:true}" red->类名: 布尔值，只有为true的时候才显示这个class

:class="[c1,c2]" c1和c2为对象 {red:true}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../js/vue.min.js"></script>

    <style>

        .classA{

            color:red;

        }

        .classB{

            color:orange;

        }

    </style>

</head>

<body>

    <div id="app">

      <div :class="classA">绑定class</div>

      <div :class="{classA:isok}">绑定class的判断</div>

      <div :class="{classA,classB}">绑定class中数组</div>

      <div :class="isok?classA:classB">绑定class的三元运算符</div>

      <div>

          <input type="checkbox" id="isok" v-model="isok">

      </div>

    </div>

    <script>

   new Vue({

       el:'#app',

       data:{

          classA:'classA',

          classB:'classB',

          isok:true

       },

   });

    </script>

</body>

</html>

7、v-model

在表单上创建双向数据绑定

当在表单元素中，绑定了v-model，那么只要用户改变视图中的内容

那么就等同于直接改变数据，当然改变数据，一样会改变视图

在使用v-model的时候，如果放个数组，那么会自动查找表单元素中的value

没有则出现null,如果要统计多个表单元素的信息，可以把同一个数据绑定到 v-model上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../js/vue.min.js"></script>

    <style>

    .active{

        background: red;

    }

    </style>

</head>

<body>

    <div id="app">

     小黄<input type="checkbox" value="小黄" v-model="arr">

     小蓝<input type="checkbox" value="小蓝" v-model="arr">

     小绿<input type="checkbox" value="小绿" v-model="arr">

     {{arr}}

    </div>

    <script>

   new Vue({

       el:'#app',

       data:{

          arr:[]

       },

   });

    </script>

</body>

</html>

在select上绑定v-model，如果option中有value,选择的结果优先为value值

如果没有value值，则走option的内容

<div id="app">

        <select name="" v-model="b">

            <option disabled value="">请选择</option>

            <option value="aa">广州</option>

            <option value="bb">杭州</option>

            <option value="cc">福州</option>

            <option value="dd">苏州</option>

            <option value="ee">徐州</option>

            <option value="ff">兖州</option>

        </select>

        <!--下面会直接出现城市名称，因为没有value值-->

            <select name="" v-model="b">

                <option disabled value="">请选择</option>

                <option >广州</option>

                <option >杭州</option>

                <option >福州</option>

                <option >苏州</option>

                <option >徐州</option>

                <option >兖州</option>

            </select>

        {{b}}

    </div>

8、v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能

只绑定一次，当数据再次发生变化，也不导致页面刷新

<span v-once>change:{{msg}}</span><div v-once><h1>comment</h1>

    <p>{{msg}}</p>

</div>

<my-component v-once:comment="msg"></my-component><ul>

    <li v-for="i in list">{{i}}</li>

</ul>

上面的例子中，msg,list即使产生改变，也不会重新渲染

9、v-pre

主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译

<div id="app">

　　<!--第一条语句不进行编译-->

    <span v-pre>{{message}}</span>

    <span>{{message}}</span>

</div>

最终仅显示第二个span的内容

10、 v-cloak

这个指令是用来保持在元素上直到关联实例结束时进行编译

<div id="app" v-cloak>

    <div>

        {{message}}

    </div>

</div>

<script type="text/javascript">

    new Vue({

      el:'#app',

      data:{

        message:'hello world'

      }

    })

</script>

在页面加载时会闪烁，先显示

<div>

    {{message}}

</div>

然后再显示

<div>

    hello world!

</div>

巴特西

vue常用指命

最新文章

热门文章