README.md · 詹源铠/2021级3班Vue3笔记

# Vue3

## 1.Vue简介

### 1.1什么是vue

- Vue**是一套用于构建用户界面的渐进式框架**
  - 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
- vue的核心库只关心视图层，不仅易于上手，还便于与第三方库或既有项目整合
- 官网:https://cn.vuejs.org/guide/introduction.html

- CDN:

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```

### 了解Vue

1. Vue哲学：优雅简单易上手
2. 特点：渐进式，响应式框架
3. 主流开发方式：组合式API（基于函数式的编程，实现更加灵活，多复用的组织代码形式）
4. 运行原理： 通过vue语法转化为原生语法

## 2.Vue 初体验:

1.使用Vue打印hello ，Vue！

```vue
<body>
    
    <div id="app">{{msg}}</div>

data: function () {
                return {
                    msg: "Hello Vue",
                    num: 0
                }
            }
        });
        //挂载app
        app.mount("#app");
    </script>
</body>
```

## 3.模板语法

- 本质就是自定义属性
- Vue中的指令都是以v-开头

### 3.1模板语法概述

如何理解前端渲染？  -----将数据填充到html标签中

前端渲染方式：

- 原生js拼接字符串：

```
  '<li><span>'+num+'</span></li>'
  ```

- 使用前端模板引擎:

```
<li>${num}</li>
```

- 使用vue特有的模板语法

### 3.2Vue中模板语法概览

{{}} : 小胡子语法，插值符， **data**中的状态可以插入到模板中，其中可以写任意的js表达式。

```html
 <div>{{1+1}}</div>
 <div>{{Date.now()}}</div>
 <div>{{arr.join('')}}</div>
```

### 3.3指令

#### v-cloak

- 防止页面加载时出现闪烁问题

```vue
<style type="text/css">
        [v-cloak]{
            /* 元素隐藏 */
            display: none;
        }
    </style>
</head>

var app = Vue.createApp({
            data: function () {
                return {
                    msg: "Hello, Vue!"
                }
            }
        });
        app.mount("#app");
    </script>
</body>
```

#### 数据绑定指令

##### v-text

- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果觇居中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

```vue
<body>
    <div id="app">
        
       <p v-text="msg"></p>
       <p>
        
        {{msg}}
       </p>
        
    </div>

var app = Vue.createApp({
            data: function () {
                return {
                    msg: "Hello Vue",
                }
            }
        });
        app.mount("#app");
    </script>
</body>
```

##### v-html

- 用法和v-text类似，但是它可以将html代码填充到标签中
- 可能有安全问题，一般只在可信任内容上使用v-html，**永不**用在用户提交的内容上
- 它与v·text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其标签解析后输出

```vue
<body>
    <div id="app">
        
       <p v-html="html"></p> 
       <p>{{msg}}</p> 
       <p v-text="text"></p> 
       <p>
        
        {{msg}}
       </p>
        
    </div>

var app = Vue.createApp({
            data: function () {
                return {
                    msg: "<span>Hello, Vue!</span>",
                    text: "<h2>通过v-text绑定</h2>",
                    html : "<h1>html在渲染的时候被解析</h1>"
                }
            }
        });
        app.mount("#app");
    </script>
</body>
```

##### v-pre

- 显示原始信息跳过编译过程
- 跳过这个元素和他的子元素的编译过程
- **使用场景**：一些静态的内容并不需要编译，加上这个指定可以加快渲染

```vue
<body>
    <div id="app">
        <span v-pre>{{v-pre是不需要编译就显示的}}</span>
        
        <span v-pre>{{msg}}</span>
        
    </div>

##### v-once

- 执行一次性的插值，即【当数据改变时，插值处的内容不会再继续更新】

