乐趣区

初学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>

退出移动版