个人简介

Echo Blog


江湖无名 安心练剑
  • VUE3-13-组件注册
    组件名 在注册一个组件的时候,我们始终需要给它一个名字。 比如在全局注册的时候我们已经看到了: const app = Vue.createApp({...}) app.component('my-component-name', { /* ... */ }) 该组件名就是 app.component 的第一个参数,在上面的例子中,组件的名称是“my-component-na...
    2021-08-02 13:01:55 | VUE
  • VUE3-12-component basic 组件基础
    基本实例 这里有一个 Vue 组件的示例: // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为 button-counter 的新全局组件 app.component('button-counter', { data() { return { count: 0 } }, template: ...
    2021-08-02 13:01:55 | VUE
  • VUE3-11-forms 表单
    基础用法 你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。 它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 提示 v-model 会忽略所有表单元素的 value、checked、sele...
    2021-08-02 13:01:55 | VUE
  • 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