Vue简介及HelloWord编写_vue helloword

作者：繁依Fanyi0 | 2024-06-13 05:21:59

踩

vue helloword

简介

Vue是一套用于构建用户界面的渐进式JavaScript框架，何为渐进式，主要是自底向上逐层应用，并且简单应用可以使用核心库便可完成，如果需要复杂地应用，需要引入一些Vue插件库，这就达到渐进式。

官网：

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

特点：

采用组件化模式，用以提高开发效率，代码复用率，并且能让代码更好地维护。
声明式编码，让开发人员无需直接操纵DOM，只需按一定的规则（标签等语法）声明告诉Vue如何操纵，剩下的就由Vue的底层代码进行处理，提高开发效率。
使用虚拟Dom+优秀Diff算法，尽量复用Dom。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue开发环境

由于初学者就不适用工程化创建，只需引用一个vue的核心库，就能达到使用Vue的程度。
Vue核心库：
https://cn.vuejs.org/v2/guide/installation.html
有两个版本，开发版和生产版：
在这里插入图片描述
在开发环境下不要使用生产版本，不然就失去了所有常见错误相关的警告!

把相关库下载到本地，或者引用互联网的链接也行。
在这里插入图片描述
vue.min.js是生产版本，vue.js是开发版本。
默认已经知道Visual Code的基本使用。
把这两个文件拷贝到工程文件夹中。

创建一个html文件，引用vue.js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 的 HelloWord</title>
    <!-- 引入vue依赖 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!--
        Vue新手五步式：
        1. 引入vue.js库。
        2. 编写一个给vue管理的容器，并设立一个Id。
        3. 创建一个Vue对象，并在构造函数的参数上传入一个配置对象。
        4. 容器里面的代码依然符合Html规范，比如h1标签会变大变粗，只不过混入了一些特殊的Vue语法。
        5. 容器里面的代码被称为模板代码，只要我们按照Vue的规则语法完成模板，vue就会解析模板，生成我们想要的页面。
    -->

    <!-- 创建一个容器 -->
    <div id="root">
        <!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->
        你好，{{accountName}}
    </div>
    
    <script>
    //关闭开发环境提示
        Vue.config.productionTip = false;
         //创建一个vue对象
        new Vue({
            el:"#root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。
            //el: document.getElementById("root"),     管理容器使用js原生代码
            data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。
                accountName:"Yehaocong"
            }
        })
    </script>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果：
在这里插入图片描述
控制台会有点提示：

要想消除第一个提示，就要安装谷歌浏览器的Vue开发者工具，需要翻墙，我这里就准备了一个百度云地址。
https://pan.baidu.com/s/1jDrakkYZAy_FUm-6ThhyPQ 提取码 6666

开发者工具下载下来后，在谷歌上面配置，

打开插件管理：

缩小窗口，但是不要最小化，然后拖动开发者工具文件进去即可。

然后提示就没了：

第二个提示是修改Vue的配置。
在这里插入图片描述

一个注意点：
Vue实例跟容器是一一对应的，也就是一个Vue实例只管理一个容器，一个容器只能被一个Vue实例管理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 的 HelloWord</title>
    <!-- 引入vue依赖 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    
    <!-- 创建一个容器 -->
    <div class="root">
        <!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->
        你好，{{accountName}}
    </div>
    <div class="root">
        <!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->
        你好，{{accountName}}
    </div>

    <div id="root">
        <!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->
        你好，{{accountName}}
        我是，{{myName}}
    </div>


    
    
    <script>
        //关闭开发环境提示
        Vue.config.productionTip = false;
         //创建一个vue对象，//这里是1个Vue实例对应2个容器，class是root，测试vue实例与容器能否1对多
        new Vue({
            el:".root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。
            //el: document.getElementById("root"),  S   管理容器使用js原生代码
            data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。
                accountName:"Yehaocong"
            }
        })

        //这里是两个Vue实例对应一个容器，id是root，测试vue实例与容器能否多对一
        new Vue({
            el:"#root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。
            //el: document.getElementById("root"),  S   管理容器使用js原生代码
            data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。
                accountName:"Yehaocong"
            }
        })

        new Vue({
            el:"#root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。
            //el: document.getElementById("root"),  S   管理容器使用js原生代码
            data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。
                myName:"LiaoXiaoyan"
            }
        })
    </script>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

效果：可以看到第二个是没有渲染成功的，原因是Vue找到第一个符合的容器后就不再继续往下找了，并且控制台还报错了，因为一个容器只会被一个vue实例管理，所以虽然第二个vue实例定义了myName数据，但是没有管理到容器，所以报错
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/711044