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

Vue.js开发来源：网络编辑：小编更新时间：2024-11-30 12:45:06 浏览量：27

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的操作而是将精力放在数据的管理上数据放什么内容页面就展示什么内容数据改变页面就跟着改变

到此这篇1.VUE方法实现Hello World及隔2秒钟更改content中的内容的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： 2.VUE标签指令

下一篇： VUE实现吸附侧边栏效果

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11189.html

相关文章：