# cl-vue-learning-demo **Repository Path**: code_easy/cl-vue-learning-demo ## Basic Information - **Project Name**: cl-vue-learning-demo - **Description**: 关于vue的学习总结，课程来自李南江的vue教学，链接https://www.bilibili.com/video/BV1U5411h7oH?p=4。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-05-01 - **Last Updated**: 2021-10-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # VUE - 统一文章内容输出口径 - 所有标签语句的，统一采用 `标签语法`格式 - 实现，说的是如何使用指令 - 示例，主要是代码和效果图 ## 05-Vue数据双向传递(v-model) ### 概念 > 1. 数据双向绑定 > 默认情况下，Vue只支持数据单向传递 M->VM->V > 但是由于 Vue是基于MVVM设计模式的，所以也提供了双向传递的能力； > 在

及 <select> 元素上可以用 v-model 指令创建双向数据绑定；
>
> 2. 注意点：
> v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，
> 而总是将vue实例的数据作为数据来源。

### 实现

> 使用``v-model`，可以实现数据的双项传递。

``` html
    <input type="text" v-model = "msg">
```

### 示例

- HTML代码

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-Vue数据双向传递</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>{{name}}</h1>
    <input type="text" v-model = "msg">
</div>
</body>
<script>
    // 这里是MVVM中的VM-(View Model)
    /* 1. 创建 vue 实例对象 */
    let vue = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        // 这里是MVVM中的M(Model)
        data: {
            name: 'cl',
            msg: "靓仔七号"
        }
    })
</script>
</html>
```

- 有图有真相

![image-20210502143900390](https://cloud-image-chenlin.oss-cn-chengdu.aliyuncs.com/cloud-image/image-20210502143900390.png)

## 06-Vue指令`v-once`

### 概念

> 这个指令，可以让页面只渲染一次数据。后序数据即使被改变，视图也只是展示第一次渲染的数据。

### 实现

在标签语句中加上这个指令就行。

``` html
 <h1 v-once>原始数据：{{name}}</h1>
```

### 示例

- HTML代码

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-Vue指令v-once</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <h1 v-once>原始数据：{{name}}</h1>
  <h1>当前数据：{{name}}</h1>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        data: {
          name: '靓仔七号'
        }
    })
</script>
</html>
```

- 图

![image-20210502150054541](https://cloud-image-chenlin.oss-cn-chengdu.aliyuncs.com/cloud-image/image-20210502150054541.png)

## 07-Vue指令`v-cloak`

### 概念

> ```
> 1. Vue 数据绑定过程
> - 会先将未绑定数据的界面展示给用户；
> - 然后再根据模型中的数据和控制的区域生成绑定数据之后的 HTML 代码
> - 最后再将绑定数据之后的 HTML 渲染到界面上
> 
> 正是在最终的 HTML 被生成渲染之前会先显示模板内容，
> 所以如果用户网络比较慢或者网页性能较差时，用户会先看到模板内容。
> 
> 2. 如何解决这个问题？
> 利用 v-cloak 配合 [v-cloak] {display:none} 默认先隐藏未渲染的界面；
> 等到生成 HTML 渲染之后再重新显示
> 
> 3. v-cloak 指令作用：数据渲染之后自动显示元素
> ```

### 实现

在标签语句上加上v-cloak即可，但是要配合csss使用

```css
   <style>
        [v-cloak] { display:none }
    </style>
```

```html

<h1 v-cloak>{{name}}</h1>
    
```

### 示例

- HTML代码

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-Vue指令v-cloak</title>
    <style>
        [v-cloak] { display:none }
    </style>
</head>
<body>
<div id="app">
  <h1>{{name}}</h1>
  <h1 v-cloak>{{name}}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    /* 1. 创建 vue 实例对象 */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        data: {
          name: '靓仔七号'
        }
    })
</script>
</html>
```

- 效果图

- 加载模版

