在开始学习Vue.js的时候，为了加深记忆，也为了日后在翻阅的时候可以快速找到自己想要的东西，特此在这里记录下我认为需要记录的知识点。在这里也分享给大家，希望可以给需要的你们提供一些帮助。具体内容还请看 Vue.js官网
双向数据绑定 指令：v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="你的名字" v-model="name">
<h1>你好，{{ name }}</h1>
</div>
<script>
var vm = new Vue({ // 实例里面写入各种的 选项
el: '#app', // 或者 el: document.getElementById('app')
data: {
name: '',
}
})
</script>
</body>
</html>
v-model 的修饰符：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>.lazy</h3>
<input type="text" v-model.lazy="message1">
<p>message1类型：{{ typeof message1 }}</p>
<p>{{ message1 }}</p>
<br>
<h3>.number</h3>
<input type="number" v-model.number="message2">
<p>message2类型：{{ typeof message2 }}</p>
<p>{{ message2 }}</p>
<br>
<h3>.trim</h3>
<input type="text" v-model.trim="message3">
<p>message3类型：{{ typeof message3 }}</p>
<p>{{ message3 }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message1: '',
message2: 123,
message3: '',
},
});
</script>
</body>
</html>
其中使用 .lazy 修饰时，在输入完成后需要失去焦点或点击回车才会显示出来。
常用的生命周期钩子：
var app = new Vue({
el: '#app',
data: {
a: 2,
},
created: function() {
console.log(this.a); // 2 // 这里的 this 指向的是调用它的 Vue 实例
},
mounted: function() { // Vue 提供了很多常用的实例属性和方法，都以 $ 开头
console.log(this.$el); // <div id="app"></div>
}
})7个数组变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
6个事件修饰符：.stop、.prevent、.capture、.self、.once、.passive