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和方法,可以使调用更方便。

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实例在创建过程中,都会运行一些叫做“生命周期钩子”的函数。

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

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>