Vue
MVC
Model - View - Controller
MVVM
Model - View - ViewModel
使用
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。
Object.defineProperty()
– 数据劫持
两种版本
- 开发版本
通常用于开发阶段,会在控制台抛出错误及警告信息
- 生产版本
用于生产环境 ,删除了警告
直接引入
使用 <script src="">
引入
本地引入:下载 vue.js 文件,本地引入指定的文件
CDN:引入一个网络中的 vue.js 文件
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
声明式渲染
<div id="app">
{{ message }}
</div>
const vm = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
Vue 实例
所有的 Vue 应用都从创建 Vue 实例开始,在创建 Vue 实例时,传递一个选项对象参数:
const vm = new Vue({
el: '#app', // 指明 Vue 实例所关联的视图节点
data: { // 数据,用于在关联的视图节点中渲染的数据
message: 'hello'
},
methods: { // 方法,函数
show() {
return 'show'
}
}
})
在选项对象中的 el 属性,会根据对应的选择器创建出 DOM 节点对象,使用 $el
名称挂载到创建的 Vue 实例对象下(可使用 vm.$el
访问dom元素);
选项对象的 data 属性,会使用 $data
名称直接挂载到创建的 Vue 实例下(可使用 vm.$data
访问);
选项对象中的 data 数据,会将各属性直接挂载到创建的 Vue 实例对象下(可直接使用 vm.message
来访问 data 中的 message
数据),如果 data 中的数据属性名以 $
开头,则不会挂载到 Vue 实例下
选项对象中 methods 方法,会挂载到创建的 Vue 实例下
语法
{{ expression }}
– 文本插值
双花括号中的表达式是 JS 表达式的内容,该表达式中使用到的是 Vue 实例能够直接调用到的属性、方法…,如果表达式的内容为 html 文本字符串,{{ }} 会实现转义,不会渲染成 html 节点结构,预防 xss 攻击。
v-html
指令
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html
指令
指令就是在标签中以 v-
开头的属性,是在 Vue 中特殊定义的,有特定含义的属性,指令的属性值也是 JS 的表达式
- v-text 指令:渲染为普通文本
- v-bind 指令:动态绑定节点的属性值
在 html 元素的属性中,不能使用 {{ }}
语法来绑定属性值,需要使用 v-bind
指令来动态绑定。v-bind
可以简写为 :