```vue
<body>
    <div id="app">
        <span v-once>{{msg}}</span>
    </div>

### 3.4双向数据绑定

- 当数据发生变化时，视图(页面)也就发生变化
- 当视图发生变化时，数据也会跟着同步变化。

##### v-model

- v-model是一个指令，限制在 <input>,<select>,<textarea>,<components>中使用。或者自定义组件中。

```vue
  <body>
      <div id="app" v-cloak>
          <div>{{msg}}</div>
          
          
          
          <input type="text" v-model="msg">
      </div>
  
      <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
      <script>
          var app = Vue.createApp({
              data: function () {
                  return {
                      msg: "Hello Vue",
                      num: 0
                  }
              }
          });
          app.mount("#app");
      </script>
  </body>
  ```

练习：使用v-model分别对：单选，多选，文本框，下拉框进行双向数据绑定

#### 关于MVVM

MVC是后端分层的开发概念，MVVM是前端视图层的概念。主要关注于视图分离，也就是说：MVVM把前端的视图层，分为了三部分：Model，View，ViewModel

- M： model 数据
    - 数据层：Vue中数据层都在data中
  - V：视图
    - 视图层：即我们的HTML页面
  - VM (view-model)  控制器：将数据和视图层建立联系
    - 即Vue的实例，就是vm  v-model

### 3.5列表渲染

##### v-for

- 使用v-for可以实现列表渲染

```vue
<body>
    <div id="app" v-cloak>
        
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>

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

<p v-for="val in obj">{{val}}</p>
        
        <p v-for="(val,key) in obj">{{key}} : {{val}}</p>
        
        <p v-for="(val,key,idx) in obj"> {{idx}} - {{key}} : {{val}}</p>
        
        <span v-for="c in msg">{{c}}</span><br>
        
        <a href="#" v-for="num in 10" style="margin-left: 10px;">{{num}}</a>
    </div>

### 3.6条件渲染

##### v-if

- `v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

##### v-else

- 你也可以使用 `v-else` 为 `v-if` 添加一个“else 区块”;
- 一个 `v-else` 元素必须跟在一个 `v-if` 或者 `v-else-if` 元素后面，否则它将不会被识别。

##### v-else-if

- 顾名思义，`v-else-if` 提供的是相应于 `v-if` 的“else if 区块”。它可以连续多次重复使用
- 和 `v-else` 类似，一个使用 `v-else-if` 的元素必须紧跟在一个 `v-if` 或一个 `v-else-if` 元素后面。

```vue
<div id="app">
      <div v-if="flag">Hello World!</div>

<div>
        
        <div><input type="text" v-model="score" /></div>
        <div>
          <h1 v-if="score>=90">A</h1>
          <h1 v-else-if="score>=80">B</h1>
          <h1 v-else-if="score>=70">C</h1>
          <h1 v-else>D</h1>
        </div>
        <ul>
          <li v-for="item in stuList">{{item.name}}</li>
        </ul>
      </div>
    </div>
