大年初二的学习 | 青训营笔记

这是我参与「 第五届青训营 」伴学笔记创作活动的第 9 天。

前言

今天是 2023 年 1 月 23 日星期一，农历正月初二。

依然祝大家兔年快乐🐰

今天我还是继续写一些关于 Vue 框架的学习笔记。Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue3 样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。v-bind:class 可以简写为 :class

Vue3 事件处理

可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。v-on 指令可以缩写为 @ 符号。

语法格式：

v-on:click="methodName"
或
@click="methodName"

<div id="app">
    <button @click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p> 
</div>
<script>
const app = { 
    data() { 
        return { 
            counter: 0 
        } 
    } 
} 
Vue.createApp(app).mount('#app') 
</script>

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，例如 event.preventDefault() 或 event.stopPropagation()。Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

Vue3 表单

v-model 会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为属性并将 change 作为事件。