项目实训第一周（3）

VUE.JS

vue.js是一套用于构建用户界面的渐进式框架。本次主要是对vue框架进行学习的一些笔记心得。

M： Model 数据模型

数据层
数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据
V: View 视图模板

视觉层
在前端开发中, 通常是DOM层
作用: 是给用户展示各种信息
VM： View-Model 视图模型

视图模型层
是View和Model沟通的桥梁
一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中
另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data

语法
综合
插值操作 Mustache

Mustache语法 (双大括号)
可以直接写变量
可以写简单的表达式
v-once
后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化

v-html
后面往往跟一个string类型
会将string的html解析出来并渲染

v-text
与Mustache相似, 一般不用, 不灵活

v-pre
用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法

v-cloak
在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签

v-bind
作用: 动态绑定属性
简写: :

条件判断

v-if
v-else-if
v-else
v-show

当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none
v-on
作用: 绑定事件监听
简写: @