- 引入Vue.js
- 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问) - 双向数据绑定 : v-model
- 显示数据 : {{xxx}}
- 理解vue的mvvm实现
- 创建Vue对象
实例：
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 创建Vue实例（Vue是一个vue.js库提供的构建函数）
const vm = new Vue({//配置对象（属性名必须是指定的一些名称）
el: '#app',//element:选择器，表明将页面哪个元素交给Vue管理
data: {//数据（Model）
username: 'Vue'
}
})
vm.username = 'kobe';
</script>
MVVM：
Model：模型，数据对象（data）
View：视图，模板页面
ViewModel：视图模型（Vue的实例）
- 模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性) - 双大括号表达式
语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法 - 指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy' - 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
