Vue.js (二) 基础API

`v-bind` 指令

描述：用于动态地将数据绑定到 HTML 元素的属性上，当数据发生变化时，其对应的属性值也会自动更新变化

语法：v-bind:attrName="expression" or :attrName="expression"

attrName 为要绑定的属性名，expression 为要绑定的数据，它可以是任意的 Vue 表达式

1. 动态绑定元素属性

<!-- src/App.vue -->
<template>
  <a :href="url" :title="title">{{title}}</a>
	<!-- disabled 如果为 true, 则启用该属性, 反之则移除该属性 -->
  <input type="text" :disabled="disabled" >
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.baidu.com',
      title: '百度',
      disabled: true
    }
  }
}
</script>

2. 动态绑定元素class, 对象语法

<!-- src/App.vue -->
<template>
  <!-- 根据对象属性的 value 是否为 true, 来选择是否将其属性的 key 作为该元素 className -->
  <div :class="{content: isStat}">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci, fugit. Voluptatem pariatur incidunt nihil saepe perspiciatis est dolor dolorum, praesentium dignissimos tempore facere facilis sequi fugit asperiores vel aperiam maxime!</div>
</template>

<script>
export default {
  data() {
    return {
      isStat: true
    }
  }
}
</script>

<style scoped>
.content {
  font-size: 22px;
  font-weight: bold;
  color: blueviolet
}
</style>

3. 动态绑定元素class, 数组语法

<!-- src/App.vue -->
<template>
  <!-- 数组中每个 item 都将成为该元素的 className -->
  <div :class="[className, 'style2']">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci, fugit. Voluptatem pariatur incidunt nihil saepe perspiciatis est dolor dolorum, praesentium dignissimos tempore facere facilis sequi fugit asperiores vel aperiam maxime!</div>
</template>

<script>
export default {
  data() {
    return {
      className: 'content'
    }
  }
}
</script>

<style scoped>
.content {
  font-size: 22px;
  font-weight: bold;
  color: blueviolet
}
.style2 {
  border: 2px solid black;
  padding: 10px 15px;
  background-color: chartreuse
}
</style>

4. 动态绑定元素style, 对象语法

<!-- src/App.vue -->
<template>
  <div :style="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci, fugit. Voluptatem pariatur incidunt nihil saepe perspiciatis est dolor dolorum, praesentium dignissimos tempore facere facilis sequi fugit asperiores vel aperiam maxime!</div>
</template>

<script>
export default {
  data() {
    return {
      content: {
        // 如果不加引号, 则要用驼峰命名法
        fontSize: '22px',
        fontWeight: 'bold',
        color: 'blueviolet'
      }
    }
  }
}
</script>

5. 动态绑定元素style, 数组语法

<!-- src/App.vue -->
<template>
  <div :style="[content, style2]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates enim architecto rem nostrum, aliquam corporis. Maiores vel magni exercitationem. Odit vitae dicta ipsam earum delectus aliquid velit ipsum vel deleniti?</div>
</template>

<script>
export default {
  data() {
    return {
      content: {
        fontSize: '22px',
        fontWeight: 'bold',
        color: 'blueviolet'
      },
      style2: {
        border: '2px solid black',
        padding: '10px 15px',
        backgroundColor: 'chartreuse'
      }
    }
  }
}
</script>

`v-model` 指令

描述：用于实现表单元素( 如 input、textarea、select 等 )和 Vue 实例数据的双向绑定，它会根据表单的类型来动态的将表单输入的内容与 Vue 组件实例的数据进行双向绑定

语法：v-model="data"

data 为要绑定的数据，必须是响应式数据

例：

<!-- src/App.vue -->
<template>
  <h2>例1. text类型表单</h2>
  <!-- .trim 为 v-model 修饰符, 可以过滤首尾的空格 -->
  <input type="text" v-model.trim="message">
  <p>您输入的内容是：{{ message }}</p>

  <h2>例2. radio类型表单</h2>
  <p>性别：{{ sex }}</p>
  <!-- radio 类型表单需要显示的指定 value 的值 -->
  <input type="radio" name="sex" value="男" v-model="sex"> 男
  <input type="radio" name="sex" value="女" v-model="sex"> 女

  <h2>例3. checkbox类型表单</h2>
  <p>喜好：{{ likes }}</p>
  <!-- 如果使用了一组 checkbox 类型表单, 需要显示的指定 value 的值, 同时要将 v-model 绑定为一个数组 -->
  <input type="checkbox" name="like" value="篮球" v-model="likes"> 篮球
  <input type="checkbox" name="like" value="足球" v-model="likes"> 足球
  <input type="checkbox" name="like" value="乒乓球" v-model="likes"> 乒乓球
