1.VUE方法实现Hello World及隔2秒钟更改content中的内容

最新推荐文章于 2023-09-27 19:17:55 发布

前端杨小白

最新推荐文章于 2023-09-27 19:17:55 发布

阅读量554

点赞数

分类专栏： VUE学习笔记

本文链接：https://blog.csdn.net/yangwqi/article/details/107314358

版权

VUE学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue 官网： https://cn.vuejs.org/

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。

原生方法实现Hello World：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
</head>
<body>
<div id="app"></div>
<script>
    var dom=document.getElementById("app");//获取dom标签
    dom.innerHTML="hello world";
</script>
</body>
</html>

VUE方法实现Hello World：

new Vue：通过new Vue创建vue的实例实例接收一些配置项；
el:'#app'：el配置项 Vue实例负责管理的区域【id=#app的div标签 el限制了Vue实例处理dom的范围】让该Vue实例接管所有id=app的dom标签中的所有的内容
data：定义一组数据【Vue实例中的具体数据】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
    <!--引入vue的库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--{{content}}差值表达式：调用data中的数据 显示内容为hello world1-->
<div id="app">{{content}}</div>
<!--vue实例只接管了id='app'的标签 所以该标签原封不动输出 显示内容为{{content}}-->
<div>{{content}}</div>
<script>
var app=new Vue({
    el:'#app',
    data:{
        'content':'hello world1',
    }
})
</script>
</body>
</html>

原生方法实现：隔2秒钟更改content中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
</head>
<body>
<div id="app"></div>
<script>
var dom=document.getElementById("app");
dom.innerHTML="hello world"
setTimeout(function(){//延时器
    dom.innerHTML='bye world';
},2000)
</script>
</body>
</html>

VUE方法实现：隔2秒钟更改content中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<div>{{content}}</div>
<script>
var app=new Vue({
    el:'#app',
    data:{
        'content':'hello world1',
    }
})
setTimeout(function(){
    app.$data.content='bye world1';//app:Vue的实例;$data为data的别名【理解为是data：{}后面的对象】;
},2000)
</script>
</body>
</html>

总结：书写vue.js时不需要关注dom的操作而是将精力放在数据的管理上数据放什么内容页面就展示什么内容数据改变页面就跟着改变

前端杨小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1.VUE方法实现Hello World及隔2秒钟更改content中的内容

原生方法实现：Nuxt:快速实现Vue的服务器端渲染 WEEX:使用VUE语法编写原生APP 官网 https://cn.vuejs.org/ Vue不支持IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。使用Vue.js实现Hello World...
复制链接

扫一扫