Vue.js

1.Vue.js基础入门

首先通过 new Vue() 来创建 Vue 实例

然后构造函数接收一个对象，对象中有一些属性：

       el ：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div

      data ：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

      name ：这里指定了一个 name 属性

页面中的 h2 元素中，通过 {{name}} 的方式，来渲染刚刚定义的 name 属性。

1.1双向绑定

在 data 添加了新的属性： num

在页面中有一个 input 元素，通过 v - model 与 num 进行绑定。

同时通过 {{num}} 在页面输出

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

1.2 事件处理

<div id="app">
    <input type="text" v-model="num"><button v-on:click="num++">点我</button>
    <h2>{{name}}</h2>非常帅！有{{num}}个妹妹
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app", <!--el即element，要渲染的页面元素-->
        data:{
            name:"bandian",
            num:1
        }
    })
</script>

这里用 v - on 指令绑定点击事件，而不是普通的 onclick ，然后直接操作 num

普通 onclick 是无法直接操作 num 的。

 

2.Vue实例

2.1创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

在构造函数中传入一个对象，并且在对象中声明各种 Vue 需要的数据和方法，包括：

• el
• data
• methods

2.2模板或元素

每个 Vue 实例都需要关联一段 Html 模板， Vue 会基于此模板进行视图渲染；可以通过 el 属性来指定。

例如一段 html 模板：

然后创建 Vue 实例，关联这个 div

这样， Vue 就可以基于 id 为 app 的 div 元素作为模板进行渲染了。在这个 div 范围以外的部分是无法使用 vue 特性的。

2.3数据

当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且 监视 data 中的属性变化，当 data发生改变，所有相关的视图都将重新渲染，这就是 “ 响应式 “ 系统。

html ：

js:

• name的变化会影响到 input 的值
• input中输入的值，也会导致vm中的name发生改变

2.4 方法

Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 的作用范围内使用。

html:

js:

2.5 生命周期钩子

2.5.1生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等。 Vue 为生命周期中的

每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

 

2.5.2钩子函数

例如： created 代表在 vue 实例创建后；

可以在 Vue 中定义一个 created 函数，代表这个时期的构造函数：

2.5.3.this

可以看下在 vue 内部的 this 变量是谁，在 created 的时候，打印 this

 

总结： this 就是当前的 Vue 实例，在 Vue 对象内部，必须使用 this 才能访问到 Vue 中定义的 data 内属性、方法等。