Vue教程0201-Vue 实例

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 实例都是有一个从创建到销毁的生命周期。在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

官网学习 生命周期