本文最后更新于：2023年6月25日 晚上
Vue2.x 文档笔记-1
数据与方法
让对象不再响应
如果想让某一个对象不再进行响应式，可以用Object.freeze()方法。
有用的$watch方法
Vue实例暴露了一些有用的实例属性与方法，就是带有前缀$的那些（这样以便与用户定义的属性区分开来）。
这其中有一个很有用的：$watch方法，它可以观察一个变量的变化，然后执行一个回调函数。
1
2
3
| vm.$watch('message', function(newVal, oldVal){
console.log(newVal, oldVal);
});
|
条件渲染
v-if
v-if指令用于条件性地渲染一块内容，这块内容只会在指令地表达式返回truthy值得时候被渲染（比如内容是一条文本，表达式返回true时就“看得见”这条文本，返回false时就“看不见”）
注意v-if是决定是否渲染这一块内容，而不是是否显示这一块内容，更多相关信息请看下面的v-show小节。
1
| <span v-if="type === 'A'">This is a text.</span>
|
此外，vue还提供了v-else和v-else=if指令。
如果我们需要切换多个元素，可以在那些能包裹多个元素的元素上使用v-if指令，比如：<div>和<template>元素。
vue会复用已有的元素而不是从头开始渲染，如果要告诉vue这两个元素是完全独立的，请不要复用它们，那么可以给这个元素添加一个具有唯一值的key attribute：
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>
|
在上面的代码中，只有label元素被复用，而input元素则在每次切换时被重新渲染。
不推荐同时使用v-if和v-for。请查阅风格指南以获取更多信息。——官方文档
v-show
这个指令也是根据条件来展示元素，不过和v-if不同的是，带有v-show指令的元素始终会被渲染并保留在DOM中，v-show 只是简单地切换元素的 CSS property display。（也就是说页面上是已经加载出来这个元素了，只不过看不见）
1
2
3
| <h1 v-show="ok">
Hello!
</h1>
|
注意，v-show不支持<template>元素。
小结
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
表单输入绑定
v-model
使用v-model指令来在表单的<input>、<select>等元素上创建双向数据绑定。它负责监听用户的输入事件以更新数据，而且会根据控件类型自动选取正确的方法来更新元素。只要知道表单元素应该是都能用这个进行数据绑定就对了。
下面的代码是一份大杂烩代码：
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="example-1">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{ message2 }}</p>
<br />
<div style="margin-top:30px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<div style="margin-top:30px;">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<div style="margin-top: 20px; margin-bottom: 20px;">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<div style="margin-top: 20px; margin-bottom: 20px;">
<input v-model.number="age" type="number"/>
</div>
<button type="button" @click="submit">提交</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
message : "test",
message2 :"hi",
checkedNames : ['Jack', 'John'],
picked : "Two",
selected: "A",
options: [
{ text: 'One', value: 'A'},
{ text: 'Two', value: 'B'},
{ text: 'Three', value: 'C'},
],
age: 0,
},
methods: {
submit : function () {
console.log(this.message);
var postObj = {
msg2 : this.message2,
names : this.checkedNames,
picked : this.picked
};
console.log(postObj);
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
|
修饰符
.lazy
如果想让v-model在change事件而不是input事件触发后进行数据同步，那就添加lazy修饰符。
.number
如果想自动将用户的输入值转为数值类型，就添加.number修饰符
.trim
如果要自动过滤用户输入的首尾空白字符，就添加.trim修饰符
生命周期
有了生命周期钩子，就使得在Vue运行的每个阶段，我们都能够来添加并执行一些代码。
比如created钩子，会在实例创建完成后被立即同步调用，在这一步中，实例已完成对选项的处理，数据帧听、计算属性、方法、事件/侦听器的回调函数都被配置完毕。示例代码如下：
1
2
3
4
5
6
7
8
9
| new Vue({
data: {
message: "Created!"
},
created: function () {
console.log(this.message)
}
})
|
不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。——官方文档
模板语法
插值
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
1
| <span>Message: {{ msg }}</span>
|
还可以使用v-once指令让其变为一次性插值，即使数据改变，插值也不会更新：
1
| <span v-once>Message: {{ msg }}</span>
|
原始HTML
我们可以使用v-html指令来输出原始HTML：
1
| <p>Using v-html directive: <span v-html="rawHtml"></span></p>
|
v-bind动态绑定attribute
v-bind指令允许我们动态地绑定某个html标签所具有的属性：
1
| <button v-bind:disabled="isButtonDisabled">Button</button>
|
使用JavaScript表达式
对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持：
1
2
3
4
5
6
7
| {{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
|
但是要注意，每个绑定都只能包含单个表达式。
指令
指令就是带有v-前缀的attribute，而指令attribute的值预期是单个JavaScript表达式（v-for例外）。当表达式的值改变时，指令会将其产生的连带影响，响应式地作用于DOM。
参数
一些指令能够接受一个“参数”，在命令之后以冒号表示，比如：v-bind、v-on指令。
动态参数
直接看例子：<a v-bind:[attributeName]="url">...</a>，如果attributeName="href"，那么这里前面的标签就等价于：<a v-bind:href="url">...</a>，这就是动态参数。
修饰符
修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。我们在前面的表单输入绑定的修饰符小节已经见过了适用于v-model的修饰符。
缩写
Vue为v-bind和v-on这两个最常用的指令，提供了特定简写：
v-bind缩写
v-on缩写
1
| <a @click="doSomething">...</a>
|
希望本文章能够帮到您~