1.Vue实例创建
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
1.1 编写界面
1). 所有界面内容必须包裹在一个唯一的父元素内。
2). 找到页面中所有可能变化的位置用{{变量名}}方式临时占位。
1.2 创建Vue实例
创建new Vue对象,将界面中的数据和data对象绑定起来。
var vm=new Vue({
el:"#app", //el:element的缩写
data: { }, //让new Vue同时监控data中变量的变化
})
Vue实例选项el
是View中需要监控部分的元素的选择器。选择找到那个元素,该元素下的内容就被new Vue()实时监控。
Vue实例选项data
包含所有页面所需的变量及其初始值。页面需要几个变量,data中就要定义几个属性变量。data中的变量名应该和HTML中的{{}}里的变量名保持一致。
结果:
(1). new Vue会自动将data中的初始值替换界面中所有{{变量}}的位置
(2). 只要data中的变量值发生变化,new Vue会自动将新的变量值,更新到页面中{{变量}}位置。
1.3 添加交互行为
还记得传统DOM 4步吗?
1). 查找触发事件的元素: Vue中不用程序找,用肉眼找到就行。
2). 绑定事件处理函数:
(1). 不用js绑定,而是手动在界面中的要点击的元素上添加:
<button @click="处理函数名">
(2). Vue事件处理函数定义在new Vue()中的选项methods中
new Vue({
... ...,
methods:{
处理函数名(){
想操作data中的变量,必须加this.变量
}
}
})
3). 查找要修改的元素:Vue中彻底不用自己找了
4). 修改元素: vue中都是通过修改data中的变量值,new Vue可自动更新界面中的元素内容。——数据绑定
1.4参考案例
参见《什么是Vue》章节中的第一个Vue案例
2.Vue实例API
Vue实例还有很多其他的属性选项,也有很多实例方法的,后面我么会陆续介绍大的,关于Vue实例的API详见官网 。
官网学习 Vue实例的API
3.Vue实例生命周期
每个 Vue 实例都是有一个从创建到销毁的生命周期。在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
官网学习 生命周期