初学Vue（五）-- 双向绑定
<pre>
<body>
</div id="app">
<input type="text" v-model="name" placeholder="你的名字">
</h1>你好，{{ name }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
</script></body>
</pre>
- el: el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以使HTMLElement，也可以是CSS选择器,挂载成功过后可以通过 $.el 来访问，vue还提供了很多类似的方法去访问（el也就是element的缩写，规定作用域）
- Vue实例：var app = new Vue({ })
例1：
<pre>
var app = new Vue({
el: '#app',
data: {
a: 2
}
})
console.log(app.a); //2</pre>
例2：
<pre>
var maData = {
a: 1
}
var app = new Vue({
el: 'app',
data: myData, //在这条语句中进行数据绑定，当其中一方改变数据内容时，另一方也会改变
})
console.log(myData.a); //1
//修改属性，原数据也会随之修改
app.a = 2;
console.log(myData.a); //2
//反之，修改原数据，Vue属性也会修改
myData.a = 3;
console.log(app.a); //3</pre>
- 数据绑定<例一，例二>
- 当修改其中一方的数据时，另一方的数据也会随之修改此为数据绑定
生命周期
每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这个钩子，在合适的时机执行我们的业务逻辑。如果你使用过jQuery，一定知道它的ready() 方法，Vue的生命周期钩子与之类似，比较常用的有：
- created： 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不能用。需要初始化处理一些数据时会比较有用，后面章节将有介绍。
- mounted： el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
- beforeDestroy： 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
** 这些钩子与el和data类似，也是作为选项写入Vue实例内，并且钩子的this指向的是调用它的Vue实例：
<pre>
var app = new Vue({
el: '#app',
data: {
a: 2
},
created: function() {
console.log(this.a); //2
},
mounted: function() {
console.log(this.$el); //<div id="app"></div>
},
})</pre>
相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21