初学Vue.js--数据绑定与文本插值

(一)数据双向绑定

数据的双向绑定是Vue.js的核心功能在上一篇记录中已经简单创建了一个Vue实例如下

var myVue=new Vue({

                               el:'#myvue'//myvue是已经存在的div,其id值为myvue

                               })

使用选项el挂载成功后,我们可以通过myVue.$el来访问该元素,如果需要在此div内绑定数据,就要用到Vue实例的另外一个选项data,data选项可以声明应用内需要双向绑定的数据,建议所有会用到的数据都预先再data内声明这样不至于将数据散落在业务逻辑中,难以维护。

Vue实例本身也代理了data对象里所有的属性可以这样进行访问:

var myVue=new Vue({

                               el:'#myvue',

                               data:{ 

                                            num:3

                                 }

 })

console.log(myVue.num);//3

除了显式声明数据外,也可以纸箱一个已有的变量,并且他们之间默认建立了双向绑定,当修改其中任意一个是,另一个也会一起变化比如:

var myData={

              num:2

}

var myVue=new Vue({

                               el:'#myvue',

                               data:myData

 })

console.log(myVue.num)//2

myVue.num=1//修改属性原数据也会变

console.log(myData.num)//1

myData.num=3//修改原数据属性也会变

console.log(myVue.num)//3

(二)文本插值

(1)

使用双大括号{{}}是最基本的文本插值的方法,他会自动将我们双向绑定的数据实时显示出来,微信小程序也是通过此方法进行的数据绑定显示在前端页面上,下面为一个简单的文本插值

<div id='myvue'>

当前时间为{{ date }}                          

</div>

<script src='XXX'></script>                   //引用下载好的Vue.js此路径为文件的相对路径,此后所有引用相同

<script>

  var myVue=new Vue({

                     el:'#myvue',

                     data:{

                     date:new Date()

                      }

})

</script>

这样就可以在页面实现显示‘当前时间为+页面加载出来的时间’

(2)

此时我们让他每秒更新一下,思路就是用setInterval()定时器每隔1000毫秒进行一次new Date(),然后把new Date()的值赋给data属性里的date.就可以实时更新变换,但是这时候我们就要思考Vue.js的生命周期了,因为每个vue实例创建时都会经过一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这些钩子,在合适的时候执行我们的业务逻辑。就像jQuery中的ready()方法一样Vue的生命周期钩子与之类似,比较常用得有:

creatd(创建):实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不能用,需要初始化处理一些数据时会比较有用;

mounted(挂载):el挂载到实例上后调用,一般我们的第一个业务逻辑会从这里开始;

beforeDestroy(销毁之前):实例销毁之前调用,主要解绑一些使用addEventerListener 监听的事件等

这些钩子与el data类似是被作为选项写入Vue实例内的,并且这些钩子也就是方法内的this指的是调用这些方法的实例本身比如

<div id='myvue'></div>

<script src='XXX'></script>

<script>

  var myVue=new Vue({

                     el:'#myvue',

                     data:{

                        num:1

                      },

                    created:function(){

                        console.log(this.num)//1

                        console.log(this.$el)//undefined(由于此时还未挂载)

                    },

                   mounted:function(){

                         console.log(this.num)//1

                         console.log(this.$el)//<div id='myvue'></div>

                   }

})

</script>

最后了解到生命周期后我们就可以编辑我们的业务逻辑了,我们要把我们的处理的业务逻辑写在mounted里如下

修改为

<div id='myvue'>

当前时间为{{ date }} //注意要有空格呀

</div>

<script src='XXX'></script>

<script>

 var myVue=new Vue(){

    el:'#myvue',

    data:{

        date:new Date()

    },

   mounted:function(){

                 var _this=this;                                          //声明一个变量指向本实例

                 this.timer=setInterval(function(){             //这个this和_this代表的都是本实例

                        _this.date=new Date();                    //因为需要用到的对象是实例所以用_this,如果直接写this的指的是setInterval方法

                  },1000)

    },

beforeDestroy:function(){

     if(this.timer){

         clearInterval(this.timer);                              //在实例销毁前清除定时器

     }

}

}

