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