接上一篇：（vue基础试炼_01）使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156
文章目录
- 一、原始js写法
- ① 效果图
- ② 2秒之后
- 二、使用vue实现
- ① 思考
- ② vue写法
- ③ 效果图
- 三、vue总结
一、原始js写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用原始js 实现隔2秒显示不同内容</title>
</head><body>
<div id="app"></div><script>var dom = document.getElementById('app');dom.innerHTML = 'hello world'setTimeout(function () {dom.innerHTML = 'hello world2'}, 2000)
</script>
</body>
</html>① 效果图
② 2秒之后
二、使用vue实现
① 思考
我们为您使用了VUE.js之后，就不需要关注任何dom的编码了
使用vue实现隔2秒改变content的内容，那又该怎样做呢？
我们不需要修改dom，只需要对数据进行变更即可，页面就会自动的跟着变化。
② vue写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用vue.js 隔2秒改变页面显示内容</title><!--引入vue.js库--><script src="vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="app">{{content}}</div><script>/*创建了一个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
