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

Thanatos 发布于2019-08-23 18:38 / 306人阅读

摘要：需要初始化处理一些数据时会比较有用，后面章节将有介绍。主要解绑一些使用监听的事件等。这些钩子与和类似，也是作为选项写入实例内，并且钩子的指向的是调用它的实例

你好，{{ name }}

el: el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以使HTMLElement，也可以是CSS选择器,挂载成功过后可以通过 $.el 来访问，vue还提供了很多类似的方法去访问（el也就是element的缩写，规定作用域）

Vue实例：var app = new Vue({ })

例1：


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

例2：


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

数据绑定<例一，例二>

当修改其中一方的数据时，另一方的数据也会随之修改此为数据绑定

生命周期

每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这个钩子，在合适的时机执行我们的业务逻辑。如果你使用过jQuery，一定知道它的ready() 方法，Vue的生命周期钩子与之类似，比较常用的有：

created： 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不能用。需要初始化处理一些数据时会比较有用，后面章节将有介绍。

mounted： el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始

beforeDestroy： 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

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


var app = new Vue({
    el: "#app",
    data: {
        a: 2
    },
    created: function() {
        console.log(this.a);    //2
    },
    mounted: function() {
        console.log(this.$el);  //
    },
})

GPU云服务器云服务器双向绑定双向数据绑定 js双向绑定 vue3 学习笔记 (五)——vue3

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

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

学习Vue.js的五个小例子

摘要：前言最近在学习，学着写了几个小例子，自己记录一下，例子都比较简单，希望给初学的小伙伴一些参考。后记文章可能比较简单，只是分享了几个小例子，没有对的用法进行详细说明，大家可以看官方文档。参考资料中文文档五个小案例带你学习火热的前言最近在学习vue.js，学着写了几个小例子，自己记录一下，例子都比较简单，希望给初学vue.js的小伙伴一些参考。双向数据绑定点击查看数据绑定是vue...

array_huang 2019-08-22 10:35 评论0 收藏0
初学Vue（四）-- 计算属性，监视方法

摘要：计算属性与监视方法计算属性计算属性，顾名思义是可以计算数据的属性，为什么要特意出个计算属性呢，因为如果直接将两个数据加起来的话，使用加法计负数的算双向绑定数据时就会出现问题计算属性用法代码案例加法计算器首先计算器我们想要用户输入所以计算属性与监视方法计算属性 -- computed 计算属性，顾名思义是可以计算数据的属性，为什么要特意出个计算属性呢，因为vue如果直接将两个数据加起...

kelvinlee 2019-08-26 14:00 评论0 收藏0
初学Vue(三) -- 前后端数据交互

摘要：而我们自定义的对应的是，对应的是，获得到的前端数据是用户输入双向绑定到了实例的内的，获取到的数据是用户输入双向绑定到的假设用户输入了是，是，那么判断条件的代码就是推荐学了node.js、vue.js入门或了解普通js与node传输数据的观看在vue实例中用vue的方式将数据传递到后台完整html代码完整js代码利用插件vue-resource 在vue中并没有方法让我们进...

Ethan815 2019-08-23 18:29 评论0 收藏0
跨域、vue双向绑定相关面试题

摘要：跨域双向绑定相关面试题题目一题目数据双向绑定的实现原理网址题目二题目懒加载原理网址题目三题目中和的区别网址题目四题目前端跨域究竟跨的是什么网址题目五题目倒计时器小跨域、vue双向绑定相关面试题题目一：题目：vue数据双向绑定的实现原理网址：http://bbs.daxiangclass.com/?... 题目二：题目：懒加载原理？网址：http://bbs.daxiangclass....

miracledan 2019-08-23 10:40 评论0 收藏0
初学Vue（一） -- Vue简单入门

摘要：可以进行计算从开始计数双向绑定数据和输出绑定事件书写区事件区域，所有事件控制写在这里有简写形式可以直接把替换为，。 vue - 国人开发制作的类似于 view 的发音 vue经过了几次大的版本波动 0.x 0.6版本 1.x 版本 2.x 版本 - 现在常用的为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦 react 因为版权原因，导致百度等企业...

Alliot 2019-08-23 18:05 评论0 收藏0