2. Vue.js 基本代码

Devops海洋的渔夫

发布于 2020-02-24 13:05:32

6020

发布于 2020-02-24 13:05:32

文章被收录于专栏：Devops专栏 Devops专栏Devops专栏

前言

Vue框架是渐进式的框架，也就是说可以使用引用js库的方式来逐步替换已有的项目内容。也可以直接用cli直接模板部署。

当然，作为新手要去熟悉，最好还是以引入vue js库的方式逐步去编写熟悉。

下载Vue.js库

访问vue中文官网。

这里有两个版本可以下载，当然在学习的过程要下载开发版本，而生产环境则需要使用生产版本了。

创建一个项目，并创建一个lib文件夹，用于存放下载的vue.js库。如下：

那么下一步，先不用vuejs来直接编写helloworld，而是用常规的js来编写。

使用常规的js来编写helloworld

<!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";
    </script>
</body>
</html>

浏览器显示如下：

可以看到原生的js如果要填充数据，那么就必须操作dom元素。下面来看看vue如何将hello world的数据渲染到浏览器中。

编写vue的基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>

    <script>
        // 2. 创建一个Vue的实例
        // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
        //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
        var vm = new Vue({
            el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
            // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
            data: { // data 属性中，存放的是 el 中要用到的数据
                msg: 'Hello world,Vue!' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
            }
        })
    </script>

</body>
</html>

浏览器显示如下：