1、vue可以做什么？
①模板引擎：把数据渲染到页面上
②页面交互:以数据驱动视图:用户的交互事件中，只需要操作数据即可
2、vue特点
渐进式、以数据驱动视图
3、基本语法
new Vue( {el, data })
4、配置项
el：el选项用来指定vue实例管理的容器。用来设置模板。
data：用来设置数据。给vue提供数据源。
methids：方法的容器。用来写业务逻辑代码 ----- 修改数据
filters：定义过滤器。--- 对数据进行格式化（换个样子来展示）
例如：把时间戳 ---》2020-10-10
vue1.0中有内置过滤器 --》vue2.0取消了内置过滤器 ---》 vue3中的，已经删除了过滤器
directives：自定义指令。补充vue的内置指令
5、指令
使用地点： 在模板中使用的
格式：<元素 指令1 指令2></元素>
理解：就是特殊的属性名，以v-开头的，vue会特殊处理它们。
指令的作用：增强元素的功能。以实现模板渲染，页面交互
指令的分类
（1）、用来数据渲染
①v-if
②v-show
③v-text,v-html
④v-for
⑤v-else-if, v-else
⑥v-bind
⑦< img :src="" />
注意：v-if和v-for不要同时使用
原因
v-for的优先级比v-if的高
（2）、用来作页面交互（v-on）
事件修饰符
作用：对事件回调函数的行为做一些增强
格式：@click.修饰符="回调"
.prevent 阻止默认行为
.stop 阻止冒泡
.once 只做一次
.self 只处于发生自己身上的事件
（3）、用来收集表单数据（v-model）
①：显示数据
②：收集用户的输入（表单元素）
③双向绑定
④修饰符：
格式 v-model.修饰符="数据"
.trim 去前后空格
.lazy 当完成了输入之后，再去更新数据。把input ---> change
.number 转数值
（4）、优化
v-cloak HTML 绑定 Vue实例，在页面加载时会闪烁
然后才会出现 加载完成 字样，为了效果更明显，我们可以延后加载 Vue 实例
v-once 只渲染元素和组件一次, 这可以用优化更新性能. 执行一次性地插值，当数据改变时，插值处的内容不会更新。
6、计算属性
（1）、使用场景，为什么要用计算属性？
根据data中的已有的数据加工得到新数据
例如：计算商品列表的总价
（2）、格式
定义：
computed: { 计算属性名： function () { // 各种计算加工，this.xxxx访问数据 return } }
使用：
{{ 计算属性 }}
（3）、特点
①本质是一个函数，它不需要额外的参数； 在使用时，不需要（）
②当它依赖的数据（在内部用到的数据）发生变化时，它会自动重新执行
③有缓存
如果一个页面上多次用到了同一个计算属性，则对应的函数只会一次，然后就会将结果自动保存下来，后续使用就不再需要重复计算了
7、侦听器
（1）、功能
实时监控数据项的变化，并执行对应的函数
（2）、格式
watch:｛
"数据项"： function(变化之后的值， 变化之前的值) ｛
// 处理逻辑
｝
｝
8、vue-devtool（vue官方插件，用来调试vue）
9、组件
（1）、作用
是对一段功能代码的地址封装
（2）、格式
①定义格式
全局组件
Vue.component('组件名'， ｛
template: ``, // 组件的模板，好比是Vue实例的el
// 可选的
｝)
局部组件
②使用格式
<组件名></组件名>
（3）、注意
组件名。在定义时，建议使用大驼峰；在使用时，建议使用烤串
10、开发风格
①计算属性以c开头， 小驼峰命名。如cTotalMoney
②如果是用户交互直接调用的方法以h开发。如hRemove
③过滤器，以f开头。如fPrice
11、开发技巧
①减少嵌套，尽早返回
②给表单元素做双向绑定时，数据项的名字建议是根据 接口文档中的参数名 来取名字‘
③如果有多个数据项是属于同一个数据分类，则可以用一个对象包起来
