学海无涯

导航

2023年2月27日 #

事件处理

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

posted @ 2023-02-27 19:00 宁静致远. 阅读(32) 评论(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 宁静致远. 阅读(40) 评论(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 宁静致远. 阅读(38) 评论(0) 推荐(0) 编辑

Class 与 Style 绑定

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

posted @ 2023-02-27 16:25 宁静致远. 阅读(15) 评论(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 宁静致远. 阅读(21) 评论(0) 推荐(0) 编辑

响应式基础

摘要: 响应式基础 使用 reactive() 函数创建一个响应式对象或数组: <script setup> import { reactive } from 'vue' const state = reactive({ count: 0 }) function increment() { state.co 阅读全文

posted @ 2023-02-27 14:35 宁静致远. 阅读(18) 评论(0) 推荐(0) 编辑

Vue 基础

摘要: 模板语法 Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。 在底层机制中,Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应 阅读全文

posted @ 2023-02-27 10:40 宁静致远. 阅读(24) 评论(0) 推荐(0) 编辑

Vue 基础设施安装 组件

摘要: 创建单文件组件式API 安装 Node.js https://nodejs.org/en/ 在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置,并允许我们使用 Vue 的单文件组件 (SFC)。 确保你安装了最新版本的 Node.js,然后在命令行中运行以下命令 (不要带上 > 阅读全文

posted @ 2023-02-27 09:11 宁静致远. 阅读(98) 评论(0) 推荐(0) 编辑

Vue 3

摘要: Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。 Vue 的两个核心功能: 声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 响应性:Vue 会 阅读全文

posted @ 2023-02-27 09:08 宁静致远. 阅读(36) 评论(0) 推荐(0) 编辑