02_Vue 的基本代码

兮动人

发布于 2021-06-11 15:15:01

3420

发布于 2021-06-11 15:15:01

文章被收录于专栏：兮动人的博客

编写Vue采用vscode或hbuilder X都是不错的选择，我这里采用的是vscode，插件多功能也强大。
VSCode中代码在浏览器中打开及实时刷新需要安装livereload插件，步骤如下：

在VSCode中：Ctrl + Shift+ P，搜素livereload，并回车/点击“Live Server”。

或直接点击左边的扩展搜索Live Server即可查询到

这样使用vscode时写代码完成直接保存后浏览器也就能同步执行了，省去了不必要的浏览器刷新麻烦。

首先得导入vue.js，

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或直接在官网在下载vue.js引入即可，目前最新的vue版本已经到入3.0了。

新建一个存放Vue projects的文件夹，再创建一个lib（库）文件夹，用于存放vue.js.
vscode快速引入HTML模板，Ctrl+!+Tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1.导入Vue的包-->
    <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:   {
                msg:'欢迎学习Vue'   //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素。【前端的Vue之类的框架，不提倡去手动操作DOM元素了】
                
            }
        })
    </script>
</body>
</html>