Vue基础之数据绑定

我们学习一门新语言或者框架时,第一件事是什么呢,那必然是向世界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字段的变化

以上是本期全部内容,欲知后事如何,请听下回分解<( ̄︶ ̄)↗[GO!]

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据