![](https://cloud-image-chenlin.oss-cn-chengdu.aliyuncs.com/cloud-image/image-20210502160743827.png)

- 会发现加了v-cloak指令的，直接展示出来了。没有像图一展示模版

![image-20210502161208433](https://cloud-image-chenlin.oss-cn-chengdu.aliyuncs.com/cloud-image/image-20210502161208433.png)

## 08-Vue指令`v-text` 和`v-html`

### 概念

> `v-text`会覆盖内容，但是不会解析HTML。
>
> `v-html`会覆盖内容，会解析HTML。

### 实现

```html
  
  <h1 v-text="name">------</h1>
  <h1 v-text="msg">------</h1>
  
  <h1 v-html="name">------</h1>
  <h1 v-html="msg">------</h1>
```

### 示例

- HTML代码

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-Vue指令v-text-v-html</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  
  <h1>插值的方式: {{name}}  可以将指定的数据插入到指定的位置</h1>
  
  <h1>插值的方式: {{msg}}   不会解析 HTML 标签</h1>

<h1 v-text="name">------</h1>
  <h1 v-text="msg">------</h1>

<h1 v-html="name">------</h1>
  <h1 v-html="msg">------</h1>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        data: {
          name: '靓仔七号',
          msg: '<span>This is span</span>'
        }
    })
</script>
</html>

```

- 图片

![image-20210502162305276](C:/Users/chenlin/AppData/Roaming/Typora/typora-user-images/image-20210502162305276.png)

## 09-Vue指令`v-if`

### 概念

> 1. `v-if` 指令
> 条件渲染：如果 `v-if` 取值是true就渲染元素，否则不渲染。
> 2. v-if 特点
> 如果条件不满足根本不会创建这个元素（重点）
> 3. v-if 注意点
> v-if 可以从模型中获取数据
> v-if 可以直接赋值一个表达式
> 4. v-else 指令
> v-else 指令和 v-if 指令配合使用，当 v-if 不满足条件时渲染 v-else 中的元素内容
> 5. v-else 注意点
> v-else 不能单独出现
> v-if 和 v-else 中间不能出现其他内容

### 实现

``` html
  <h3 v-if="score >= 80">优秀</h3>
  <h3 v-else-if="score >= 60">良好</h3>
  <h3 v-else>一般</h3>
```

### 示例

- HTML代码

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-Vue指令v-if</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <h3 v-if="1">我是true</h3>
  <h3 v-if="false">我是false</h3>

<h3 v-if="show">我是true</h3>
  <h3 v-if="hidden">我是false</h3>

<h3 v-if="age >= 18">我是true</h3>
  <h3 v-if="age < 18">我是false</h3>

<h3 v-if="age >= 18">我是成年人</h3>
  <h3 v-else>我是未成年</h3>

<h3 v-if="score >= 80">优秀</h3>
  <h3 v-else-if="score >= 60">良好</h3>
  <h3 v-else>一般</h3>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        data: {
          show: true,
          hidden: false,
          age: 18,
          score: 100
        }
    })
</script>
</html>

```

- 效果图

![image-20210502165057516](C:/Users/chenlin/AppData/Roaming/Typora/typora-user-images/image-20210502165057516.png)

## 10-Vue指令`v-show`

### 概念

> 1. v-show指令
> v-show 和 v-if 一样都是条件渲染，取值为true就显示，false就不显示
> 2. v-if 和 v-show 区别
> v-if：只要取值为false就不会创建元素；
> v-show：取值为false也会创建元素，只是如果取值为false会设置元素的display为none；
> 3. v-if 和 v-show 应用场景
>     由于取值为false时 v-if 不会创建元素，所以如果需要切换元素的显示和隐藏，每次v-if 都会创建和删除元素；
>     由于取值为false时 v-show 会创建元素并设置display为none，所以切换元素显示和隐藏时不会重复创建和删除
>     所以：如果开发中需要频繁切换元素显示隐藏，那么推荐使用v-show，否则使用 v-if

### 实现

``` html
  <h3 v-show="age >= 18">我是true</h3>
  <h3 v-show="age < 18">我是false</h3>
```

### 示例

- HTML代码

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-Vue指令v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <h3 v-show="1">我是true</h3>
  <h3 v-show="false">我是false</h3>

<h3 v-show="show">我是true</h3>
  <h3 v-show="hidden">我是false</h3>

