一、Vuejs 模式
MVVM 模式：视图层和数据层的双向绑定，不用关心DOM 操作的事，更多精力放在数据和业务逻辑上
二、Vuejs 环境搭建
1､ 通过script 标签，引入vuejs
2、vue 脚手架工具 vue-cli 搭建【基于nodejs npm 搭建的】
三、Vue实例和数据绑定
通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用—入口
var app ＝new Vue({
//element,用于指定页面中已存在的DOM元素，挂载到DOM中，也可以是css,是必不可少的选项
el:'#app',
data:{ //可以声明应用内需要双向绑定的数据,也可以指向一个已经有的变量
msg:'开始学习vue'
}
})
挂载成功后，访问属性
1､访问vue实例的属性
app.$el // 访问vue实例的属性，都是以 $ 开头
2､访问data中的属性
app.msg //直接app.属性名
四、生命周期钩子
1､created （还未挂载）：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用，
2､mounted el （刚刚挂载）：挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始，也就是初始化要执行的业务逻辑代码，相当于 $(document).ready()
3､beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等
看个实例
image.png
五、文本插值和表达式
1､ 语法
使用双大括号 “{{}}“ ，会自动将我们双向绑定的数据实时显示
2､ 用法
在 {{ }} 中，除了简单的绑定属性值外，也可以是 JavaScript 表达式进行简单的运算 、 三元运算等
特别注意：Vue .js 只支持单个表达式，不支持语句和流控制
3､实例
{{ 6+6 *3}} // 支持 简单的运算
{{ 6<3 ? msg :a}} // 支持 三元运算符
{{if(6>3){}} // 不支持 书写表达式
{{var a = 6}} // 不支持 多行表达式 var a=6 相当于 var a;a = 6;
{{ var book = ’ Vue . js 实战 ’}} // 不支持 语句
{{ if (ok) return msg }} // 不支持 流控制
六、过滤器
1､ 作用
格式化文本【字母全大写、货币千位使用逗号分隔符】
2､用法
在 {{}} 插值的尾部添加一小管道符 “ | ” 对数据进行过滤
{{date | formatDate}} // | 后面接的是 过滤器的名字
{{date | filter1 | filter2 }} // 过滤器的串联
{{date | formatDate('arg1', 'arg2')}} //过滤器的参数
3､规则
自定义的， 通过给 Vue 实例添加选项 filters 来设置
**注：{{date | formatDate(66,99)}} 中的第1个和第2个参数，分别对应script 标签内 过滤器 formatDate 的第2个 a 和 第3个参数 b **，而 script 标签内的过滤器 formatDate 第一个参数是 date
image.png
七、指令
1､ 定义
带有前缀 v- ，能帮我们快速完成 DOM 操作，循环渲染，显示和隐藏
2､ 部分指令
A、v-text ：解析文本 等同于 {{ }} 文本插值
<span v-text="apple"></span> === {{apple}} //true
B、v-html ：解析html
C、v-bind ：动态更新html 元素上的 属性，如id,class等
D、v-on ： 绑定事件监听器
v-on 用法：
1､在普通元素上，可以监听原生的 DOM 事件（ click、dblclick、 keyup, mousemove 等）
2､表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，
3､函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据
注：vue中用 到的所有方法都定义在methods中
八、语法糖
在不影响功能的情况下，用简洁的方法实现同样的效果，从而更方便程序开发
网友评论