国外ps素材网站,空壳网站主体注销,铜陵seo公司,关于申请网站建设的报告接上一篇#xff1a;#xff08;vue基础试炼_01#xff09;使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录一、原始js写法① 效果图② 2秒之后二、使用vue实现① 思考② vue写法③ 效果图三、vue总结一、原始js写法
!… 接上一篇vue基础试炼_01使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录一、原始js写法① 效果图② 2秒之后二、使用vue实现① 思考② vue写法③ 效果图三、vue总结一、原始js写法
!DOCTYPE html
html langen
headmeta charsetUTF-8title使用原始js 实现隔2秒显示不同内容/title
/headbody
div idapp/divscriptvar dom document.getElementById(app);dom.innerHTML hello worldsetTimeout(function () {dom.innerHTML hello world2}, 2000)
/script
/body
/html
① 效果图 ② 2秒之后 二、使用vue实现
① 思考
我们为您使用了VUE.js之后就不需要关注任何dom的编码了 使用vue实现隔2秒改变content的内容那又该怎样做呢 我们不需要修改dom只需要对数据进行变更即可页面就会自动的跟着变化。
② vue写法
!DOCTYPE html
html langen
headmeta charsetUTF-8title使用vue.js 隔2秒改变页面显示内容/title!--引入vue.js库--script srcvue.js/script
/headbody
!--vue接管的div--
div idapp{{content}}/divscript/*创建了一个vue实例*/var app new Vue({el: #app,data: {content: hello world}});setTimeout(function () {app.$data.content bye world}, 2000)
/script
/body
/html
③ 效果图 2秒之后
三、vue总结
通过这个例子我们应该知道当我们书写vue代码的时候不需要关注dom的操作而是集中精力关注数据的管理之上即可数据放的是什么页面就是展示什么。数据发生改变了数据也会跟着改变。 下一篇vue基础试炼_03使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233