<h3 v-show="age >= 18">我是true</h3>
  <h3 v-show="age < 18">我是false</h3>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        data: {
          show: true,
          hidden: false,
          age: 18,
          score: 100
        }
    })
</script>
</html>
```

- 效果图

![image-20210502165624707](C:/Users/chenlin/AppData/Roaming/Typora/typora-user-images/image-20210502165624707.png)

### 10-Vue指令`v-for`

### 概念

> 1. v-for 指令
> 相当于 JS 中的 for in 循环，可以根据数据多次渲染元素
>
> 2. v-for 特点
> 可以遍历数组，字符，数字，对象

### 实现

```html
  <ul>
    <li v-for="(value, index) in list"> {{index}} - {{value}}</li>
  </ul>
  <ul>
    <li v-for="(value, index) in string"> {{index}} - {{value}}</li>
  </ul>
  <ul>
    <li v-for="(value, index) in numbers"> {{index}} - {{value}}</li>
  </ul>
  <ul>
    <li v-for="(value, key) in object"> {{key}} - {{value}}</li>
</ul>
```

### 示例

- HTML代码

``` html
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-Vue指令v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(value, index) in list"> {{index}} - {{value}}</li>
  </ul>

<ul>
    <li v-for="(value, index) in string"> {{index}} - {{value}}</li>
  </ul>

<ul>
    <li v-for="(value, index) in numbers"> {{index}} - {{value}}</li>
  </ul>

<ul>
    <li v-for="(value, key) in object"> {{key}} - {{value}}</li>
</ul>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        data: {
          list: ['zs', 'ls', 'ww', 'zl'],
          string: '靓仔七号',
          numbers: '12345',
          object: {
            name: '靓仔七号',
            age: '18',
            github: 'https://github.com/zsy0216'
          }
        }
    })
</script>
</html>
```

- 效果图

![image-20210502170431015](C:/Users/chenlin/AppData/Roaming/Typora/typora-user-images/image-20210502170431015.png)

## 11-Vue指令v-bind

### 概念

> 1. v-bind 指令
>
> 在开发中想要给"元素"绑定数据，我们可以使用{{}}，v-text，v-html
> 但是如果想要给"元素的属性"绑定数据，就必须使用 v-bind
> 所以 v-bind 的作用是专门用于给"元素的属性"绑定数据的
>
> 2. v-bind 格式
> v-bind:属性名称="绑定的数据"
> :属性名称="绑定的数据"
>
> 3. v-bind 特点
> 赋值的数据可以是任意一个合法的 JS 表达式
> 例如  :属性名称="age + 1"
>
> 4. 注意点：
> v-model 也可以将数据绑定到元素的属性，但是只局限于input、textarea、select标签
> 而想要给其他标签的属性绑定数据，就需要用到 v-bind

### 实现

注意：v-bind和：不要加空格，不然就是语法错误

``` html
  <input type="text" v-bind:value="name"/>
```

### 示例

- HTML代码

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-Vue指令v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <h1>{{name}}</h1>
  <h1 v-text="name"></h1>
  <input type="text" v-bind:value="name"/>
  <input type="text" :value="name"/>
  <input type="text" :value="name + 'test'"/>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据
        data: {
            name: '靓仔七号'
        }
    })
</script>
</html>
```

- 效果图

![image-20210502211743878](C:/Users/chenlin/AppData/Roaming/Typora/typora-user-images/image-20210502211743878.png)

## 12-Vue指令v-bind-绑定类名

### 概念

重点，绑定类名的语法是==:class==

> 1. v-bind 指令的作用
> v-bind指令给"任意标签"的"任意属性"绑定数据；
> 对于大部分的属性而言我们只需要直接赋值即可，例如 :value="name"
> 但是对于 class 和 type 属性而言，它的格式比较特殊
>
> 2. 通过 v-bind 绑定类名格式
> :class="['需要绑定类名', ...]"
>
> 3. 注意点：
> - 直接赋值一个类名(没有放到数组中) 默认回去model中查找
>   :class = "需要绑定类名"
>   如果需要通过 v-bind 给 class 绑定类名，不能直接赋值
>   默认情况下 v-bind 回去 Model 中查找数据，但是 Model 中没有对应的类名
>
> - 想要 v-bind 去 style 中查找类名，那么必须把类名放到数组中,且用引号包裹起来
>
> - 如果是通过 v-bind 绑定类名，那么在绑定的时候可以编写三目运算符来实现按需绑定
>
> - v-bind 绑定类名， 可以通过对象决定是否需要绑定
>   格式：{'需要绑定类名' : 是否绑定}
>
> - v-bind 绑定类名， 可以使用 Model中的对象来替换数组
>   格式：{'需要绑定类名' : 是否绑定}

