Vue基础之数据绑定

Rindia 发布于2019-08-30 15:55 / 2490人阅读

摘要：创建一个应用话不多说，先上代码，让我们感受一下的核心功能模板的输出方式是实例的挂在对象字面量当修改输入框内容时，标签内容也做相应改变，虽然代码很简单，还是能体会到双向绑定的精髓。

我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。

创建一个Vue应用

话不多说，先上代码，让我们感受一下Vue的核心功能




    
    
    
    Document


    
        
        {{message}} // {{message}}模板的输出方式

当修改输入框内容时，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 () {
    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!]

服务器托管云服务器 django vue 数据绑定 vue绑定之基础篇 vue基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117278.html

Vue基础之数据绑定

摘要：创建一个应用话不多说，先上代码，让我们感受一下的核心功能模板的输出方式是实例的挂在对象字面量当修改输入框内容时，标签内容也做相应改变，虽然代码很简单，还是能体会到双向绑定的精髓。我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。创建一个Vue应用话不多说，先上代码，让我们感受一下Vue的核心功能 Docu...

Fourierr 2019-08-23 14:51 评论0 收藏0
Vue基础之数据绑定

摘要：创建一个应用话不多说，先上代码，让我们感受一下的核心功能模板的输出方式是实例的挂在对象字面量当修改输入框内容时，标签内容也做相应改变，虽然代码很简单，还是能体会到双向绑定的精髓。我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。创建一个Vue应用话不多说，先上代码，让我们感受一下Vue的核心功能 Docu...

pingan8787 2019-08-02 14:09 评论0 收藏0
Vue基础之数据绑定

摘要：创建一个应用话不多说，先上代码，让我们感受一下的核心功能模板的输出方式是实例的挂在对象字面量当修改输入框内容时，标签内容也做相应改变，虽然代码很简单，还是能体会到双向绑定的精髓。我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。创建一个Vue应用话不多说，先上代码，让我们感受一下Vue的核心功能 Docu...

shiguibiao 2019-08-05 16:04 评论0 收藏0
Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

maybe_009 2019-08-30 15:55 评论0 收藏0
Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

2bdenny 2019-08-02 14:11 评论0 收藏0