1、插件推荐
2、框架的学习方式
学会看文档
3.0源码，就会多一些新的知识点，只能看文档
英文文档，点翻译，把翻译的结果写成博客
看不懂没关系，看代码，去猜什么意思
猜不出来怎么办，把代码直接粘贴过来运行一下大概也能知道是什么效果
多敲代码
不是多抄代码
先多思考，分析一下思路流程，然后再去写代码
1.....
2.做什么
3.再做什么
多看一些博客额外学习
3、Vue.js是什么
官网地址：https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
Vue.js 就是一套前端开发网站的框架
用了它以后，我们以后不用再关心怎么去操作DOM,你只要关心如何获取数据就行了
因为用了Vue以后数据变了，界面DOM元素就会跟着变了
1、之前操作网页的不足
2.用vue不用操作DOM
4、Vue基本使用
传送门：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5
导包
准备div，最好给div加一个id，方便用vue找到它
实例化一个vue对象，el:传入div的id，data:里放所有的数据
使用步骤详解：
实例化Vue
传入一个对象
对象里有 el 属性
放选择器，代表找到一个根标签（不能是html和body），把根标签里面的内容用vue管理
对象里有 data 属性
放数据
对象里有 methods 属性
5、指令
指令：其实就是vue给我们提供好的一些代码，每个指令都有自己特有的功能实现
5.1 v-text指令（类似于innerText）
传送门：https://cn.vuejs.org/v2/api/#v-text
指令：其实就是vue给我们提供好的一些代码，每个指令都有自己特有的功能实现
v-text：就是把数据内容展示到双标签里面，跟{{ }}写法类似
区别：v-text会覆盖双标签里面原来的内容，但是 {{ }} 不会，它只是在写{{}}填充
{{ }} 这种语法也可以理解为是v-text的简写形式，它也叫做 插值语法，也可以叫 胡子语法
特点：会把内容都当做纯文本来解析
5.2 v-html指令
传送门：(https://cn.vuejs.org/v2/api/#v-html
作用跟 v-text 类似，都是给双标签里面改内容
但是v-html遇到标签会解析成DOM元素
它没有简写形式，{{ }} 永远都是v-text的简写
5.3 v-on指令
基本使用：https://cn.vuejs.org/v2/guide/events.html
添加事件的
v-on:事件名="要执行的代码"
简写形式： @事件名="要执行的代码"
事件要执行的代码， 如果写在行内，访问数据不用加this
@click="count++"//不用加this
事件是通过调用方法的形式来触发，那么方法里面访问数据，要加this关键字
v-on的修饰符
事件修饰符：(https://cn.vuejs.org/v2/api/#v-on)
.stop:阻止事件冒泡
.prevent：阻止默认行为
.enter：按回车才触发
5.4 v-bind指令
传送门：https://cn.vuejs.org/v2/api/#v-bind
v-bind（办的）
用来绑定行内属性的
写法：v-bind:属性名=“值"
简写：:属性名 = “值"
这个值可以写死，也可以绑定data中的属性
它对class属性操作时有个特殊写法
:class="{类名:值}"
如果值为true，加上这个类名，为false不加
5.5 v-model 表单输入绑定 （双向数据绑定）
传送门：https://cn.vuejs.org/v2/guide/forms.html
可以拿到文本框输入的内容
数据变了，界面也会改变
双向绑定：
5.6 v-for 指令
以前的循环：
v-for 指令
传送门：https://cn.vuejs.org/v2/guide/list.html
可以根据一个数组，渲染多个这样的标签
数组发生变化，标签也会跟着变化
语法：v-for="(item,index) in 数组"
先写的是元素，后写的是下标，跟名字无关，名字可以自己随便写
还可以遍历对象，只不过遍历对象时，item是属性值，index是属性名
5.7 v-if,v-else-if,v-else指令
传送门：https://cn.vuejs.org/v2/guide/conditional.html#v-show
它是按条件渲染某个元素
它只会渲染满足条件的那个元素，其他的不满足条件的压根不会加到dom元素里
5.8v-show指令
传送门：https://cn.vuejs.org/v2/guide/conditional.html#v-show
它也是按条件显示或隐藏，值为true就显示，值为false就隐藏
只不过它是通过操作元素的display来控制显示和隐藏
元素会永远在DOM上
v-if&v-show对比
两者对比https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
v-if会操作DOM，触发重绘（耗性能），所以如果是频繁的控制一个元素的显示和隐藏就不要用v-if，而是用v-show
如果有多个条件，但是最终只要显示一个元素，那么用v-if要好一点，因为如果v-show都会渲染出来
5.9 不常用的指令 （v-cloak指令、v-once指令、v-pre指令）
v-cloak指令(了解)
传送门：https://cn.vuejs.org/v2/api/#v-cloak
v-cloak这个行内属性，在vue加载完之前会留着，等vue加载完了后会自动移除
所以我们可以写一个 [v-cloak] 的样式，作为vue加载完之前的样式来显示
属性选择器
v-once指令(了解)
传送门：https://cn.vuejs.org/v2/api/#v-once
用v-once的元素，只有第一次显示时会跟vue的数据关联，后面再怎么变都跟它没有关系
v-pre指令(了解)
传送门：https://cn.vuejs.org/v2/api/#v-pre
有的时候我们就想让网站显示成 {{ msg }}这种形式，但是它会被vue解析出来
所以加一个v-pre，就会原样显示
6、vue实例中的this
在vue的事件里，this都是这个Vue实例
在行内不用加this，在方法里才要加
最终编译后，Vue中的data和methods不见了，但是data里的属性和methods里面的方法，都会直接挂到这个实例里面
所以我们访问data中的属性只要 this.属性 访问methods方法也只要 this.方法名()