Vue
1、作者：尤雨溪
2、官网：https://cn.vuejs.org
3、渐进式JavaScript 框架
渐进式：主张最少 jquery:主要用来处理动画 bootstrap:ui框架(响应式、组件) 数据请求:ajax、axios
4、优点：
易用、灵活、搞笑、模块化友好、SPA(单页面应用) 多页面应用：一个url-->1个HTML，多个url-->多个HTML，有利于SEO优化，出现白屏 单页面应用：多个url-->1个HTML，不利于SEO优化、首屏加载慢，不会出现白屏
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" :haha="item.title">
{{item}}---{{index}}
</p>
指令
v-html
v-text
v-bind:
v-model
v-if
v-show
v-else
v-for
面试题
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 区别
