初学Vue（五）-- 双向绑定

时间 2019-12-06

标签初学 vue 双向绑定繁體版

原文原文链接

<pre>
<body>vue

</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>app

el: el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可使HTMLElement，也能够是CSS选择器,挂载成功事后能够经过 $.el 来访问，vue还提供了不少相似的方法去访问（el也就是element的缩写，规定做用域）
Vue实例：var app = new Vue({ })

例1：
<pre>this

var app = new Vue({
    el: '#app',
    data: {
        a: 2
    }
})
console.log(app.a); //2

</pre>code

例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的生命周期钩子与之相似，比较经常使用的有：ip

created： 实例建立完成后调用，此阶段完成了数据的观测等，但还没有挂载，$el还不能用。须要初始化处理一些数据时会比较有用，后面章节将有介绍。
mounted： el挂载到实例上后调用，通常咱们的第一个业务逻辑会在这里开始
beforeDestroy： 实例销毁以前调用。主要解绑一些使用addEventListener监听的事件等。

** 这些钩子与el和data相似，也是做为选项写入Vue实例内，而且钩子的this指向的是调用它的Vue实例：element

<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>input