</template>

<script>
export default {
  data() {
    return {
      message: '',
      sex: '男',
      likes: ['乒乓球']
    }
  }
}
</script>

v-model 修饰符：

.lazy 失去焦点或按下回车键时才更新绑定数据
.number 输入字符串转换为有效的数字
.trim 过滤首尾的空格

`v-on` 指令

描述：用于监听 DOM 事件，并在事件触发时执行指定的方法或表达式

语法：v-on:eventName="handler" or @:eventName="handler"

eventName 为事件名，handler 为事件触发时要执行的函数或 Vue表达式

例1：

<!-- src/App.vue -->
<template>
  <!--
    如果事件处理函数中无需传递参数可以不加小括号()
    这样的话在事件触发时 Vue 会自动添加事件对象(event)作为第1个参数
  -->
  <button @click="handler">Button-1</button> <!-- PointerEvent -->
  <button @click="handler('Button-2 was clicked')">Button-2</button> <!-- 'Button-2 was clicked' -->
  <!--
    你也可以在事件处理函数参数中显示的指定事件对象
    $event 为触发该事件的事件对象
  -->
  <button @click="handler($event)">Button-2</button> <!-- PointerEvent -->
</template>

<script>
export default {
  // 事件处理函数写在 methods 中
  methods: {
    handler(arg) {
      console.log(arg);
    }
  }
}
</script>

另外，v-on 还支持修饰符，用来对事件进行额外的处理，如阻止默认行为、阻止事件冒泡等

常用事件修饰符列表：

修饰符	描述
`.prevent`	阻止默认行为
`.stop`	阻止事件冒泡
`.capture`	事件在捕获阶段触发
`.self`	只当事件在该元素本身触发时才处理
`.once`	事件只执行一次
`.passive`	提升页面滚动性能
`.left`	按下键盘左键
`.right`	按下键盘右键
`.up`	按下键盘上键
`.down`	按下键盘下键
`.enter`	按下键盘回车键
`.delete`	按下键盘 Delete 键
`.esc`	按下键盘 ESC 键
`.space`	按下键盘空格键
`.tab`	按下键盘 Tab 键
`.capsLock`	按下键盘 CapsLock 键
`.ctrl`	组合键，按下键盘 Ctrl 键 + Other
`.alt`	组合键，按下键盘 Alt 键 + Other
`.shift`	组合键，按下键盘 Shift 键 + Other
`.meta`	组合键，按下键盘 Win 键 + Other

例2：

<!-- src/App.vue -->
<template>
  <div class="bg" @click="alert1">
    <!-- 阻止默认行为同时阻止事件冒泡 -->
    <a href="https://www.timeic.top" @click.prevent.stop="alert2">click me!</a>
  </div>
</template>

<script>
export default {
  // 事件处理函数写在 methods 中
  methods: {
    alert1() {
      alert('alert 1');
    },
    alert2() {
      alert('alert 2');
    }
  }
}
</script>

<style scoped>
.bg {
  background-color: tomato;
}
</style>

例3：

<!-- src/App.vue -->
<template>
  <!-- 当按下 Ctrl + Enter 键时执行 handler -->
  <input v-model="text" type="text" @keyup.ctrl.enter="handler">
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  // 事件处理函数写在 methods 中
  methods: {
    handler() {
      alert(`您输入的是 '${this.text}'`);
    }
  }
}
</script>

`computed` 计算属性

Vue 的 computed 用于定义一些基于现有数据计算得出的属性。它可以将逻辑与模板分离，使代码更加简洁、易读、易于维护。同时计算属性会通过缓存和依赖跟踪机制提供响应式和高效的性能

特点：

缓存：计算属性会根据其依赖的响应式数据进行缓存( 缓存计算结果 )，只有当它所依赖的响应式数据发生变化时才会重新计算，这意味着在模板中多次访问同一个计算属性时，只会计算一次

例：

<!-- src/App.vue -->
<template>
  <p>{{ fullName }}</p>
  姓：<input type="text" v-model="firstName"><br>
  名：<input type="text" v-model="lastName">
