Vue学习笔记

模板语法

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

1
2
3
4
5
6
7
8
9
10
<div id="app">
{{ message }}
<!-- 可以写单行js表达式 ,表达式太过复杂的话建议使用vue的计算属性-->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
</div>

<!--直接插入html渲染-->
<span v-html="rawHtml"></span>

v-bind 属性绑定

1
2
3
4
5
6
<!-- 在绑定class与style属性时,后面的"message"很灵活,可以是obj,数组等多种形式 -->
<span v-bind:title="message">
<!--动态属性名-->
<span v-bind:[attributeName]="message">
<!-- 简写 -->
<span :title="message">

v-on 绑定事件

1
2
3
4
5
6
7
<button v-on:click="reverseMessage">点击调用reverseMessage()</button>
<!--动态事件名-->
<button v-on:click="reverseMessage">点击调用reverseMessage()</button>
<!-- 简写 -->
<button @click="reverseMessage">点击调用reverseMessage()</button>
<!--修饰符-->
<form v-on:submit.prevent="onSubmit">...</form>

v-model 绑定表单输入

1
<input v-model="message">

v-if v-for 条件与循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 与v-show的区别是v-show始终都会渲染在DOM中,只是不展示(display属性)-->
<!--一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。-->
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>

<!--index自带属性,表示下标-->
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>

<!--对obj进行循环,建议在循环时加上key属性方便进行跟踪 -->
<div v-for="(value, name, index) in object" v-bind:key="item.id">
{{ index }}. {{ name }}: {{ value }}
</div>

key属性管理标签的唯一性

1
2
3
4
5
6
7
8
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>

Vue实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var vm = new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString(),
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}

// 计算属性 {{ fullName }}
// 计算属性可以用方法代替{{ function() }},二者的区别在于前者使用缓存(当响应式依赖不发生改变时)
// 后者每次渲染都会重新调用,按业务需求选择哪一种方法
// 另外,计算属性默认是get函数 ,也能设置set函数
computed: {
// 计算属性的 getter
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}

// 监听属性,当firstName,lastName发生改变时,function就会调用
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}

methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}

// 钩子函数 创建之后调用
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}


})

// 访问data内数据
vm.message
// 访问Vue实例属性
vm.$el
vm.$data