专题文档dede企业网站建设,网站制作论文5000字,软件商城免费下载 app,免费的行情软件(一)数据双向绑定 数据的双向绑定是Vue.js的核心功能在上一篇记录中已经简单创建了一个Vue实例如下 var myVuenew Vue({ el:#myvue//myvue是已经存在的div#xff0c;其id值为myvue }) 使用选项el挂载成功后#xff0c;我们可以通过myVue.$el来访问该元素#xff0c;如果需要…(一)数据双向绑定 数据的双向绑定是Vue.js的核心功能在上一篇记录中已经简单创建了一个Vue实例如下 var myVuenew Vue({ el:#myvue//myvue是已经存在的div其id值为myvue }) 使用选项el挂载成功后我们可以通过myVue.$el来访问该元素如果需要在此div内绑定数据就要用到Vue实例的另外一个选项datadata选项可以声明应用内需要双向绑定的数据建议所有会用到的数据都预先再data内声明这样不至于将数据散落在业务逻辑中难以维护。 Vue实例本身也代理了data对象里所有的属性可以这样进行访问 var myVuenew Vue({ el:#myvue, data:{ num:3 } }) console.log(myVue.num);//3 除了显式声明数据外也可以纸箱一个已有的变量并且他们之间默认建立了双向绑定当修改其中任意一个是另一个也会一起变化比如 var myData{ num2 } var myVuenew Vue({ el:#myvue, data:myData }) console.log(myVue.num)//2 myVue.num1//修改属性原数据也会变 console.log(myData.num)//1 myData.num3//修改原数据属性也会变 console.log(myVue.num)//3 (二)文本插值 (1) 使用双大括号{{}}是最基本的文本插值的方法他会自动将我们双向绑定的数据实时显示出来微信小程序也是通过此方法进行的数据绑定显示在前端页面上下面为一个简单的文本插值 div idmyvue 当前时间为{{ date }} /div script srcXXX/script //引用下载好的Vue.js此路径为文件的相对路径此后所有引用相同 script var myVuenew 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 idmyvue/div script srcXXX/script script var myVuenew 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 idmyvue/div } }) /script 最后了解到生命周期后我们就可以编辑我们的业务逻辑了我们要把我们的处理的业务逻辑写在mounted里如下 修改为 div idmyvue 当前时间为{{ date }} //注意要有空格呀 /div script srcXXX/script script var myVuenew Vue(){ el:#myvue, data:{ date:new Date() }, mounted:function(){ var _thisthis; //声明一个变量指向本实例 this.timersetInterval(function(){ //这个this和_this代表的都是本实例 _this.datenew Date(); //因为需要用到的对象是实例所以用_this如果直接写this的指的是setInterval方法 },1000) }, beforeDestroy:function(){ if(this.timer){ clearInterval(this.timer); //在实例销毁前清除定时器 } } } /script 这样我们完成了一个在页面上实时变化的时间 转载于:https://www.cnblogs.com/gulugulul/p/11201723.html
