Amo Xiang
Amo Xiang

Vue全家桶之Vue基础(2)

目录

  • 1. Vue常用特性
    • 1.1 表单输入绑定
    • 1.2 自定义指令
    • 1.3 计算属性
      • 1.3.1 基本使用
      • 1.3.2 计算属性缓存 vs 方法
    • 1.4 侦听属性及侦听器
      • 1.4.1 基本使用
    • 1.5 过滤器
      • 1.5.1 基本使用
    • 1.6 音乐播放器
      • 1.6.1 功能演示
      • 1.6.2 前置知识
      • 1.6.3 示例代码
  • 2. 综合案例
    • 2.1 Vue之数组更新检测
      • 2.1.1 变更方法
      • 2.1.2 替换数组
      • 2.1.3 注意事项
    • 2.2 图书管理
      • 2.2.1 图书列表

1. Vue常用特性

1.1 表单输入绑定

在 Vue全家桶之Vue基础(1) 一文中我们已经学习过 v-model 的用法。我们可以用 v-model 指令在表单 、) 并不会生效，应用 v-model 来代替。

单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}label>

演示效果如下：
Vue全家桶之Vue基础(2)_第3张图片
多个复选框，绑定到同一个数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jacklabel>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">Johnlabel>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mikelabel>
<br>
<span>Checked names: {{ checkedNames }}span>

演示效果如下：

单选按钮：

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">Onelabel>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Twolabel>
<br>
<span>Picked: {{ picked }}span>

演示效果如下：

补充：

  1. 标记用于在表单元素中定义标签，这些标签可以对其他一些表单控件元素(如单行文本框、密码框等)进行说明。
  2. 标记可以指定 id/style/class 等核心属性，也可以指定 onclick 等事件属性。除此之外， 标记还有一个 for 属性，该属性指定 标记与哪个表单控件相关联。
  3. 虽然 标记定义的标签只是输出普通的文本，但 标记生成的标签还有一个另外的作用，那就是当用户单击 生成的标签时，和该标签关联的表单控件元素就会 获得焦点。也就是说，当用户选择元素所生成的标签时，浏览器会自动将焦点转移到和该标签相关联的表单控件元素上。
  4. 使标签和表单控件相关联主要有两种方式：
    1. 隐式关联
      使用 for 属性，指定 标记的 for 属性值为所关联的表单控件的 id 属性值。
    2. 显式关联
      将普通文本、表单控件一起放在标记内部即可。

选择框单选时：

 <select v-model="selected">
   <option disabled value="">请选择option>
   <option>Aoption>
   <option>Boption>
   <option>Coption>
 select>
 <span>Selected: {{ selected }}span>

演示效果如下：

如果 v-model 表达式的初始值未能匹配任何选项，