```

##### v-show

- 另一个可以用来按条件显示一个元素的指令是 `v-show`。其用法基本一样

```vue
<div v-show="score>80">显示</div>
```

- 不同之处在于 `v-show` 会在 DOM 渲染中保留该元素；`v-show` 仅切换了该元素上名为 `display` 的 CSS 属性。
- `v-show` 不支持在 `<template>` 元素上使用，也不能和 `v-else` 搭配使用。

##### v-if使用注意事项

- **v-if与v-show的对比**
  1. `v-if` 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建
  2. `v-if` 也是**惰性**的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。相比之下，`v-show` 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS `display` 属性会被切换。
  3. **总的来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 `v-show` 较好；如果在运行时绑定条件很少改变，则 `v-if` 会更合适。**

- **v-if与v-for使用注意事项**

1. 当 `v-if` 和 `v-for` 同时存在于一个元素上的时候，`v-if` 会首先被执行。
  2. `v-if` 比 `v-for` 的优先级更高。这意味着 `v-if` 的条件将无法访问到 `v-for` 作用域内定义的变量别名。

解决方案:在外新包装一层 `<template>` 再在其上使用 `v-for` 可以解决这个问题 (这也更加明显易读)：

```vue
  <template v-for="todo in todos">
    <li v-if="!todo.isComplete">
      {{ todo.name }}
    </li>
  </template>
  ```

### 3.7事件绑定

##### v-on

- 用来绑定事件的
- 形式如：v-on:click 缩写为@click

##### Vue如何处理事件？

- v-on指令用法
- v-on简写形式

```vue
<input type='button' v-on:click='num++' />
<input type='button' @click='num++' />
```

##### 事件函数的调用方式

- 直接绑定函数名称
- 调用函数

```vue
<button v-on:click="say">Hello</button>
<button v-on:click="say()">Say Hi</button>
```

##### 事件函数参数传递

- 默认传参:如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

```vue
  <button v-on:click="handle2">点击2</button>
  ```

- 手动传参:不带事件对象的传参

```vue
  <button v-on:click="handle2(123,456)">点击2</button>
  ```

- 手动传参并获取事件对象：

如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

```vue
  <button v-on:click="handle2(123,456,$event)">点击2</button>
  ```

##### v-on事件函数中传入参数

```vue
<body>
    <div id="div">
        <div>{{num}}</div>
        <div>
            
            <button v-on:click="handle1">点击1</button>
            
            <button v-on:click="handle2(123,456,$event)">点击2</button>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script type="text/javascript">
        const app = Vue.createApp({
            data: function () {
                return {
                    num: 0
                }
            },
            //存放一些方法，methods中的方案，可以在模板中被访问到
            methods: {
                handle1: function (event) {
                    console.log(event.target.innerHtml);
                },
                handle2: function (p, p1, event) {
                    console.log(p, p1);
                    console.log(event.target.innerHtml);
                    //在方法中，要访问状态需要添加this
                    this.num++
                    //在一个方法中 访问 其他方法, 也需要添加this
                    //this.handle2();
                }
            },
        }).mount('#div');
    </script>
</body>
```

##### 事件修饰符

- 在事件处理程序中调用event.preventDefault() 或event.stopPropagation()是非常常见的需求。
- Vue不推荐我们操作DOM，为了解决这个问题，Vue.js为v-on提供了事件修饰符。
- 修饰符是由 . 开头的指令后缀来表示的。常见的事件修饰符有：
  1. `.stop`：阻止冒泡
  2. `.prevent`:阻止默认行为
  3. `.self`：只有当事件源等同事件绑定元素时，才会执行回调
  4. `.capture`：捕获
  5. `.once`：*点击事件最多被触发一次*
  6. `.passive`:移动端使用

##### 按键修饰符

- 在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 `v-on` 或 `@` 监听按键事件时添加按键修饰符。
- 一般只在@keyup或者@keydown中

```vue

<input @keyup.enter="submit" />
```

##### 按键别名

Vue 为一些常用的按键提供了别名：

- `.enter`
- `.tab`
- `.delete` (捕获“Delete”和“Backspace”两个按键)
- `.esc`
- `.space`
- `.up`
- `.down`
- `.left`
- `.right`

### 3.8属性绑定

##### v-bind

- 绑定数据

使用v-bind动态绑定属性

```vue
<input type='text' placeholder="请输入你的年龄" v-model='age'/>
<a v-bind:herf="age>18?url1:url0" target="_blank"/>
```

使用v-bind动态绑定样式

```vue
<div id="app">
      <button @click="flag=!flag">{{flag?'开灯':'关灯'}}</button>

<div
        class="box"
        v-bind:style="{backgroundColor: !flag?'red':'black'}"
      ></div>

<div class="box" v-bind:class="{red: flag, black: !flag}"></div>

<div
        class="box"
        v-bind:class="[ flag?'red':'black', {border: flag}]"
      ></div>
    </div>
```

詹源铠/2021级3班Vue3笔记

简介

发行版

贡献者

近期动态

詹源铠/2021级3班Vue3笔记 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

詹源铠/2021级3班Vue3笔记