学海无涯

导航

上一页 1 ··· 19 20 21 22 23 24 25 26 27 ··· 44 下一页

2023年2月28日 #

注册组件

摘要: 注册组件 一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。 全局注册 更改 main.js 文件如下: import { createApp } from 'vue' import App from './App.v 阅读全文

posted @ 2023-02-28 17:02 宁静致远. 阅读(23) 评论(0) 推荐(0)

组件基础

摘要: 组件基础 组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构: Vue 实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。 定义一个组件 当使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的 . 阅读全文

posted @ 2023-02-28 14:22 宁静致远. 阅读(31) 评论(0) 推荐(0)

模板引用 ref

摘要: 虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的 ref attribute: 访问模板引用# 为了通过组合式 API 获得该模板引用,我们需要声明一个同名的 ref: <script se 阅读全文

posted @ 2023-02-28 14:18 宁静致远. 阅读(30) 评论(0) 推荐(0)

侦听器 watch

摘要: 侦听器 计算属性允许我们声明性地计算衍生值。然而在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态。 在组合式 API 中,我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数: 以下代码侦听question 变量,当qu 阅读全文

posted @ 2023-02-28 11:25 宁静致远. 阅读(62) 评论(0) 推荐(0)

表单输入绑定 v-model

摘要: 表单输入绑定 v-model 还可以用于各种不同类型的输入,<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合: 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件; <inp 阅读全文

posted @ 2023-02-28 09:16 宁静致远. 阅读(59) 评论(0) 推荐(0)

2023年2月27日 #

事件处理

摘要: 监听事件# 我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="methodName" 或 @click="handler"。 事件处理器的值可以是: 内联事件处理器:事件被触发时执行的内联 JavaScr 阅读全文

posted @ 2023-02-27 19:00 宁静致远. 阅读(46) 评论(0) 推荐(0)

列表渲染 v-for

摘要: v-for 我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法,其中 items 是源数据的数组,而 item 是迭代项的别名: <template> <h2>v-for练习</h2> <li v-for="(item, 阅读全文

posted @ 2023-02-27 17:53 宁静致远. 阅读(55) 评论(0) 推荐(0)

条件渲染 v-if

摘要: v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 <button @click="awesome = !awesome">Toggle</button> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-els 阅读全文

posted @ 2023-02-27 16:30 宁静致远. 阅读(59) 评论(0) 推荐(0)

Class 与 Style 绑定

摘要: Class 与 Style 绑定 数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式 因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。 Vue 专门为 class 和 style 阅读全文

posted @ 2023-02-27 16:25 宁静致远. 阅读(25) 评论(0) 推荐(0)

计算属性

摘要: 计算属性 推荐使用计算属性来描述依赖响应式状态的复杂逻辑 <script setup> import { reactive, computed } from 'vue' const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Adv 阅读全文

posted @ 2023-02-27 14:59 宁静致远. 阅读(29) 评论(0) 推荐(0)

上一页 1 ··· 19 20 21 22 23 24 25 26 27 ··· 44 下一页