vue指令总结（二）

一、vue指令

1.v-text

　　v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>v-text实例</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">{{message}}</div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 message: 'hello world'

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

2.v-html

　　v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>v-html实例</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

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

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 html: "<b style='color:red'>v-html的实例</b>"

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

3.v-model

　　v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>v-model实例</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <input type="text" v-model="message" placeholder="输入........">

         <p>输出的内容是: {{message}}</p>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 message: ''

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

4.v-bind

　　 v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。v-bind的缩写是 :属性名

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

     <style type="text/css">

         .bg{

             width: 200px;

             height: 200px;

             background-color: red;

         }

     </style>

 <body>

     <div id="app">

        <div :class="bg"></div>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data:{

                 bg:"bg"

             }

         })

     </script>

 </body>

 </html>

效果图如下所示：

5.v-cloak

　　v-cloak是用来解决刷新或者加载出现闪烁（显示变量），这个标签的特性在于它会在vue实例编译结束后从绑定的html元素上移除。通常情况下和下面示例的样式display: none一起使用的。代码如下所示：

 <template>

     <div v-cloak>

         {{message}}

     </div>

 </template>

 <script type="text/ecmascript-6">

     export default {

         name: "VCloak",

         data() {

             return {

                 message: 'v-cloak示例'

             }

         }

     }

 </script>

 <style lang="stylus" rel="stylesheet/stylus" scoped>

     [v-cloak] {

         display: none;

     }

 </style>

　　这个示例在浏览器运行不会起到任何作用的额，只有在那些网速较慢，vue.js还没有加载完成的时候，页面才会显示我们的{{message}}字样，直到创建实例，编译模板时，dom才会被替换的，所以这个过程屏幕会有闪动。

6.v-pre

　　在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <span v-pre>这不会被编译 + {{msg}}</span>

     </div>

     <script>

         var vm = new Vue({

             el:'#app',

             data: {

                 msg: 'Hello World!'

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

7.v-once

　　通过使用 v-once 指令,执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

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

         <p>v-once:当数据改变时，插值处的内容不会更新</p>

         <span v-once>{{msg}}</span>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 msg: 'hello world'

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

8.v-show

　　 v-show指令是用来控制dom元素显示和隐藏的

　　v-if与v-show的区别（经常会被问到）

相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>显示或隐藏</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

     <style>

         #bg{

             width: 100px;

             height: 100px;

             background: red;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <input type="button" value="toggle" @click="toggle()"> <br />

         <div id="bg" v-show="isShow"></div>

     </div>

     <script>

         var vm = new Vue({

             el:'#box',

             data:{

                 isShow:false

             },

             methods:{

                 toggle:function(){

                     this.isShow = !this.isShow;

                 }

             }

         });

     </script>

 </body>

 </html>

运行效果如下所示：

9.v-if

　　 v-if指令。其作用就是根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="id">

         <span v-if="flag">

            如果flag为true则显示,false不显示!

         </span>

     </div>

     <script>

         var vm = new Vue({

             el:"#id",

             data:{

                 flag:true

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

10.v-else

　　使用 v-else 指令来表示 v-if 的“else 块”,但是必须紧跟在v-if或者v-else-if后面搭配一起使用

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <p v-if="ok">加油，你是最棒的</p>

         <p v-else>你要继续加油哦</p>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 ok: true

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

11.v-else-if

　　v-else-if是在vue.js2.1.0中新增的，用作v-if的else-if块，可以链式的多次使用

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <div v-if="type === 'A'">

             A

         </div>

         <div v-else-if="type === 'B'">

             B

         </div>

         <div v-else-if="type === 'C'">

             C

         </div>

         <div v-else>

             Not A/B/C

         </div>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data: {

                 type: 'E'

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

12.v-for

　　 v-for我们用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要以item in list形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>数组案例</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <!--数组循环-->

          <div v-for="(item,index) in list"  :key="item.id">

              <div>{{item.text}}-----{{index}}</div>

              <span> {{item.text}}</span>

          </div>

     </div>

     <script>

         //push pop shift

         var vm = new Vue({

             el: '#app',

             data: {

                 list: [{

                     id: '00000001',

                     text: '注册组件'

                 },{

                     id: '00000002',

                     text: '对应的视图'

                 },{

                     id: '00000003',

                     text: '计算属性'

                 },{

                     id: '00000004',

                     text: '侦听器'

                 }

                 ]

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

v-for对象循环实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>对象循环</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <div v-for="(item,key,index) of userInfo">{{item}}---{{key}}---{{index}}</div>

     </div>

     <script>

         var vm = new Vue({

             el: '#app',

             data:{

                 userInfo:{

                     name:'美眉',

                     age: 18,

                     gender: '女',

                     salary: '秘密'

                 }

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：

13.v-on

　　v-on 指令用于绑定HTML事件：v-on:click 缩写为 @click

实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>给组件绑定原生事件</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="root">

         <child @click.native="handleClick"></child>

     </div>

     <script>

         Vue.component('child',{

             template: '<div>child</div>'

         })

         var vm = new Vue({

             el: '#root',

             methods: {

                 handleClick: function () {

                     alert('child')

                 }

             }

         })

     </script>

 </body>

 </html>

运行效果如下所示：