Vue全家桶之Vue基础指令

Posted 2021-10-02 生命是有光的

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue全家桶之Vue基础指令相关的知识，希望对你有一定的参考价值。

✍、目录总览

🔥Vue🔥

🔥Vue全家桶	地址
🔥Vue全家桶之Vue基础指令(一)	https://blog.csdn.net/Augenstern_QXL/article/details/120117044
🔥Vue全家桶之Vue组件化开发(二)	https://blog.csdn.net/Augenstern_QXL/article/details/120117322
🔥Vue全家桶之VueCLI 脚手架V2→V4版本(三)	https://blog.csdn.net/Augenstern_QXL/article/details/120117453

配套视频讲解: CoderWhy老师的Vuejs讲解

1、Vue简介

1.1、什么是Vue

官方给出的概念： Vue 是一套用于构建用户界面的前端框架

1.2、Vue的特性

vue框架的特性，主要体现在如下两方面：

数据驱动视图
双向数据绑定

1.2.1、数据驱动视图

在使用了 vue 的页面中， vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定。

1.2.2、双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源
中。示意图如下：

好处：开发者不再需要手动操作DOM 元素，来获取表单元素最新的值！

1.3、MVVM

MVVM是 vue 实现数据驱动视图和双向数据绑定的核心原理。
MVVM 指的是 Model 、View 和 ViewiewModelodel，它把每个 html 页面都拆分成了这三个部分，如图所示：

View 层：

视图层
在我们前端开发中，通常就是DOM层
主要的作用是给用户展示各种信息

Model层：

数据层
数据可能是我们固定的死数据，更多的是来自于我们服务器，从网络上请求下来的数据。

VueMode层：

视图模型层
视图模型层是 View 和 Model 沟通的桥梁
一方面它实现了数据绑定，将 Model 的改变实时的反应到 View 中
另一方面它实现了 DOM监听，当DOM 发生一些事件(点击、滚动等)时，可以监听到，并在现需要的情况下改变对应的 Data

1.4、MVVM工作原理

ViewModel作为 MVVM 的核心，是它把当前页面的数据源（ModelModel）和页面的结构（View ）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到， VM 会根据最新的数源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到， VM 会把变化过后最新的值自动同步到 Model 数

1.5、Vue的版本

当前， vue 共有 3 个大版本，其中：

2.x版本的 vue 是目前企业级项目开发中的主流版本
3.x版本的 vue 于 2020 -09 -19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x版本的 vue 几乎被淘汰，不再建议学习与使用

总结：

3.x版本的 vue 是未来企业级项目开发的趋势；
2.x版本的 vue 在未来（ 1 ~ 2 年内）会被逐渐淘汰；

2、Vue.js安装

安装Vue的方式有很多，主要有三种：

2.1、方式一：直接CDN引入

方式一：直接CDN引入

你可以选择引入开发环境版本还是生产环境版本

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

2.2、方式二：下载和引入

开发环境下载：https://vuejs.org/js/vue.js
生产环境下载：https://vuejs.org/js/vue.min.js
下载完成后使用 script 标签的外部引用即可

2.3、方式三：NPM安装

# 最新稳定版
$ npm install vue

后续通过 webpack 和 CLI 的使用时我们使用该方式。

3、Vue的基本使用

导入 vue.js 的script 的脚本文件
在页面中声明一个将要被 vue 所控制的 DOM 区域
创建 vue 实例对象

3.1、Hello Vue

<!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>
</head>

<body>
    <!-- 2.在页面中声明一个将要被 vue 所控制的DOM区域 -->
    <div id="app">
        <h2>{{message}}</h2>
    </div>
    <!--  1.导入 vue.js 的script脚本文件  -->
    <script src="../js/vue.js"></script>
    <script>
        // 3.创建 vue 实例对象
        const app = new Vue({
            // 3.1 指定当前 vue 实例将要控制页面的哪个区域
            el: '#app',
            // 3.2 指定 Model 数据源
            data: {
                message: 'HelloVue！',
            }
        })
    </script>
