vue指令

什么是指令呢？指令本质就是自定义属性，指令的格式都以v-开始

1.  v-cloak指令：插值表达式中存在的问题：“闪动”，原理：先通过样式隐藏内容，然后在内存中替换值，替换好后在显示最终的结果。

　 用法

[v-cloak] {
      display: none;        
}

　　

<div id="box" v-cloak>{{msg}}</div>

数据绑定指令

2.  v-text指令：填充纯文本，相比插值表达式更简洁，不存在闪动问题

<div id="box" v-text="msg"></div>
<script>
    var vm = new Vue({
         el: '#box',
         data: {
              msg: 'hello vue'
         }
    });
</script>    

3.  v-html指令：填充HTML片段，存在安全问题，本网站内部的数据可以使用，来自第三方的数据不使用

<div id="box" v-html="msg1"></div>
<script>
    var vm = new Vue({
　　        el: '#box',
         　 data: {
　　　　　　　　　　msg: 'hello vue',
　　　　　　　　　　msg1: '<h2>html</h2>'
　　　　　　　}
　　});
</script>  

4.  v-pre指令：显示原始信息，跳过编译过程（分析编译过程）

<div id="box" v-pre>{{msg}}</div>
<script>
    var vm = new Vue({
         el: '#box',
         data: {
              msg: 'hello vue'
         }
    });
</script> 

　数据响应式：html5中（屏幕尺寸的变化导致样式的变化）

　　　　　　　数据的响应式（数据的变化导致页面内容的变化）

　数据绑定：将数据填充到标签中

　5.  v-once指令：只编译一次，显示内容之后不再具有响应式功能

<div id="box" v-once>{{msg}}</div>
<script>
    var vm = new Vue({
         el: '#box',
         data: {
              msg: 'hello vue'
         }
    });
</script> 

　双向数据绑定：数据变化对页面的影响，页面数据变化对数据的影响

　MVVM设计思想：M（model) 模型 实际是data中的数据，V（view) 视图  模板， VM（View-Model）提供了控制功能

　　　　　　　　View --------->dom Listeners ----------->Model (视图到数据通过事件监听)

　　　　　　　　Model --------> Data Bindings ----------> View (数据到试图通过数据绑定)

　6.  v-model指令：页面内容变化会使数据也发生变化

<div id="box" v-model="msg">{{msg}}</div>
<script>
    var vm = new Vue({
         el: '#box',
         data: {
              msg: 'hello vue'
         }
    });
</script> 

Vue如何处理事件：

　　7.  v-on指令：v-on:事件名称（可将v-on替换为@）eg：v-on:click  (@click)

<button v-on:click="num++">点击</button>
<button @click="num++">点击</button>

事件函数的调用方式：

为优化性能v-on指令一般调用方法，方法需定义在Vue实例的methos中

        <button v-on:click="handle">点击3</button>
        <button @click="handle()">点击4</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle: function() {
                    this.num++;
                }
            }
        });
    </script>    

 事件函数的参数传递：普通参数与事件对象

　　如果事件直接绑定函数名，默认会传递事件对象作为事件函数的第一个参数

　　如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，并且事件的名称必须是$event

<button v-on:click="handle('123', $event)">点击</button>

        <button v-on:click="handle1">点击1</button>
        <button @click="handle2(123,234,$event)">点击2</button>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML);
                    this.num++;
                } ,
                handle2:function(p,p1,event) {
                    console.log(p,p1);
                    console.log(event.target.innerHTML);
                    this.num++;
                }
            }
        });
    </script>

　　事件修饰符

　　　　（1）.stop 阻止冒泡

<a v-on:click.stop="handle">跳转</a>

　　　　（2）.prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

　　按键修饰符

　　　　（1）.enter 回车键

<input v-on:keyup.enter='handleSubmit'>

　　　　（2）.delete 删除键

<input v-on:keyup.delete='handleSubmit'>

　　自定义按键修饰符

　　　　a: 自定义按键事件名

　　　　值：按键的keyCode值

Vue.config.keyCode.a = 65