vue——初学Vue

vue——初学Vue

1.事件处理

1.1事件修饰符

1. prevent：阻止默认事件

2. stop：阻止事件冒泡

3. once：事件只触发一次

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

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

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

1.2键盘事件

1.vue中常用的按键别名：

​ 回车 => enter

​ 删除=> delete

​ 退出=> esc

​ 空格=> space

​ 换行=> tab （特殊，必须配合keydown去使用）

​ 上下左右=> up down left right

2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

2.Vue3基本指令

2.1 v-once

v-once指令：

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

2.2 v-pre

v-pre指令：

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

2.3 v-on

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

3.Vue绑定属性

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

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

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

3.1 v-bind的绑定属性

• 缩写：：
• 预期：any（with argument）|object（without argument）
• 参数：attOrProp（optional）
• 用法：动态的绑定一个或多个attribute，或一个组件prop到表达式

基本使用：

 <div id="app"></div>
    <!-- vue3允许template中有多个根元素 -->
    <template id="my-app">
        <img v-bind:src="imgUrl" alt="">
        <br>
        <a v-bind:href="link">哔哩哔哩</a>
    </template>
    <script src="../vue3/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    imgUrl:"https://profile.csdnimg.cn/1/6/8/0_qq_53664443",
                    link:"https://www.bilibili.com/"
                }
            }
        }
        Vue.createApp(App).mount('#app');
    </script>

绑定class：

3.2 v-model的绑定属性

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

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

仅限

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

修饰符：

.lazy

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

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

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

4.列表渲染

4.1v-for

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

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

4.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>

4.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>

4.1.3 在v-for里使用范围值

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

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

4.2 v-if与v-show

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

v-else-if

v-else

v-show

区别：v-if当条件为false时，其对应的元素不会被渲染到DOM中

​ v-show元素不论是否需要显示到浏览器上，他的DOM实际都是有渲染的，只是通过CSS的display属性进行切换

​ v-show不支持template，并且不可以和v-else一起使用

5.VNode与虚拟DOM

5.1 VNode的概念

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

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

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

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

6. key属性的作用

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

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