</template>

<script>
export default {
  data() {
    return {
      firstName: '王',
      lastName: '五'
    }
  },
  computed: {
    // fullName 可以简写为一个函数, 例如：fullName() { //访问 fullName 时，执行此处 }
    fullName: {
      // 访问 fullName 时，执行 get() 
      // get 中 return 的值为计算结果，它会根据其依赖的数据进行缓存
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // 修改 fullName 时，执行 set()
      set(value) {
        let [firstName, lastName] = value.split(' ')
        this.firstName = firstName
        this.lastName = lastName
      }
    }
  }
}
</script>

/* src/main.js */
import { createApp } from 'vue'
// 导入根组件
import App from './App.vue'

const app = createApp(App)

const vm = app.mount('#app')

// 修改 fullName
// vm.fullName = '李 四'

`watch` 侦听器

Vue 的 watch 选项可以用来监听某个属性的变化，并在属性变化时执行相应的操作

当你需要在数据发生变化时执行异步或复杂的操作，或者需要在数据变化后执行一些特定的逻辑时，可以使用 watch

例：

<!-- src/App.vue -->
<template>
  <h2>今天天气很{{ info }}</h2>
  <button @click="changeWeather">切换天气</button>
</template>

<script>
export default {
  data() {
    return {
      isHot: true
    }
  },
  computed: {
    info() {
      return this.isHot ? '炎热' : '凉爽'
    }
  },
  methods: {
    changeWeather() {
      this.isHot = !this.isHot
    }
  },
  watch: {
    // isHot 可以简写为一个函数, 例如：isHot() { //isHot 发生变化时执行此处 }
    isHot: {
      // 当 isHot 被修改时执行 handler 函数
      handler(newValue, oldValue) {
        console.log('isHot 被修改了', newValue, '->', oldValue);
      }
    }
  }
}
</script>

watch 侦听器还支持一些配置选项，常用的有：

immediate: 值为 true 时，会在组件初始化时会先调用一次 handler 函数。默认值为 false
deep: 默认 watch 无法监听数组或对象内部数据的变化，当 deep 的值为 true 时，就可以深度递归监听数组或对象内部值的变化。默认值为 false

`v-show` 指令

描述：用于根据条件动态的显示与隐藏元素，当表达式的值为 false 时元素的 style 就会加上 display: none

<!-- src/App.vue -->
<template>
  <button @click="toggle">Toggle</button>
  <div v-show="isVisible">I am visible</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

`v-if` 指令

描述：用于根据条件动态地渲染/销毁元素或组件。它根据表达式的值来决定是否渲染元素，它的语法为：v-if="条件"

v-if 还可以配合 v-else-if 和 v-else 指令来实现多条件处理

例：

<!-- src/App.vue -->
<template>
  <!-- 当 type 为 A 时渲染 -->
  <div v-if="type === 'A'">这是类型 A</div>
  <!-- 当 type 为 B 时渲染 -->
  <div v-else-if="type === 'B'">这是类型 B</div>
  <!-- 当 type 既不为 A 也不为 B 时渲染 -->
  <div v-else>这是其他类型</div>
  <!-- 切换 type 的按钮 -->
  <button @click="changeType('A')"> A </button>
  <button @click="changeType('B')"> B </button>
  <button @click="changeType('O')"> O </button>
</template>

<script>
export default {
  data() {
    return {
      type: 'A'
    }
  },
  methods: {
    changeType(type) {
      this.type = type
    }
  }
}
</script>

`v-for` 指令

描述：用于渲染列表数据，它可以将一个数组或一个对象在页面中响应式的渲染为多个相同结构的元素

语法：v-for="value in items" or v-for="(value, key) in items"

例1：

