Vue学习：Hello World

最新推荐文章于 2024-01-20 20:41:59 发布

Licheng Xu

最新推荐文章于 2024-01-20 20:41:59 发布

阅读量186

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43912883/article/details/102822061

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue学习：Hello World

一、安装

在这里插入图片描述

vue.js就为vue的库文件，这时候再创建一个index.html，使用visual studio code打开

二、Hello World

2.1 原生js让div显示hello world

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <div id="app">

        </div>
    </body>
    <script>
        var dom = document.getElementById('app');
        dom.innerHTML = 'hello world'
    </script>
</html>

在这里插入图片描述

2.2 vue.js让div显示hello world

解释：引入vue库文件之后，创建vue的实例，然后进行配置，el代表这个实例对象所管理的区域，data代表定义数据，数据有个content的数据，div中通过插值表达式来引用数据内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{content}}
        </div>
    </body>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                content:'hello world by vue'
            }
        })
    </script>
</html>

在这里插入图片描述

三、修改内容

3.1 原生js操作DOM

setTimeout(function(){
    dom.innerHTML = 'change'
},2000)

3.2 vue.js实现

不需要操作DOM，实现操作Data即可，下列代码中，app代表vue的实例，$data是data的别名，类型于linux，data里面的content内容修改为change，这样就可以把精力花在数据的管理之上

setTimeout(function(){
    app.$data.content = 'change'
},2000)

Licheng Xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习：Hello World

Vue学习：Hello World 一、安装vue.js就为vue的库文件，这时候再创建一个index.html，使用visual studio code打开二、Hello World2.1 原生js让div显示hello world<!DOCTYPE html><html lang="en"> <head> &lt...
复制链接

扫一扫

专栏目录