Vue2 - 模板、渲染、事件处理、表单输入绑定

文章目录

- 模板语法
- - 1、文本
  - [2、原始 HTML](#2、原始 HTML)
  - [3、属性 Attribute](#3、属性 Attribute)
  - [4、使用 JavaScript 表达式](#4、使用 JavaScript 表达式)
- 条件渲染
- - 1、v-if
  - 2、v-else
  - 3、v-show
  - [4、`v-if` vs `v-show` 的区别](#4、v-if vs v-show 的区别)
- 列表渲染
- - [1、用 `v-for` 把一个数组映射为一组元素](#1、用 v-for 把一个数组映射为一组元素)
  - 2、维护状态
- 事件处理
- - [1、监听事件 `v-on`](#1、监听事件 v-on)
  - 2、事件处理方法
  - 3、内联处理器中的方法
- 表单输入绑定
- - 1、修饰符
  - - [1.1 `.lazy`](#1.1 .lazy)
    - [1.2 `.trim`](#1.2 .trim)

本文内容来自：https://www.bilibili.com/video/BV1Rs4y127j8/

模板语法

1、文本

数据绑定最常见的形式就是使用"Mustache" (双大括号) 语法的文本插值

html 复制代码

<span>Message: {{ msg }}</span>

一般配合js 中的data()设置数据

js 复制代码

export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"消息提示"
    }
  }
}

2、原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html 指令

html 复制代码

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

js 复制代码

data(){
    return{
        rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"
    }
}

3、属性 Attribute

Mustache 语法不能在 HTML 属性中使用，然而，可以使用 v-bind 指令

html 复制代码

<div v-bind:id="dynamicId"></div>

js 复制代码

data(){
    return{
        dynamicId:1001
    }
}

v-bind: 可以简写成 :

4、使用 JavaScript 表达式

在我们的模板中，我们一直都只绑定简单的 property 键值，Vue.js 都提供了完全的 JavaScript 表达式支持

js 复制代码

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式 ，所以下面的例子都不会生效。

js 复制代码

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

条件渲染

1、v-if

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

html 复制代码

<p v-if="flag">我是孙猴子</p>

js 复制代码

data() {
    return {
        flag: true
    }
}

2、v-else

你可以使用 v-else 指令来表示 v-if 的"else 块"

html 复制代码

<p v-if="flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>

js 复制代码

data() {
    return {
        flag: false
    }
}

3、v-show

另一个用于条件性展示元素的选项是 v-show 指令

html 复制代码

<h1 v-show="ok">Hello!</h1>

4、`v-if` vs `v-show` 的区别

v-if 是"真正"的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做------直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多------不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

列表渲染

1、用 `v-for` 把一个数组映射为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

html 复制代码

<ul>
    <li v-for="item in items">{{ item.message }}</li>
</ul>

js 复制代码

data() {
    return {
        items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
}

2、维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用"就地更新"的策略。

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：

html 复制代码

<div v-for="(item,index) in items" :key="item.id|index">
  <!-- 内容 -->
</div>

事件处理

1、监听事件 `v-on`

可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

html 复制代码

<button @click="counter += 1">Add 1</button>

js 复制代码

data() {
    return {
        counter: 0
    }
}

2、事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。

因此 v-on 还可以接收一个需要调用的方法名称。

html 复制代码

<button @click="greet">Greet</button>

js 复制代码

methods: {
    greet(event) {
        // `event` 是原生 DOM event
        if (event) {
            alert(event.target.tagName)
        }
    }
}

3、内联处理器中的方法

这是官方的翻译称呼，其实我们可以直接叫他 "事件传递参数"

html 复制代码

<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>

js 复制代码

methods: {
    say(message) {
        alert(message)
    }
}

表单输入绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。

尽管有些神奇，但 v-model 本质上不过是语法糖。

它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

html 复制代码

<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

js 复制代码

data() {
    return {
        message:""
    }
}

1、修饰符

1.1 `.lazy`

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

html 复制代码

<input v-model.lazy="message" />
<p>Message is: {{ message }}</p>

js 复制代码

data() {
    return {
        message:""
    }
}

1.2 `.trim`

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

html 复制代码

<input v-model.trim="message" />

js 复制代码

data() {
    return {
        message:""
    }
}

2023-07-19

Vue2 - 模板、渲染、事件处理、表单输入绑定

文章目录

模板语法

1、文本

2、原始 HTML

3、属性 Attribute

4、使用 JavaScript 表达式

条件渲染

1、v-if

2、v-else

3、v-show

4、v-if vs v-show 的区别

列表渲染

1、用 v-for 把一个数组映射为一组元素

2、维护状态

事件处理

1、监听事件 v-on

2、事件处理方法

3、内联处理器中的方法

表单输入绑定

1、修饰符

1.1 .lazy

1.2 .trim

4、`v-if` vs `v-show` 的区别

1、用 `v-for` 把一个数组映射为一组元素

1、监听事件 `v-on`

1.1 `.lazy`

1.2 `.trim`