<!-- src/App.vue -->
<template>
  <ul>
    <h2>人员列表（数组）</h2>
    <!--
      如果数组元素的顺序发生变化, 可能会导致重复渲染, 甚至出现错位渲染的情况
      因此遍历数组时, :key 值建议为数组成员中的唯一值(id)
    -->
    <!-- element 为数组的每个元素, index 为数组的索引 -->
    <li v-for="(element, index) in persons" :key="element.id">
      {{ element.name }}-{{ element.age }}
    </li>
  </ul>

  <ul>
    <h2>汽车信息（对象）</h2>
    <!-- value 为对象属性的值, key 为对象中属性的名称 -->
    <li v-for="(value, key) in car" :key="key">
      {{ key }}-{{ value }}
    </li>
  </ul>

  <ul>
    <h2>遍历一个字符串</h2>
    <!-- char 为字符串中的每个字符, index 为每个字符的索引 -->
    <li v-for="(char, index) in string">
      {{ char }}-{{ index }}
    </li>
  </ul>

  <ul>
    <h2>遍历指定次数（5次）</h2>
    <!-- 遍历数字 1-5, number 为遍历的数字, index 为该数字的索引 -->
    <li v-for="(number, index) in 5">
      {{ number }}-{{ index }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      persons: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 19 },
        { id: 3, name: '王五', age: 20 }
      ],
      car: {
        name: '宝马xxx',
        price: 'xx万',
        color: '白色'
      },
      string: 'HelloVue'
    }
  }
}
</script>

key 属性的作用：

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新所有的元素，确保它们在原本指定的索引位置上渲染。默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况

key 属性可以帮助 Vue 在列表项更新时准确、高效地识别每个元素，避免不必要的重新渲染。具体来说，key 提供了一个唯一标识，使 Vue 在数据变化时能更智能地对比新旧元素，从而进行最小化的 DOM 渲染

例2：

<!-- src/App.vue -->
<template>
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <button @click="sortType = 2">年龄升序</button>
  <button @click="sortType = 1">年龄降序</button>
  <button @click="sortType = 0">原顺序</button>
  <ul>
    <li v-for="e in filPersons" :key="e.id">
      {{ e.name }} - {{ e.age }} - {{ e.sex }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      keyWord: '',
      sortType: 0,
      persons: [
        { id: 1, name: 'Patricia', age: 28, sex: '女' },
        { id: 2, name: 'Jennifer', age: 22, sex: '女' },
        { id: 3, name: 'James', age: 30, sex: '男' },
        { id: 4, name: 'Robert', age: 19, sex: '男' }
      ]
    }
  },
  computed: {
    filPersons() {
      let arr = this.persons.filter(p => {
        return p.name.indexOf(this.keyWord) !== -1
      })
      if (this.sortType) {
        arr.sort((p1, p2) => {
          return this.sortType === 1 ? (p2.age - p1.age) : (p1.age - p2.age)
        })
      }
      return arr
    }
  }
}
</script>

`v-text` & `v-html` 指令

描述：用于更新 HTML 元素的内容

v-text 是将元素的 textContent 设置为指定的值
v-html 是将元素的 innerHTML 设置为指定的值

注意：由于 v-html 指令将字符串作为 HTML 直接解析，因此要确保绑定的数据是可信的。在使用 v-html 指令时，应该避免将用户输入的内容直接插入到 HTML 中，以防止 XSS( 跨站脚本攻击 ) 等安全问题

`v-cloak` 指令

描述：用于解决 Vue 编译过程出现的闪烁问题。通常与 CSS 配合使用，可以确保在 Vue 实例完全编译之前，元素不会出现 Vue 插值表达式( {{xxx}} )

例：

<!-- src/App.vue -->
<template>
  <!-- 当 Vue.js 加载完成并创建应用实例完成挂载后 v-cloak 属性会被 Vue 自动删掉 -->
  <h1 v-cloak>{{message}}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'v-cloak'
    }
  }
}
</script>

<style>
[v-cloak] {
  display: none;
}
</style>

`v-pre` 指令

描述：用于跳过当前元素和其子元素的模板编译过程。这意味着你不能在 v-pre 标记的元素上使用 Vue指令和插值语法

例：

<!-- src/App.vue -->
<template>
  <!-- 跳过静态元素(没有使用Vue指令和模板语法的元素)的模板编译过程, 可以加快编译速度 -->
  <h1 v-pre>public element</h1>
  <p>{{message}}</p>
</template>

Vue.js (二) 基础API

v-bind 指令

1. 动态绑定元素属性

2. 动态绑定元素class, 对象语法

3. 动态绑定元素class, 数组语法

4. 动态绑定元素style, 对象语法

5. 动态绑定元素style, 数组语法

v-model 指令

v-on 指令

computed 计算属性

watch 侦听器

v-show 指令

v-if 指令

v-for 指令

v-text & v-html 指令

v-cloak 指令

v-pre 指令