接上一篇：（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录
- 一、原始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实现TodoList
