Vue.js知识库（二）：Vue实例、模板语法、计算属性和侦听器

Vue实例介绍、模板语法、计算属性和侦听器。

200阅读 · 2020-8-23 00:24发布

Vue实例

Vue实例配置

Vue应用是通过Vue函数创建一个Vue实例。代码如下：

var vm = new Vue({
  // 选项
})

该实例的属性变化会影响视图中的内容。

使用Object.freeze()方法，可以阻止属性被修改。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

Vue实例内置了一些实例property和方法，可以使调用更方便。

所有实例property和方法：https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property
$data：代表实例中的data属性。
$el：代表实例中el属性，获取页面中对应的元素。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

实例生命周期钩子

每个Vue实例在创建过程中，都会运行一些叫做“生命周期钩子”的函数。

生命周期钩子文档：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

可以在实例中添加生命周期钩子函数，在其中加入自己想要添加的逻辑代码（使其可以在对应阶段执行）。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
    console.log('a is: ' + this.a)
  }
})
// 输出 "a is: 1"

生命周期图示

模板语法

文本

“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

v-once指令，可以使节点内的数据绑定一次性的插值，不会随着改变而更新。

<span v-once>这个将不会改变: {{ msg }}</span>

原始html

使用v-html指令可以显示原始html内容。

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

属性

“Mustache”语法 (双大括号) 不能用在HTML标签的属性上，属性需要使用数据绑定可以使用v-bingd指令。

<div v-bind:test="dynamicId"></div>

如果“test”的值是 null、undefined 或 false，则标签内不会显示该属性。

JavaScript表达式

“Mustache”语法 (双大括号)支持JavaScript表达式（只支持单个表达式）。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

指令

v-bind

v-bind指令可以响应式的更新HTML attribute。

//表示href的值和表达式url的值绑定
<a v-bind:href="url">...</a>

v-on

v-on指令用于监听DOM事件。

// 表示监听该a标签的click事件，动作和值doSomething绑定
<a v-on:click="doSomething">...</a>

动态参数

2.6.0开始，可以使用方括号括起来的JavaScript表达式作为指令的参数。

//这里会求attributeName的值，然后等同于绑定了计算之后的值
<a v-bind:[attributeName]="url"> ... </a>

当方括号中的值为null或空，此时绑定不会显示。
任何非字符串类型的值都将会触发一个警告。
动态参数存在语法约束，某些字符（例如空格和引号）放在HTML attribute 名里是无效的。（如果需要复杂的表达式，可以使用计算属性）
```

  <a v-bind:['foo' + bar]="value"> ... </a>
```
浏览器会将attribute名全部强制转为小写。

缩写

vue给最常用的v-bind和v-on提供了特定缩写：

指令	缩写	示例
v-bind	:	`<a :href="url">...</a>`
v-on	@	`<a @click="doSomething">...</a>`

计算属性和侦听器

计算属性介绍

模板内表达式支持简单的JavaScript表达式运算，但是放入过多的逻辑会使得模板过重且难以维护。

所以如果需要进行复杂的逻辑，应该使用计算属性。

计算属性的使用

代码示例

<div id="example">{{ reversedMessage }}</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var data = {
        abc: 'http://www.baidu.com',
        href: '',
        message:"hello"
    }
    var vm = new Vue({
        el: '#example',
        data: data,
        computed:{
            reversedMessage: function() {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

计算属性缓存和方法

{{ reversedMessage }}	{{ reversedMessage() }}
计算属性	计算属性方法
相关响应式依赖发生改变时才会重新求值	触发重新渲染时，会再次执行函数

计算属性的setter

计算属性中默认有getter，可以添加setter方法。如下方法在使用vm.fullName = 'John Doe'时，vm.firstName 和 vm.lastName也会被更新。

<div id="example">
mesage:{{ fullName }}<br>
firstName:{{firstName}}<br>
lastName:{{lastName}}

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var data = {
        firstName: "none1",
        lastName: "none2"
    }
    var vm = new Vue({
        el: '#example',
        data: data,
        computed:{
            fullName: {
                get:function() {
                    return this.firstName + ' ' + this.lastName
                },
                set: function(newValue){
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        }
    })
</script>

侦听器

当需要在数据变化时执行异步或开销较大的操作时，建议使用侦听器watch。

示例代码：

<div id="example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var data = {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
    }
    var vm = new Vue({
        el: '#example',
        data: data,
        watch:{
            question: function (newQuestion, oldQuestion) {
                  this.answer = 'Waiting for you to stop typing...'
                  // this.debouncedGetAnswer()
                }
        }
    })
</script>