Vue基础之数据绑定

5次阅读

共计 3078 个字符，预计需要花费 8 分钟才能阅读完成。

我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界 say Hello。
创建一个 Vue 应用
话不多说，先上代码，让我们感受一下 Vue 的核心功能
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<div id=”app”>
<input type=”text” v-model=”message”>
<h1>{{message}}</h1> // {{message}} 模板的输出方式
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
message: “Hello world” // 字面量
}
})
</script>
</body>
</html>
当修改输入框内容时，h1 标签内容也做相应改变，虽然代码很简单，还是能体会到双向绑定的精髓。
双向绑定（面试考点）

通过构造函数创建一个 Vue 实例 new Vue()，此时 app 就相当于 new Vue；

传入 el，el 是 Vue 对象中必不可少的，需要把 el 挂载到页面已存在的 DOM（可以是 DOM 元素，或者是 CSS 选择器）上；
var app = new Vue({
el: ‘#app’, // 或者 document.getElementById(‘app’)
})

在 input 标签上有一个 v -model 指令，它的值和 Vue 实例中 data 里的 message 对应，input 可以修改 message 的值，同时当 message 改变时也可以体现在视图上；

生命周期（开发时必了解）
每个 Vue 实例在被创建之前都要经过一系列的初始化过程, 这个过程就 Vue 的生命周期。下面是 Vue 的几个钩子函数：
beforeCreate: function () {
console.group(‘beforeCreate 创建前状态 ===============》’);
console.log(“%c%s”, “color:red” , “el : ” + this.$el); //undefined
console.log(“%c%s”, “color:red”,”data : ” + this.$data); //undefined
console.log(“%c%s”, “color:red”,”message: ” + this.message)
},
created: function () {
console.group(‘created 创建完毕状态 ===============》’);
console.log(“%c%s”, “color:red”,”el : ” + this.$el); //undefined
console.log(“%c%s”, “color:red”,”data : ” + this.$data); // 已被初始化
console.log(“%c%s”, “color:red”,”message: ” + this.message); // 已被初始化
},
beforeMount: function () {
console.group(‘beforeMount 挂载前状态 ===============》’);
console.log(“%c%s”, “color:red”,”el : ” + (this.$el)); // 已被初始化
console.log(this.$el);
console.log(“%c%s”, “color:red”,”data : ” + this.$data); // 已被初始化
console.log(“%c%s”, “color:red”,”message: ” + this.message); // 已被初始化
},
mounted: function () {
Vue.this = app // 在浏览器里调试
console.group(‘mounted 挂载结束状态 ===============》’);
console.log(“%c%s”, “color:red”,”el : ” + this.$el); // 已被初始化
console.log(this.$el);
console.log(“%c%s”, “color:red”,”data : ” + this.$data); // 已被初始化
console.log(“%c%s”, “color:red”,”message: ” + this.message); // 已被初始化
},
beforeUpdate: function () {
console.group(‘beforeUpdate 更新前状态 ===============》’);
console.log(“%c%s”, “color:red”,”el : ” + this.$el);
console.log(this.$el);
console.log(“%c%s”, “color:red”,”data : ” + this.$data);
console.log(“%c%s”, “color:red”,”message: ” + this.message);
},
updated: function () {
console.group(‘updated 更新完成状态 ===============》’);
console.log(“%c%s”, “color:red”,”el : ” + this.$el);
console.log(this.$el);
console.log(“%c%s”, “color:red”,”data : ” + this.$data);
console.log(“%c%s”, “color:red”,”message: ” + this.message);
},
beforeDestroy: function () {
console.group(‘beforeDestroy 销毁前状态 ===============》’);
console.log(“%c%s”, “color:red”,”el : ” + this.$el);
console.log(this.$el);
console.log(“%c%s”, “color:red”,”data : ” + this.$data);
console.log(“%c%s”, “color:red”,”message: ” + this.message);
},
destroyed: function () {
console.group(‘destroyed 销毁完成状态 ===============》’);
console.log(“%c%s”, “color:red”,”el : ” + this.$el);
console.log(this.$el);
console.log(“%c%s”, “color:red”,”data : ” + this.$data);
console.log(“%c%s”, “color:red”,”message: ” + this.message)
}
下图是 Vue 生命周期过程中 el、data 以及 data 里面的 message 字段的变化