vue2知识点总结

模板语法

v-on缩写：

<!-- 完整语法 --><a v-on:click="doSomething">...</a> 
<!-- 缩写 --><a @click="doSomething">...</a>

 监听DOM事件。

v-bind缩写：

<!-- 完整语法 -->
<a v-bind:href="url">...</a><!-- 缩写 -->
<a :href="url">...</a>

直接渲染属性。

计算属性与侦听器

computed：复杂的逻辑计算属性

watch：适合监听异步数据。

条件渲染，列表渲染，class与style绑定

v-show：适合非常频繁地切换

v-if：适合条件变化少

• 绑定class

<div v-for="(value, key, index) in object">  
{{ index }}. {{ key }}: {{ value }}  //索引，键名值
</div>

<div v-bind:class="[{ active: isActive }, errorClass]"></div> //数组语法中使用对象语法
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> //三元表达式

<div v-bind:class="classObject"></div> //计算属性

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>//多重值

组件化思想

独立的，整体化，可复用。

实现功能模块的复用，高效执行，开发单页面复杂应用。

• 如何拆分

300行原则，复用原则。

什么是mvvm?

MVVM分为Model、View、ViewModel三者。 Model 代表数据模型，数据和业务逻辑都在Model层中定义； View 代表UI视图，负责数据的展示； ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作； Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。 这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

vuex介绍

• 多个视图依赖于同一状态（例如：导航菜单）
• 来自不同视图的行文需要变更同一状态（例如：评论弹幕）
• 为vue.js开发的状态管理模式
• 组件状态集中管理
• 组件状态改变遵循统一规则