初识Vue——Hello World

首先我们新建一个工程，开发工具自行挑选，很多朋友习惯使用WebStorm，这当然都是可以的，因为本人开发安卓习惯了，所以直接选择了Android Studio的“亲妈”IntelliJ IDEA，然后把我们下载的vue.js的库文件直接复制到工程中（初学时建议这样使用，熟悉npm的那就另说了），然后我们在新建一个index.html文件，并且创建好一个基本的html结构，那么准备阶段就完成了。

2、操作DOM

我们先不采用Vue来看看如何实现Hello World呢？那就用原生的JS来写，如下代码所示，我在<body>标签中写一个<div>标签，我想在这个div标签中显示一个"Hello World"字符串，我们一般会直接操作DOM，也就是这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <div id="app"></div>
    <script>
        var dom = document.getElementById('app');
        dom.innerHTML = 'Hello World';
    </script>
</body>
</html>

来看一下结果，在Chrome浏览器中观察结果如下图：

3、使用Vue.js

首先在head标签中我们要引入Vue.js的库，这样我们才能够在代码中使用Vue；

接着我们来创建一个Vue的实例，这个实例呢接收两个参数，第一个参数el，它的值等于"#app"，第二个参数data，它指的是数据，我这里定义一个叫做content的数据，它的内容是"Hello Jarchie"，保存好了之后，我们把content通过两个大括号{{}}进行包裹，写在id等于app的这个dom元素之间，保存再到浏览器中观察结果，如下图所示：

代码如下：

<!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>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                content:'Hello Jarchie'
            }
        })
    </script>
</body>
</html>

简单的来做个说明，首先创建了一个Vue的实例，然后这个实例接收一些配置项，el这个配置项指的是实例负责管理的一个区域，这里值是“#app”，它指的就是这个id=app的div标签，所以这行代码的意思就是让我的这个Vue实例去接管id=app的这个dom标签里的所有内容。然后data是定义了一组数据，这里面有一个content的数据，它的内容是Hello Jarchie，然后在上面的id=app的div标签中通过插值表达式，即“{{}}”这种语法来调用data里面定义的数据，说到这里是不是都明白了呢？

三、小练习

我们再通过使用原生JS和Vue两种方式来做个小练习：隔2s钟更改content的内容，如何实现呢？先思考一下再往下看。。。。。。

1、操作DOM的方式，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="./vue.js"></script>
</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>

2、Vue的方式，代码如下：

<!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>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                content:'Hello Jarchie'
            }
        })
        setTimeout(function () {
            app.$data.content = 'Bye Jarchie'
        },2000)
    </script>
</body>
</html>

以上两种实现方式的效果都是相同的，页面上首先展示Hello xxx，2秒中之后内容会变成Bye xxx，内容很简单，我们需要一点一点的去学习。最好的学习资料就是官方文档，我们都一样，都是在路上，共勉！内容不多，消化消化可以休息了，bye!

乔布奇

发布了48 篇原创文章 · 获赞 47 · 访问量 9万+

私信关注