vue指令和相关方法

v-model

实现双向数据绑定，常用于input和textarea

是一个典型的MVVM模型

底层的实现原理：

Vue自身实现一个Watcher，作为连接Observer和Compile的桥梁。而数据层的Observe和视图层的Compile都是基于观察者模式实现的，再加上Watcher这个中间桥梁，Vue实例能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

双向数据绑定原理：

Object.defineProperty()函数可以定义对象的属性相关描述符， 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用，下面，我们看看这个函数的基本使用方式。

var obj = {

      foo: 'foo'    }

    Object.defineProperty(obj, 'foo', {

      get: function () {

        console.log('将要读取obj.foo属性');

      },

      set: function (newVal) {

        console.log('当前值为', newVal);

      }

    });

    obj.foo; // 将要读取obj.foo属性obj.foo ='name';// 当前值为 name

v-bind特性被称为指令，指令带有前缀v-表示他们是Vue提供的特殊特性

v-text

用来替换插值表达式，如果有v-text，那么插值 {{}} 不起作用

v-html

如果要输出正确的不带html标签转义的内容，就需要v-html指令

v-cloak

与style标签一起使用，防止页面刷新不出来的时候出现乱码

[v-cloak] {

    display: none;

}

v-for:

用来遍历数据，通常使用key元素给每个元素添加识别码

    

•         {{item.id}}{{item.title}}

      

v-if

已完成

v-show 和 v-if 的区别

    相同点：v-if与v-show都可以动态控制dom元素显示隐藏

    不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。对于需要频繁切换显示和隐藏的节点特别实用。

v-on

v-on:事件名    用于绑定一个事件，这个事件可以直操作data里面的数据

v-on:事件名    可以直接缩写为@事件名

v-bind

用于动态绑定元素的属性

可以直接简写为 ：属性

    v-bind:key="item.id"

    :key="item.id"

按键修饰符

可以通过v-on添加按键修饰符

v-on指令绑定enter键事件，点击执行submit()函数事件，

同样也可以简写为@keyup.enter="onAddValue()"

下面的button按钮也绑定了点击事件，执行函数onAddValue();

同样vue监听按键事件也可以添加其他的按键：只要加上相应的按键的名称就行了

     

     添加

v-on.prevent:

阻止事件的默认行为