### 实现

```html
    
  <p class="size color active"> 这是段落 </p>
    
  <p :class="['size', 'color', 'active']"> 这是段落1: 通过数组绑定 class </p>
    
  <p :class="['size', 'color', flag ? 'active' : '']"> 这是段落2 通过三目运算符绑定 class </p>
    
  <p :class="['size', 'color', {'active' : false}]"> 这是段落3：通过对应绑定 class </p>
    
  <p :class="object"> 这是段落4: 通过实例中的对象来绑定 class </p>
```

### 示例

- HTML代码

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-Vue指令绑定类名</title>
    <script src="js/vue.js"></script>
    <style>
      *{
          margin: 0;
          padding: 0;
      }
      .size {
          font-size: 30px;
      }
      .color {
          color: red;
      }
      .active {
          background: skyblue;
      }
    </style>
</head>
<body>
<div id="app">
    
  <p class="size color active"> 这是段落 </p>
    
  <p :class="['size', 'color', 'active']"> 这是段落1: 通过数组绑定 class </p>
    
  <p :class="['size', 'color', flag ? 'active' : '']"> 这是段落2 通过三目运算符绑定 class </p>
    
  <p :class="['size', 'color', {'active' : false}]"> 这是段落3：通过对应绑定 class </p>
    
  <p :class="object"> 这是段落4: 通过实例中的对象来绑定 class </p>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 VM */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域 View
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据 Model
        data: {
          flag: false,
          object: {
            size: true,
            color: true,
            active: true
          }
        }
    })
</script>
</html>
```

- 效果图

![image-20210502212001781](https://cloud-image-chenlin.oss-cn-chengdu.aliyuncs.com/cloud-image/image-20210502212001781.png)

## 13-Vue指令-bind-绑定样式

#### 概念

> 1. 如何通过 v-bind 给 style 属性绑定数据
> - 将数据放到对象中
>   :style="{color: 'red', 'font-size': '50px'}"
> - 将数据放到Model对象中
>   object:{
>     color: 'red',
>     'font-size': '30px'
>   }
>
> 2. 注意点：
> - 如果属性名称包含 "-", 那么必须用引号括起来
> - 如果需要绑定 Model 中的多个对象，可以放到一个数组中赋值
>
> - 和绑定类名一样，默认情况下 v-model 会去 Model中查询数据，默认无数据则无效
>   要使用上面 1 的方式绑定

### 实现

``` html
    
  <p :style="{color: 'red'}">这是段落1</p>
    
  <p :style="object">这是段落2,sytle = {{object}}}</p>

<p :style="[object, blueObj]">这是段落3, sytle = {{[object, blueObj]}}</p>
```

### 示例

- HTML

``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-Vue指令绑定样式</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    
  <p :style="{color: 'red'}">这是段落1</p>
    
  <p :style="object">这是段落2,sytle = {{object}}}</p>

<p :style="[object, blueObj]">这是段落3, sytle = {{[object, blueObj]}}</p>
</div>
</body>
<script>
    /* 1. 创建 vue 实例对象 VM */
    let vm = new Vue({
        // 2. 声明vue的实例对象控制页面的哪个区域 View
        el: '#app',
        // 3. 声明vue控制区域可以使用的数据 Model
        data: {
          object:{
            color: 'red',
            'font-size': '30px'
          },
          blueObj: {
            background: 'skyblue'
          }
        }
    })
</script>
</html>
```

- 效果图

![image-20210502214306547](https://cloud-image-chenlin.oss-cn-chengdu.aliyuncs.com/cloud-image/image-20210502214306547.png)