【Vue全家桶】模板语法

【Vue全家桶】模板语法

写在前面

这里是前端程序员小张🫡

创作不易，希望各位大佬支持一下🌟

一、Mustache语法

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

• 基本使用
  • 双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

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

• 表达式

<h2>计数双倍: {{ counter * 2 }}</h2>

• 三元运算符

<h2>{{ age >= 18? "成年人": "未成年人" }}</h2>

• 调用methods中的函数

<h2>{{ formatDate(time) }}</h2>

• 但是不能定义语句

---

二、事件处理

2.1事件修饰符

• .prevent：阻止默认事件

• .stop：阻止事件冒泡

• .once：事件只触发一次

• .capture：使用事件的捕获模式

• .self：只有event.target是当前操作的元素时才触发事件

• .passive：事件的默认行为立即执行，无需等待事件回调执行完毕

2.2键盘事件

• vue中常用的按键别名：
  • ​ 回车 => enter
  • ​ 删除=> delete
  • ​ 退出=> esc
  • ​ 空格=> space
  • ​ 换行=> tab （特殊，必须配合keydown去使用）
  • ​ 上下左右=> up down left right
• vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

---

三、常见的基本指令

3.1 v-once

v-once指令：

• v-once所在节点在初次动态渲染后，就视为静态内容了
• 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

3.2 v-text

v-text 用于更新元素的 textContent

3.3 v-html

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。

• 如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

3.4 v-pre

v-pre指令：

• 跳过其所在结点的编译过程
• 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

---

四、Vue绑定属性

• 除了内容需要动态决定外，某些属我们也希望动态来绑定
  • 比如动态绑定a元素的href属性
  • 比如动态绑定img元素的src属性

Vue中有两种数据绑定的方法：

1. 单向绑定（v-bind）：数据只能从data流向页面
2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

4.1 v-bind

• 缩写：：
• 预期：any（with argument）|object（without argument）
• 参数：attOrProp（optional）
• 用法：动态的绑定一个或多个attribute，或一个组件prop到表达式
  • 图片的链接src、网站的链接href、动态绑定一些类、样式等等

举个栗子：点击按钮切换图片

<div id ="app">
    <div>
        <button @click="switchImage"/>切换图片</button>
	</div>
<img v-bind:src="imgUrl" alt="">
</div>

const app = Vue.createApp({
    data: function() {
        return {
            imgUrl: "http://p1.music.126.net/ZFbOIU8B4pgb9vGi6BB89A==/109951168476332689.jpg?imageView&quality=89"
        }
    },
    methods: {
        switchImage:function() {
            this.imgUrl ="http://p1.music.126.net/bm5wMgi70vLvrfnB_WKgiA==/109951168476319139.jpg?imageView&quality=89"
        }
    }
})
app.mount("#app")

举个栗子：v-bind直接绑定对象

<div id ="app">
    <h2 v-bind="infos">hello world</h2>
</div>
<script>
    // 使用Vue
    const app = Vue.createApp({
        data() {
            return {
                infos: {
                    name: "zhang",
                    age:20
                }
            }
        },
    })
    app.mount("#app")
</script>

---

4.2 v-on

• 缩写：@
• 期望的绑定值类型：Function | Inline Statement | Object (不带参数)
• 参数：event（使用对象语法则为可选项）
• 修饰符：
  • .stop ——调用 event.stopPropagation()。
  • .prevent ——调用 event.preventDefault()。
  • .capture ——在捕获模式添加事件监听器。
  • .self ——只有事件从元素本身发出才触发处理函数。
  • .{keyAlias} ——只在某些按键下触发处理函数。
  • .once ——最多触发一次处理函数。
  • .left ——只在鼠标左键事件触发处理函数。
  • .right ——只在鼠标右键事件触发处理函数。
  • .middle ——只在鼠标中键事件触发处理函数。
  • .passive ——通过 { passive: true } 附加一个 DOM 事件。

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

• 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
• 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
• 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

4.3 v-model

在表单输入元素或组件上创建双向绑定。

期望的绑定值类型：根据表单输入元素或组件输出的值而变化

仅限

• <input>
• <select>
• <textarea>
• components

修饰符：

.lazy

• 默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步
• 如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为change事件，只有在提交时（比如回车）才会触发

.number——将输入的合法符串转为数字

.trim——移除输入内容两端空格

---

五、列表渲染

5.1 v-for

基于原始数据多次渲染元素或模板块。

• 期望的绑定值类型：Array | Object | number | string | Iterable
• 详情信息：
  • 指令值必须使用特殊语法alias in expression为正在迭代的元素提供一个别名
  • 也可以为索引指定别名（如果用在对象，则是键值）

5.1.1 v-for与数组

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

data() {
    return {
         names:["BAEK HYUN","SUHO","SEHUN"]
    }
}

<li v-for="name in names">
    {{name}}
</li>

在v-for块中可以完整地访问父级作用域内的属性和变量。v-for也支持可以使用可选的第二个参数表示当前项的位置索引。

<li v-for="(name,index) in names">
    {{index}}--{{name}}
</li>

5.1.2 v-for与对象

我们也可以使用v-for来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用object.keys()的返回值来决定。

data() {
    return {
        person: {
            name: 'SEHUN',
            age:30,
            occupation:'singer'
        }
    }
}

<ul>
    <li v-for="value in person">
        {{value}}
    </li>
</ul>

可以通过提供第二个参数表示属性名：

<ul>
    <li v-for="(value,key) in person">
        {{key}}:{{value}}
    </li>
</ul>

第三个参数表示位置索引：

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

5.1.3 在v-for里使用范围值

v-for可以直接接受一个整数值。在这种用例中，会将该模块基于1.....n的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

---

5.2 VNode与虚拟DOM

• VNode的全称是Virtual Node，也就是虚拟节点
• 事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode
• VNode的本质是一个JavaScript的对象

虚拟DOM：就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性，以这三个属性来描述一个DOM节点，每组描述就是一个VNode，整个VNode的集合就是一个虚拟DOM树。

当有一大堆的元素时，他们就会形成一个VNode Tree

VDOM 其实就是多个 VNode 组成的树结构，这就好比 HTML 元素和 DOM 树之间的关系：多个 HTML 元素能够组成树形结构就称之为 DOM 树.

5.3. v-for中key属性的作用

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性，key是给每个VNode的唯一id，也是diff算法的一种优化策略，可以根据key，更准确，更快的找到对应的VNode节点。

• key这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。
• 在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。
• 如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。
• 有相同父元素的子元素必须有唯一的 key。重复的 key 会造成渲染错误。

---

六、条件渲染

6.1 v-if、v-show

v-if、v-else、v-else-if用于根据条件来渲染某一块的内容：

• 这些内容只有在条件为true时，才会被渲染出来；
• 这三个指令与JavaScript的条件语句if、else、else if类似；

v-show

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件。

6.2 v-show和v-if的区别

• 在用法上的区别：
  • v-show是不支持template；
  • v-show不可以和v-else一起使用；
• 本质上的区别：
  • v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
  • v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；
• 开发中如何进行选择呢？
  • 如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show；
  • 如果不会频繁的发生切换，那么使用v-if；