接上一篇：（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

（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容相关推荐

（vue基础试炼_08）Vue模板语法
文章目录一.插值表达式二.v-text 中不是字符串而是js表达式三.v-html 四.js表达式,可以和字符串拼接五.源码链接一.插值表达式 <!DOCTYPE html> & ...
（vue基础试炼_07）Vue实例生命周期函数
文章目录一.生命周期图示二.常见的生命周期函数三.生命周期函数执行场景四.测试代码五.项目开源地址一.生命周期图示二.常见的生命周期函数常见的生命周期函数执行的时间 beforeCr ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
Vue基础篇六：Vue使用JSX进行动态渲染
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
html隔几秒显示当前时间,用js实现每隔一秒刷新时间的实例(含年月日时分秒)
原理:使用定时器,即setInterval(fn,i),每隔i秒执行fn. 下面给出具体的代码 1.代码如下: 用js实现每隔一秒刷新时间(含年月日时分秒) #time{background:#33F ...
vue 基础 —— html版的 Vue 入门基础
文章目录 1.Vue两大特性 2.vue指令 2.1.内容渲染指令 (1)`v-text` (2)`{{ }}` :插值表达式 (3)`v-html` 2.2.属性绑定指令使用 Javascript ...

（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容

文章目录

一、原始js写法

① 效果图

② 2秒之后

二、使用vue实现

① 思考

② vue写法

③ 效果图

三、vue总结

（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容相关推荐

最新文章

热门文章