</body>

</html>

我们来阅读 javascript 代码，会发现创建了一个 Vue 对象。

创建Vue对象的时候，传入了一些 options : {}
- {}中包含了 el 属性：该属性决定了这个 Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了 id 为 app 的元素上。
{} 中包含了 data 属性：该属性中通常会存储一些数据
- 这些数据可以是我们直接定义出来的，比如像上面的 HelloVue!
- 也可能是来自网络，从服务器加载的
浏览器执行代码的流程：
- 执行到 12~15行代码显示出对应的 HTML
- 执行第20行代码创建 Vue 实例，并且对原HTML进行解析和修改
并且，目前我们的代码是可以做到响应式的。

3.2、基本代码与MVVM的关系

3.3、Vue列表显示

现在，我们来展示一个更加复杂的数据：数据列表。比如我们现在从服务器请求过来一个列表，希望展示到HTML中。

HTML代码中，使用 v-for指令。该指令后面会详细讲解，这里先学会使用。

<body>

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>

</body>

这样我们就再也不需要在JavaScript 代码中完成DOM的拼接相关操作了。

而且，最重要的是，它还是响应式的，也就是说，当我们数组中的数据发生改变时，界面会自动改变。

3.4、创建Vue实例传入的options

n我们在创建Vue实例的时候，传入了一个对象options，这个 options 可以包含这些选项：

el
- 类型：string | HTMLElement
- 作用：决定之后 Vue实例会管理哪一个DOM
data
- 类型：Object | Function(组件当中 data 必须是一个函数)
- 作用：Vue 实例对应的数据对象
methods
- 类型：{[key：string]: Function}
- 作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用。

4、Vue指令

指令和 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue中的指令按照不同的用途可以分为如下6大类：

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

4.1、内容渲染指令

4.1.1、v-text

v-text 作用和 Mustache 比较相似：都是用于将数据显示在界面中
v-text 通常情况下，接收一个string类型

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text = "message"></h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: '你好啊,李银河！'
            }
        })
    </script>
</body>

注意：v-text 指令会覆盖元素内默认的值。

4.1.2、{{}} 语法

内容渲染指令就是插值操作，如何将data中的文本数据，插入到HTML中呢？

可以通过Mustache语法（也就是双大括号{{}}），也叫做插值表达式
Mustanche：胡子/胡须
我们可以像下面这样来使用，并且数据是响应式的

4.1.3、v-once

但是，在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个Vue的指令

v-once：

该指令后面不需要跟任何表达式(比如之前的 v-for 后面是有跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变

<body>
    <div id="app">
        <h2 v-once>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: '亲爱的,你好呀！'
            }
        })
    </script>
</body>

4.1.4、v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

如果我们直接通过{{}} 来输出，会将HTML代码也一起输出
但是我们希望是按照HTML格式进行解析，并且显示对应的内容

如果我们希望解析出HTML展示

可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行性渲染

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-html = "link"></h2>
    </div>
    
    
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                link: '<a href = "www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>

4.1.5、v-pre

该指令的作用是用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法

比如下面的代码：

第一个 h2 元素中的内容会被编译解析出来对应的内容
第二个 h2 元素中会直接显示 {{message}}

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: 'Hello World'
            }
        })
    </script>

</body>

4.1.6、v-cloak🎈

在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签。
cloak：斗篷

<div id="app">
    {{message}}
</div>


<script src="../js/vue.js"></script>
<script>
    setTimeout(function(){
        const app = new Vue({
			el: '#app',
            data: {
                message: '亲爱的'
            }
        })
    },1000)
    
</script>

例如上述代码，当代码执行到第 2 行时，需要去解析我们的 message ，从而执行 8~15行代码。但是8 ~ 15行代码是一个定时器，需要1s后才执行，那么此时不会解析 message，从而网页中直接显示原格式 {{message}} ,之后1 s 之后再进行解析，从而显示亲爱的

