vue标签属性及其用法

一、Vue的特点

1、采用组件化模式，提高代码的复用率、且让代码更好维护。

2、声明编码，让编码人员无需直接操作DOM，提高开发效率。

3、使用学你DOM+优秀的Diff算法，尽量服用DOM节点。

二、Vue模板语法有两大类

1、插值语法：

功能：用于解析标签体内字体

写法：{{xxxx}}，xxx是js的表达式，且可以直接读取到data中的所有属性。

2、指令语法：

功能:用于解析标签（包括：标签属性、标签体内容、绑定事件…….）.

举例：v-bind：href=“” 或 简写：:herf=“xxx”，xxx同样要写js表达式

备注：Vue中有很多指令，且形式都是：v-？？？，在此处我们只是那v-bind举个例子。

三、数据绑定

v-bind（:）实现的单项的数据绑定，数据只能从data流向页面；

v-model 实现的是双向的数据绑定，数据不仅能从data流向页面，还可以从页面流向data；

注意：双向数据绑定（v-model）只能应用在表单类的元素上，也就是输入类元素上（如：input输入框，select等）；

四、MVVM模型

1、M：模型（model）：对应data中的数据；

2、V：视图（View）：模板；

3、VM：视图模型（ViemModel）：Vue示例对象；

数据代理：通过一个对象对另外一个对象中属性的操作（读/写）；

五、Vue中的事件修饰符：

1、prevent：阻止默认事件（常用）；

2、stop：阻止使事件冒泡（常用）；

3、once：事件只能出发一次（常用）；

4、capture：使用事件的捕获方式；

5、self：只有event.target是当前操作的元素是才触发的事件；

6、passive事件的默认行为立即执行，无需等待事件回调执行完毕；

六、计算属性：

1、定义：要用的属性不存在，要通过已有的属性计算的来

2、原理：底层借助了Objcet，defineproperty方法提供的getter和setter。

3、get函数什么时候执行？

（1).初次读取的时候执行一次。

（2).当所依赖的数据发生改变时会被再次调用。

4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5、备注：

1、计算属性最终会展现在vm上，直接读取使用即可。

2、如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

七、监视属性watch：

1、当被监视的属性发生变化时，回调函数自动调用，进行相关操作

2、监视属性必须存在，才能监视

3、监视的两种写法：

（1）new Vue时传入watch配置；

（2）通过vm.$watch监视；

4、深度监视：

（1）vue中的watch默认不监测对象内部值得改变（一层）；

（2）配置deep：true可以检测对象内部值得改变（多层）；

（3）Vue自身可以监视对象内部值的改变，但Vue提供的watch默认不可以！

（4）使用watch时根据数据的具体结构，决定是否采用深度监视。

ps：计算属性（computer）和监听属性（watch）之间的区别：

1、计算属性（computer）能完成的功能，监听属性（watch）都可以完成。

2、监听属性（watch）能完成的功能，computer不一定能完成，例如watch可以进行异步操作。

两个重要的小原则：

1、所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

2、所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数这样this的指向才是vm或组件实例对象。