Vue.js入门学习笔记基础

作者 Jackie Anxis 日期 2017-08-26
Vue.js入门学习笔记基础

基础

实例

构造器

受MVVM模式(Model–view–viewmodel )启发

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

属性和方法

  • 每个 Vue 实例都会代理data 对象里所有的属性

    var data = { a: 1 }
    var vm = new Vue({
    data: data
    })
    vm.a === data.a // -> true
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3
  • $区分了vue实例自身的属性方法

    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 (newVal, oldVal) {
    // 这个回调将在 `vm.a` 改变后调用
    })

生命周期

  • 生命周期钩子(下图中的红色框部分)

Lifecycle

模板语法

插值(数据绑定)

对于所有数据绑定,都可以使用JavaScript的表达式(不是语句)

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
  • 文本:Mustache语法、v-once指令(只绑定一次)

    <span>Message: {{ msg }}</span>
    <span v-once>这个将不会改变: {{ msg }}</span>
  • HTML:将带有v-html的元素的内容(而不是元素本身)替换成其属性值rawHtml, Vue 不是基于字符串的模板引擎,替换后的DOM结构无法解析其数据绑定。

    <div id="vm">
    <div v-html="rawHtml"></div>
    </div>
    var vm = new Vue({
    el: '#vm',
    data: {
    msg: 'hello',
    rawHtml: '<p>{{msg}}</p>' // 无法解析,只会显示{{msg}}
    }
    })
  • 特性:mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用v-bind指令:

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

指令

v-if v-bind v-on

  • 参数:在指令名称之后以冒号表示。

    <a v-bind:href="url"></a>
    <a v-on:click="doSomething">
  • 修饰符(Modifiers):是以半角句号 . 指明的特殊后缀

    <!--对于触发的事件调用 event.preventDefault()-->
    <form v-on:submit.prevent="onSubmit"></form>

过滤器

过滤器可以用在两个地方:mustache 插值和 v-bind 表达式

第一个是传入的参数,后面是用于处理数据的函数。

可以多个过滤器串联。

过滤器函数也可以接受参数

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="message | filterA | filterB"></div>
<!-- message will be the 1st para -->
{{ message | filterA('arg1', arg2) }}
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})

缩写

Vue.js 为 v-bindv-on 这两个最常用的指令,提供了特定简写:

  • v-bind<a :href="url"></a>
  • v-on<a @click="doSomething"></a>

计算属性

其实就是定义一个getter函数,当其依赖的属性发生变化时被调用。当其依赖的属性未发生变化,那么它永远返回上一次计算的结果(计算属性是基于它们的依赖进行缓存的)。

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
  • 计算setter:

    computed: {
    fullName: {
    // getter
    get: function () {
    return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
    var names = newValue.split(' ')
    this.firstName = names[0]
    this.lastName = names[names.length - 1]
    }
    }
    }

Class和Style绑定

Class

  • 基本用法

    <div v-bind:class="{ active: isActive }"></div>
  • 多个类名

    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
  • 绑定对象

    <div v-bind:class="classObject"></div>
    data: {
    isActive: true,
    error: null
    },
    computed: {
    classObject: function () {
    return {
    active: this.isActive && !this.error,
    'text-danger': this.error && this.error.type === 'fatal',
    }
    }
    }
  • 绑定数组

    <div v-bind:class="[activeClass, errorClass]"></div>
    <!-- ↓渲染结果↓ -->
    <div class="active text-danger"></div>
    data: {
    activeClass: 'active',
    errorClass: 'text-danger'
    }
  • 数组嵌套对象

    <div v-bind:class="[{ active: isActive }, errorClass]">

Style