vue基础 v-系列

前端主要工作：

官网：展示公司、炫酷(交互效果多)、数据比较少。基本上一定是前端做
小程序：页面不一定很炫酷、数据不一定很多。一定是前端做
app：展示公司、页面不炫酷、数据很多。大概率不是前端做
后台管理系统：页面不炫酷、数据非常庞大。一定是前端做的
功能：公司人员、薪酬福利、请假、公告
H5活动页面：页面炫酷、数据不多、一次性使用。一定是前端做的

Vue

1、作者：尤雨溪

2、官网：https://cn.vuejs.org

3、渐进式JavaScript 框架

渐进式：主张最少
jquery:主要用来处理动画
bootstrap:ui框架(响应式、组件)
数据请求:ajax、axios

4、优点：

易用、灵活、高效、模块化友好、SPA(单页面应用)

多页面应用

每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

多页面应用：一个url–>1个HTML，多个url–>多个HTML，有利于SEO（搜索引擎优化），会出现白屏

为什么多页应用的首屏加载快？

首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。

为什么搜索引擎优化效果好（SEO）？

搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。

但是它也有缺点，就是切换慢,出现白屏

因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

单页面应用

第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。

原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

单页面应用：多个url–>1个HTML，不利于SEO优化、首屏加载慢，不会出现白屏

为什么页面切换快？

页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。

缺点：首屏时间慢，SEO差

单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。

5、缺点：

不利于SEO优化
首屏加载慢
不支持IE 6 7 8

6、核心：

数据驱动
组件系统

7、引入方式：

1、cdn：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、npm(推荐)：npm i vue –save
3、脚手架

使用

1、el挂载点

    new Vue({// 挂载点会根据css选择器来选择对应的挂载位置// 如果匹配到多个挂载点，只有第一个生效，后面的不生效// 不要将vue挂载到html或者body上// 我们推荐使用id，直接挂载到这个id上，因为id具备唯一性el: "#app"})

2、data、methods

    new Vue({el:'#app',// data用来存放数据、变量data:{name:'孙尚香'},// methods用来存放函数methods: {// fn:function(){//   console.log(111);// }fn(){console.log(111);}}})

3、数据绑定

{{}} 优点：方便    缺点：不能识别标签，首屏会出现{{}}
v-html  优点：可以识别标签，首屏不会出现{{}}      缺点：写法麻烦
v-text  优点：首屏不会出现{{}}        缺点：不能识别标签并且写法麻烦

4、v-bind:

动态数据绑定

<img v-bind:src="imgSrc" v-bind:imgTitle="title">    //正常写法
<img :src="imgSrc1">   //简写

注意：1、v-bind: 不仅可以绑定已经存在的属性，还可以绑定自定义属性
2、v-bind: 可以简写成 “：”

5、v-model

双向数据绑定

//视图部分
{{name}}
<input type="text" v-model="name">
//模型部分
new Vue({el:'#app',data:{name:'妲己'}
})

6、v-if和v-show

//显示与隐藏
<p v-if="true">{{name}}</p>
<p v-show="true">{{name}}</p>区别：v-if采用的是惰性加载(根本就不加载这个DOM节点)。而v-show是添加了display这个样式。
使用场景：如果频繁切换的话建议使用v-show

7、v-else

v-else一定要紧挨着v-if

8、v-for

 <p v-for="(item,index) in arr" :key="index">{{item}}---{{index}}</p>

指令

v-html
v-text
v-bind: 动态数据绑定
v-model 双向数据绑定
v-if 条件渲染
v-else
v-show 条件展示
v-for

过渡动画的应用场景

1、条件渲染（使用v-if）
2、条件展示（使用v-show）
3、组件根节点
4、动态组件

面试题

1、vue与其它框架对比的优势和劣势？
答：优势：擅长处理数据的增删改差。劣势：不利于SEO优化、不支持IE6 7 8、首屏加载慢
2、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
答：M-model模型 V-view视图 VM-view model视图模型，通过view model来改变，它是模型和视图的中间桥梁。mvvm擅长处理数据的增删改查，而jquery擅长处理动画
3、vue等单页面应用及其优缺点
4、说出至少4种vue当中的指令和它的用法
5、v-if 和 v-show 区别