第一章vue核心-01初识vue

Part1Vue学习的环境初始化

1.下载Vue.js以及Vue.min.js文件

2.在浏览器上安装Vue Devtools插件（便于在浏览器上调试Vue）

3.在编译器中使用Vue的全局属性中的productionTip取消生产模式

  Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示。

Part2创建Vue实例

前提：在VsCode中安装插件Live Server，便于调试html
创建Vue实例的五个步骤
- 第一步，引入Vue.js文件
- 第二步，创建一个容器
- 第三步，创建Vue实例
- 第四步，在Vue实例中关联到指定容器，并准备好数据
- 第五步，在容器中，使用插值语法，将Vue实例中的数据注入到容器中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 创建一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示。

        //创建Vue实例
        const v = new Vue({
            el: "#root", //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: {  //data中用于存储数据，数据共el指定的容器去使用，值我们暂时先写成一个对象
                name: "Vue"
            }
        })
    </script>
</body>
</html>

Part3小结

①一个Vue实例对应一个容器

②插值语法中要使用JavaScript表达式而不是JavaScript代码（语句）。表达式可以产生一个值，而语句只是控制代码的流程走向。

本文档编写参考张天禹的vue2+vue3全家桶

分类：

后端

标签：

后端

作者介绍