Vue-js-文档学习记录（二）- 数据绑定

Share

插值

1.插入文本

双括号插值法“Mustache” 语法（双大括号）

1
<div>{{ msg }}</div>

v-once 指令能执行一次性地插值，当数据改变时，插值处的内容不会更新

1
<span v-once>This will never change: {{ msg }}</span>

2.插入纯 HTML

v-html 指令能输出真正的 HTML

1
<div v-html="vHtml"></div>

3.绑定属性

v-bind 指令绑定元素属性

1
<div v-bind:id="uId"></div>

4.使用 JavaScript 表达式

可以使用 JavaScript 表达式数据绑定

1
2
3
4
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

指令

1.参数

一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

1
2
<a v-bind:href="url"></a>       //href 就是v-bind 的参数，给元素绑定href 属性
<a v-on:click="doSomething">    //click 也是参数

2.过滤器

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
以下实现绑定的数据首字母大写
{{ message | capitalize }}
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

3.缩写

v-bind 缩写

1
2
3
4
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

1
2
3
4
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

Class 与 Style 绑定

绑定Class

常用绑定

v-bind :class 可简写 :class，并且和原有的 class 不冲突

1
<div :class="className"></div>

对象绑定

1
<div :class="{ active: isActive }"></div>         //isActive为真值 绑定active

三目运算符

1
<div :class=" followed ? 'btn-success' : 'btn-failure' "></div>

绑定Style

v-bind :style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式或短横分隔命名：

1
2
3
4
5
6
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，让模板更清晰：

1
2
3
4
5
6
7
8
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

计算属性

computed 函数处理复杂逻辑的计算，计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取，值只须为函数
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // -> 2
vm.aPlus = 3
vm.a       // -> 2
vm.aDouble // -> 4

监听数据Watch

Vue 提供一个通用的方法通过, watch 选项来响应数据的变化。

1
2
3
4
5
watch: {
    Amount: function (val, oldVal) {
      this.getChange()          // 如果 Amount 发生改变，这个函数就会运行
    }
  },