Vue 学习笔记

Vue.js 学习笔记

数据绑定

  通常用”Mustache”语法(双大括号),<span></span>

Mustache 属性不能再HTML中使用,在HTML元素中需要使用v-bind指令. <a v-bind:href="url"></a>

以上列子,冒号后面是指元素的属性,而url这是该元素的属性值

v-bind缩写 <a :href="url"></a>

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

v-bind 绑定class,style

v-bind 绑定html中的classstyle,有一下方法:

  • 对象语法

    1
    <div id="app" :class="{ active: isActive, 'text-danger' :hasError}"></div>
    1
    2
    3
    4
    5
    6
    7
    var vm = new Vue({
    el: "#app",
    data:{
    isActive: true,
    hasError: true
    }
    })

    active属性的启用取决于isActive是否为ture,text-danger同理。

    也可以在v-bind属性传入一个obj

    1
    <div id="app2" :class="classObj"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var vm = new Vue({
    el: "#app2",
    data: {
    classObj:{
    active:true,
    'text-danger': false //class类名可以用''包裹,或者不用。
    }
    }
    })
  • 数组语法

    可以在数组语法中使用对象语法!

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

    这里的errorClassclass属性会始终存在div中,而active则由isActive的值是否为ture


计算属性(computed)与计算函数(methods)

  1. computed 是有缓存的.
  2. methods 没有缓存,渲染一次执行一次.

v-on 事件处理器

v-on 指令监听DOM事件来触发一些JavaScript代码。

  • 监听事件
1
2
3
4
<div id="example">
<button v-on:click="num += 1">点我~</button>
<p>点了{{ num }}次咯~</p>
</div>
1
2
3
4
5
6
var vm = new Vue({
el: "#example",
data: {
num: 0
}
})
  • 方法事件

v-on可以接受一个自定义的方法来调用

1
2
3
<div id="example-2">
<button @click="meathder">{{ message }}</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
var em = new Vue({
el: "#example-2",
data: {
message: "*-*"
}
methods: {
meathder: function() {
alert('666哇!')
this.message = "$_$"
}
}
})
  • 按键修饰符

    1
    2
    3
    4
    5
    6
    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.13="submit">
    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">