我们如何解决上述问题呢？

加上v-clock 属性,并加上css。
Vue解析之前有 v-clock 属性时，让其不显示
Vue解析之后没有v-clock 属性，再让其显示

 <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 在vue解析之前, div中有一个属性v-cloak
  // 在vue解析之后, div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
</script>

</body>

4.2、属性绑定指令

4.2.1、v-bind

我们可以利用 v-bind :class来绑定一些 class 属性，v-bind为元素的属性动态绑定属性值。

前面的指令主要作用是将值插入到我们的模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

比如动态绑定a元素的 href 属性
比如动态绑定img元素的 src 属性

这个时候，我们可以使用 v-bind 指令：

作用：动态绑定属性
缩写：:

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值(这个之后组件介绍)

比如通过 Vue 实例中的 data 绑定元素的 src 和 href ，代码如下

<body>
    <div id="app" v-cloak>
        <!-- 错误的做法：这里不可以使用mustache语法 -->
        <!-- <img src="{{logoURL}}" alt=""> -->
        <!-- 正确的做法，使用v-bind指令 -->
        <a v-bind:href = "link">Vuejs官网</a>
        <imh v-bind:src = "logoURL" alt="">
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                logoURL: 'https://cn.vuejs.org/images/logo.svg',
                link: 'https://cn.vuejs.org/'
            }
        })
    </script>
</body>

①v-bind 语法糖

v-bind 有一个对应的语法糖，也就是简写方式。开发中就用这个，因为这样更简洁

简写方式如下：

<div id="app" v-cloak>
        <a v-bind:href = "link">Vuejs官网</a>
    	<!--简写形式如下-->
    	<a :href = "link">Vuejs官网</a>
    
        <imh v-bind:src = "logoURL" alt="">
        <!--简写形式如下-->
        <imh :src = "logoURL" alt="">
    </div>

②v-bind绑定class

很多时候，我们希望动态的来切换 class，比如

当数据为某个状态时，字体显示红色
当数据另一个状态时，字体显示黑色

绑定 class 有两种方式：

对象语法
数组语法

对象语法

对象语法的含义是：class 后面跟的是一个对象

对象语法有下面这些用法

直接通过{}绑定一个类

<h2 :class="'{active': isActive}">
    Hello World
</h2>

也可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">
    Hello World
</h2>

和普通类同时存在，并不冲突

注：如果 isActive 和 isLine 都为true，那么会有 title/active/line 三个类

<h2 class="title" :class="{active: isActive, line: isLine}">
    Hello World
</h2>

如果过于复杂，可以放在一个methods或者computed中

<h2 class="title" v-bind:class="getClasses()">
    Hello World
</h2>

数组语法

数组语法的含义是：class 后面跟的是一个数组

数组语法有下面这些用法：

直接通过{}绑定一个类

<h2 :class="['active']">
    Hello World
</h2>

也可以传入多个值

<h2 :class="['active', 'line']">
     Hello World
</h2>

和普通的类同时存在，并不冲突,会有 title/active/line 三个类

 <h2 class="title" :class="[active, line]">
     Hello World
</h2>

如果过于复杂，可以放在一个methods或者computed中

<h2 class="title" :class="getClasses()">
    Hello World
</h2>

③v-bind绑定style

我们可以利用 v-bind: style 来绑定一些CSS内联样式

在写CSS属性名的时候，比如 font-size

我们可以使用驼峰式：fontSize
或短横线分隔(记得用单引号括起来) 'font-size'

绑定style有两种方式

对象语法
数组语法

对象语法

<h2 :styleVue全家桶之VueX
 Vue全家桶之webpack详解
 Vue全家桶之Vue组件化开发
 Vue全家桶之Vue-router路由
 Vue全家桶之VueCLI 脚手架V2→V4版本
 Vue全家桶之组件化开发