-
VUE3-10-events 事件
监听事件 我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。 用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName" 例如： <div id="basic-event"> <button @click="counter += 1"&g...2021-08-02 13:01:55 | VUE
-
VUE3-09-列表渲染 v-for
用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <% raw %> <ul id="array-rendering"> <li v-for="item i...2021-08-02 13:01:55 | VUE
-
VUE3-08- v-if 条件渲染
v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> 也可以用 v-else 添加一个“else 块”： <h1 v-if="awesome">Vue is awesome!</h1> <h...2021-08-02 13:01:55 | VUE
-
VUE3-07-class and style
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。 因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。 不过，字符串拼接麻烦且易错。 因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数...2021-08-02 13:01:55 | VUE
-
VUE3-06-computed 计算属性和侦听器
计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。 在模板中放入太多的逻辑会让模板过重且难以维护。 例如，有一个嵌套数组对象： Vue.createApp({ data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - A...2021-08-02 13:01:55 | VUE
-
VUE3-05-data property 和方法
Data Property 组件的 data 选项是一个函数。 Vue 在创建新组件实例的过程中调用此函数。 它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。 为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来： const app = Vue.createApp({ data() { r...2021-08-02 13:01:55 | VUE
-
VUE3-04-模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。 所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应性系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 如果你熟悉...2021-08-02 13:01:55 | VUE
-
VUE3-03-instance 应用 & 组件实例
最基本的例子 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...2021-08-02 13:01:55 | VUE
Echo Blog
江湖无名 安心练剑