</script>

这样我们完成了一个在页面上实时变化的时间

 

 

 

 

 

     

 

转载于:https://www.cnblogs.com/gulugulul/p/11201723.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/277165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网页色彩搭配的内涵

网页的色彩搭配往往是网友们感到头疼的问题&#xff0c;尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢&#xff1f;让我们来看看网友54雨寒的高见吧&#xff01; 一、红色的色感温暖&#xff0c;性格刚烈而外向&#xff0c;是一种对人刺激性很强的色。红色容易引…

VS历程简单记录

当时一开始装VS2015&#xff0c;是用了很长时间了。装了之后是可以用的&#xff0c;打了不少代码的。 后来很长一段时间没用它了&#xff0c;时隔良久&#xff0c;双击快捷方式竟然打开不了&#xff0c;让我“重装”。 其实也不用重装&#xff0c;本机用的Win10&#xff0c;去控…

计算机考研分数2019,2019考研分数线和国家线有什么关系

2019考研学校分数线和国家线有什么区别。国家线即全国硕士研究生考生进入复试基本分数要求&#xff0c;是基础分数线&#xff0c;要有资格参加复试必须过了这条线。国家线今天大概在3月中旬公布。学校分数线(简称学校线)是各招生单位在国家线的基础上&#xff0c;根据本校有关专…

记录一次react项目配置过程

1.为什么要配置react而不是脚手架 因为要知其然,最好还要知其所以然&#xff01; 2.配置对象 webpack webpack-dev-server babel eslint 3.配置过程 1.webpack 第一步:引入必须文件 const path require("path"); const webpack require("webpack");//为了…

智能文件名排序

默认排序问题 windows排序 Windows的资源管理中&#xff0c;提供了文件名的智能排序功能&#xff0c;可以识别出文件名中数字&#xff08;数字位数不相同&#xff09;&#xff0c;然后比较数字大小进行排序&#xff0c;如下图&#xff1a; 代码默认排序 但在C#中的列表排序中则…

VS2005 Web Application Project启用WSE(Ver 3.0)的方法

使用过WSE的朋友都知道&#xff0c;若要启用Server端Projects的WSE功能&#xff0c;需要选中如下所示的两个单选框:Enable this project for Web Services Enhancements和Enable Microsoft Web Services Enhancement Soap Protocol Factory.但是在WSE3.0中对于Web Application …

计算机英语课程背景,专家讲座第十五讲:信息化背景下高质量大学英语课程建设与教学设计...

11月27日下午&#xff0c;南京大学王海啸教授应邀到我院开展题为“信息化背景下高质量大学英语课程建设与教学设计”学术讲座。讲座由外国语言文学学院胡元江副院长和鲍贵教授共同主持&#xff0c;学院全体教师和研究生参加了本次学术活动。王海啸教授目前兼任教育部高等学校大…

ORA-28001: the password has expired

原创文章地址:https://blog.csdn.net/zdw_wym/article/details/38066745 Oracle提示错误消息 ORA-28001: the password has expired&#xff0c;是由于Oracle11G的新特性所致&#xff0c;Oracle11G创建用户时缺省密码过期限制是180天&#xff08;即6个月&#xff09;&#xff0…

使用c#操作IBM WebSphere MQ

IBM WebSphere MQ 5.3升级到CSD05之后&#xff0c;提供了使用.net操作MQ的类库&#xff0c;安装完成之后&#xff0c;会在MQ的安装目录的bin文件夹下面多出一个amqmdnet.dll文件&#xff0c;把这个DLL作为引用添加到你的.net工程中&#xff0c;你的.net程序中就可以操作IBM Web…

【SpringBoot】在IOC之外的类中使用IOC内部的Bean

某些时候&#xff0c;某些类是不归IOC管的&#xff0c;如我们的一些Util&#xff0c;如何使用IOC中的Bean&#xff1f; 1、写一个SpringUtil类&#xff0c;该类用于操纵Spring的ApplicationContext Component的注解是需要的&#xff0c;该Util是要被Spring管理的。 Component p…

