目录
一、vue的优点
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
国产框架，中文文档；
双向数据绑定
二、常用指令
v-cloak解决插值闪烁问题v-text会先执行 覆盖 元素中原本的内容 但是插值表达式只会覆盖自己的占位符，默认不会闪烁v-html渲染 html标签 覆盖元素中原有元素内容v-once只渲染一次v-bind: 简写为: 用来绑定数据 可以写合法的js表达式v-on: 简写为@用来点击事件
三、常用事件修饰符
stop阻止冒泡 ：外层和里层都有方法 点击里层会产生冒泡，也会触发外层的事件。
顺序 从里到外产生事件prevent阻止浏览器默认行为 ：
a标签有浏览器默认行为。capture捕获事件 ：点击里层先触发外层再触发里层 顺序从外到里产生事件self只触发自己本身的事件 不会产生冒泡和捕获事件 类似于阻止冒泡 但只针对自己那一层 最外层还是会被最里层冒泡冒到stop是阻止所有层次once事件只执行一次
四、数据的绑定
单向绑定 v-bind
v-bind 绑定class 数组语法
数组语法的含义是:class后面跟的是一个数组。
用法一：直接通过[ ]绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class="['active', 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class="['active', 'line']">Hello World</h2>
加引号和不加引号的区别：不加引号当成变量去解析，加引号当成字符串去解析。
<h2 class="title" :class="[active, line]">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性。
<h2 class="title" :class="classes">Hello World</h2>
v-bind 绑定class 对象语法
用法一：直接通过{}绑定一个类
<h2 :class="{
'active': isActive}">Hello World</h2>
**用法二：**也可以通过判断，传入多个值
<h2 :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突 ，一般在该属性必须有的情况下，才使用和普通的类同时存在
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
v-bind绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式。
在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
n绑定class有两种方式：
- 对象语法（常用）
- ·
:style="{color: currentColor, fontSize: fontSize + 'px'}" - style后面跟的是一个对象类型，对象的key是CSS属性名称，对象的value是具体赋的值，值可以来自于data中的属性。
- ·
- 数组语法（不常用）
<div v-bind:style="[baseStyles, overridingStyles]"></div>- style后面跟的是一个数组类型，多个值以，分割即可。
双向绑定 v-model 只能用于表单中
tips: 表单元素
radiotextaddressselectcheckboxtextarea
五、v-for的使用
1. 可以遍历: 普通数组,对象数组,对象,还可以是数字
<div v-for='(item,key,index) in object' :key='index'>
{
{item}}--{
{key}}--{
{index}}
</div>
<div v-for='(count in 10)'> </div>
12345
tips:在遍历对象的时候有多个
index索引,遍历数字时是从1开始的。绑定key时属性值必须是number或者string
六、过滤器
七、计算属性
六、组件传值
父传子
props
子传父
$emit
七、v-show与v-if
共同点：都能控制元素的显示与隐藏。
不同点：实现本质不同：v-show是通过控制css中的display属性控制显示与隐藏；v-if是动态地向DOM树内添加或者删除DOM元素，频繁切换比较消耗性能。
总结：频繁切换使用v-show，否则使用v-if
八、谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。
- Model 代表数据模型，数据和业务逻辑都在Model层中定义；
- View 代表UI视图，负责数据的展示；
- ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。
九、简述Vue的响应式原理
当一个Vue实例创建时，Vue会遍历data选项的属性，用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个组件实例都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。