目录
一、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: 表单元素
radio
text
address
select
checkbox
textarea
五、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重新计算,从而致使它关联的组件得以更新。