Vue基础【一】

千梦、流羽

已于 2022-08-07 14:57:33 修改

阅读量87

点赞数

分类专栏： Vue 文章标签： vue.js 前端

于 2022-08-01 20:41:13 首次发布

本文链接：https://blog.csdn.net/qq_51133939/article/details/126099509

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue基础

1. 第一个Vue程序

步骤：

导入开发版本的 Vue；

引入Vue有两种版本：
一.开发环境版本
二.生产环境版本


<script src=“https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js”>


<script src=“https://cdn.jsdelivr.net/npm/vue@2”>
创建 Vue 实例对象，设置 el 属性和 data 属性；
使用简洁的模板语法把数据渲染到页面上。

避坑：

如果在 vscode 上的 html 文件中使用 ! 没有代码提示，可以尝试使用 html:5；
如果在 vscode 上没有 Vue 代码提示，可以尝试下载插件：Vue 3 Snippets；
如果浏览器中显示 {{message}} 而没有显示 data 中的内容，一定要将 script 标签放到 {{message}} 下，这与渲染顺序有关。

演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello vue!"
            }
        })
    </script>
</body>

</html>

效果：
效果演示

2. el:挂载点

解释：el 是用来设置 Vue 实例挂载(管理)的元素。

Vue 实例的作用范围是什么？

Vue 会管理 el 选项命中的元素及其内部的后代元素；
是否可以使用其他的选择器？

可以使用其他选择器，但是建议使用 id 选择器，因为类选择器、标签选择器都是批量选择，容易造成代码不清晰；
是否可以设置其他的 DOM 元素呢？

可以使用其他的 DOM 元素，但是不能使用 body标签 和 html 标签，即 el 无法选择 body 标签和 html 标签。
注意：
1. 一个页面只能存在一个 Vue 实例，不能创建多个 Vue 实例；
2. 使用 {{ }} 进行 data 中数据获取时，可以在 {{ }} 取值语法中进行算术运算、逻辑运算以及调用相关类型的相关方法。
3. vue 实例中 el 属性可以使用任何 css 选择器，但是推荐使用 id 选择器，因为一个 Vue 实例只能作用于一个具体的作用范围。
4. 建议 vue 中的 <script> 标签写在 html 页面的最后，因为 html 页面是从上往下渲染的，可以保证选择器获取到数据。

测试：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body class="test">
    {{message}}
    <div id="app">
        {{message}}
    </div>

    <div class="class">
        {{message}}
    </div>

    <script>
        var app = new Vue({
            // el: "#app",
			// el: ".class",
            el: ".test",
            data: {
                message: "选择器"
            }
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述
可以看出 el 是无法选择 body 的。

3. data:数据对象

Vue 中用到的数据定义在 data 中；
data 中可以写复杂类型的数据；
渲染复杂类型时，遵守 js 语法即可，如 对象的 “.” 语法，数组的索引语法等。

测试：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
        <h2>
            学校信息：{{school}}
        </h2>
        <h3>
            学校名称：{{school.name}}<br />
            学校电话：{{school.mobile}}
        </h3>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
            <li>{{campus[3]}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello",
                school: {
                    name: "xx大学",
                    mobile: "xxx-xxx-xxxx"
                },
                campus: ["北京校区", "上海校区", "广州校区", "深圳校区"]
            }
        })
    </script>
</body>

</html>