目录
简介
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用--index.html,页面跳转用的vue插件路由来实现跳转。
特点
1、前端三大主流框架之一 vue react Angular
2、轻量级框架 体积更小
3、生态圈广泛，适合初学者
4、基于mvvm模式，可以实现双向数据绑定
MVVM
Model：数据模型---data
View：视图
VM ViewModel：连接视图和数据模型的纽带。
数据模型发生变化，vm通知视图进行相应的修改；
视图发生了变化，vm通知数据模型进行相对应的修改。
双向数据绑定原理
ViewModel中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
优化渲染：当前数据模型发生改变只改变对应的视图，只渲染对应的视图层
生命周期
生命周期的第一步首先是创建vue实例，并且进行初始化。
vue实例初始化阶段
beforeCreate
在初始化的时候调用了beforeCreate，完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。
created
在初始化完毕之后，完成vue的数据注入以及数据监听操作，该构造的执行意味着vue实例创建完毕，可以进行data数据模型和和methods方法的访问。
vue实例挂载阶段
beforeMount
在created之后，vue会判断实例中是否含有el属性，如果没有vm.$mount(el)，接着会判断是否含有template属性，如果有将其解析为一个render function,如果没有将el指定的外部html进行解析。这里只完成了模板的解析但是数据并没有绑定到模板中。
mounted
创建vm.$el替换el,实际上完成的是数据绑定操作，在其间执行了render函数，将模板进行了解析，将数据进行了动态绑定。
vue实例更新阶段
beforeUpdate
更新虚拟dom节点
updated
完成了页面的重新渲染
vue实例销毁阶段
beforeDestroy
销毁之前调用，此时可以访问vue实例
destroyed
完成了监听器，子组件，事件监听等移除，销毁vue实例对象。
模板语法
1、{{}}文本渲染
也可以使用v-once，执行一次性地插值，当数据发生改变，插值出的内容不会更新
| {{msg}} <div v-once>{{msg}}</div> |
2、v-html解析代码片段
该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染。
| <div v-html="url"></div> |
| data:{ url:"<a href='https://www.baidu.com'>百度一下</a>", } |
3、v-bind属性渲染
| <div v-bind:title="title">v-bind绑定变量</div> <div :title="title">v-bind绑定变量简写形式</div> |
| data:{ title:'我是鼠标悬浮才会显示的标题', } |
4、v-on事件渲染
| <div>{{count}}</div> <button v-on:click="toAdd">点我count++</button> <button @click="toDel">点我count--</button> |
| methods: { toAdd(){ this.count++; }, toDel(){ this.count--; } } |
5、js表达式
| <div>{{String(count)}}</div> <div>{{Number(msg)}}</div> <div>{{count+5}}</div> <div>{{msg.split('')}}</div> |
| data:{ msg:'我是数据模型属性', count:0, } |
6、v-if条件渲染
| <div v-if="isLogin">请登录</div> <div v-else-if="install">欢迎您</div> <div v-else>测试</div> |
| data:{ isLogin:false, install:true, } |
7、v-show条件渲染
| <div v-show="isLogin">v-show条件渲染</div> |
| data:{ isLogin:true, } |
面试题：v-if和v-show的区别
1）v-if支持v-else-if、v-else，v-show 不支持 v-else。
2）v-if对应的是元素/标签的添加或者删除。
满足条件添加元素/标签，不满足条件删除元素/标签
3）v-show对应的是元素的CSS样式中的display属性。
满足条件对应的是元素的显示 display:block，不满足条件对应的是元素的隐藏 display:none
4）v-show 不管初始条件是啥，元素总会被渲染。v-if 只有条件变为真时，才会开始渲染条件块。
5）v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
8、v-for列表渲染
不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。key 具有唯一标识当前组件不被复用。
| <ul> <li v-for="(item,index) in Animal" :key="index">{{item}}--{{index+1}}</li> </ul> |
| data:{ Animal:['兔子','老虎','狮子'], } |
9、style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
| <div id="app"> <!-- 对象 --> <div :style="styleObj">hello</div> <!-- 对象 --> <div :style="{color:currentColor}">world</div> <!-- 对象，只生效写在后面的属性 --> <div :style="styleObj,styleObj1">hello world</div> <!-- 数组，属性重复时，写在后面的属性覆盖前面的属性 --> <div :style="[styleObj,styleObj1]">hello world</div> </div> |
| data:{ currentColor:'blue', styleObj:{ color:'red', 'font-size':'30px', // 属性命中有'-'要用引号引起来 }, styleObj1:{ backgroundColor:'cyan', color:'yellow' } } |
 |
10、class绑定
| <div id="app"> <div class="red">hello</div> <!-- 动态绑定类名 --> <!-- 对象 --> <div :class="{red:false,size:true}">world</div> <!-- 数组 --> <div :class="[{red:false},{size:true},{bgc:true}]">hello world</div> </div> |
| <style> .red{ color:red; } .size{ font-size: 28px; } .bgc{ background-color: blanchedalmond; } </style> |
 |
11、代码模板
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入Vue --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> // 创建DOM节点 <div id="app"></div> <script> // 创建一个Vue实例对象 new Vue({ // Vue实例与DOM节点进行绑定 el:'#app', // 存放Vue变量 data:{ }, // 存放函数 methods: {
}, }) </script> </body> </html> |
面试题：vue是单页面还是多页面，优缺点？
单页面
优点:
1、良好的交互体验
因为是局部渲染，每个部分是单独的模块。避免了不必要的跳转和重复渲染
2、前后端分离，提高开发效率，架构清晰。
3、减轻服务器的压力。
服务器只需要提供数据，不需要管前端逻辑和页面渲染，提高了性能。
缺点:
1、可能出现首屏加载时间过长的问题
因首屏加载时间过长导致白屏，如何解决？
1) 使用loading动画
白屏时显示转圈的动画，数据请求完毕时隐藏动画，显示页面。
2) 可以利用骨架屏效果
将最终需要显示的页面简化，编写出简化版的布局，数据请求完毕时隐藏骨架，显示页面。
3) 可以使用nuxt服务端渲染技术，减少浏览器压力
2、对SEO并不友好
搜索引擎的爬虫的原理就是抓取的url，然后获取html源代码并解析。而对于vue来说，爬虫获取到的html是模型页面而不是最终数据的渲染页面。可以使用nuxt框架解决seo问题。
面试题：为什么在大型项目中data是一个函数而不是一个对象
组件是一个可复用的实例,当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。
不使用return包裹的数据会在项目的全局可见，会造成变量污染；
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
扫一扫
2889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