计算机office二级app,计算机二级office

计算机二级office是一款为用户提供各种计算机二级知识的软件&#xff0c;用户可以在应用中快速的学习计算机二级office知识&#xff0c;顺利通过二级考试&#xff1b;应用拥有海量的精选计算机二级考试题库&#xff0c;不放过每一个考题&#xff0c;让用户全面的学习二级知识&a…

Obj-C 实现设计模式 -- Observer

观察者模式&#xff0c;采用气象站的例子来说明&#xff0c;本质上跟Java来实现差不多。只不过是针对协议&#xff08;Delegate&#xff09;来编程。 简单说下需求&#xff0c;气象显示版向气象站注册成功订阅者&#xff08;观察者&#xff09;&#xff0c;气象站监测到气温发生…

影响员工敬业度的三大因素

敬业的员工通常业绩比较突出&#xff0c;对企业做的贡献很大。经理人当然希望自己的员工个个都是敬业的员工&#xff0c;但实际上&#xff0c;在中国只有8%的员工具有敬业精神&#xff0c;相比全球的平均水平14%还有很大的差距。 是什么因素造成员工不敬业呢&#xff1f;根据世…

cf914D. Bash and a Tough Math Puzzle(线段树)

题意 题目链接 Sol 直接在线段树上二分 当左右儿子中的一个不是\(x\)的倍数就继续递归 由于最多递归到一个叶子节点&#xff0c;所以复杂度是对的 开始时在纠结如果一段区间全是\(x\)的两倍是不是需要特判&#xff0c;实际上是不需要的。 可以这么想&#xff0c;如果能成功的话…

计算机答辩答不上来怎么回答,答辩答不上来怎么办

论文答辩成为了不少同学的最后一次考试&#xff0c;从开题报告、论文定稿到格式排版大家一定都花费了大量的时间和精力&#xff0c;然而有时也会有一点小错误。所以&#xff0c;答辩前怎么准备&#xff0c;答辩的时候应该怎么灵活表现才能让自己最有可能通过答辩呢&#xff1f;…

urllib2.urlopen超时问题

urllib2.urlopen超时问题 没有设置timeout参数&#xff0c;结果在网络环境不好的情况下&#xff0c;时常出现read()方法没有任何反应的问题&#xff0c;程序卡死在read()方法里&#xff0c;搞了大半天&#xff0c;才找到问题&#xff0c;给urlopen加上timeout就ok了&#xff0c…

git 关联远程分支

问题解析&#xff1a; git本地新建一个分支后&#xff0c;必须要做远程分支关联。如果没有关联&#xff0c; git 会在下面的操作中提示你显示的添加关联。关联目的是如果在本地分支下操作&#xff1a; git pull, git push &#xff0c;不需要指定在命令行指定远程的分支&#x…

Sql Server 常用日期格式

http://www.cnblogs.com/waitu/archive/2006/01/16/318299.html 转载于:https://www.cnblogs.com/passrift/archive/2006/09/29/517939.html

del服务器能装win7系统吗,500系列主板能不能装win7?500系列主板装win7教程(支持11代)...

今年intel发布了第十一代酷睿cpu&#xff0c;当前有些网友还停留在win7时代&#xff0c;对win7是恋恋不忘&#xff0c;以前经常听到讨论是400系列主板安装win7的问题&#xff0c;到了2021年我们应该换一个话题&#xff0c;就是500系列主板能安装win7吗&#xff1f;小编在这里可…

代码可读性心理学

写在前面的话&#xff1a; 这周末我一个同学在群上说找到一篇挺有意思的文章&#xff08;就是下面要说的可读性代码的心理学&#xff09;&#xff0c;说要翻译出来&#xff0c;我就主动请缨了&#xff0c;跟他合作翻译这篇文章&#xff0c;在看这篇文章的同时&#xff0c;我突然…