一 vm对象的生命周期
每个vm对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同时间阶段加上我们需要的自动执行代码，就实现特定的功能。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p ref="p1">{{message}}</p>
<input type="text" v-model="message">
</div>
<script>
var vm = Vue.createApp({
data(){
return {
message: "hello",
}
},
beforeCreate(){
// 当前函数执行时,vm还没有初始化完成。
console.log("beforeCreate>>>", this.$data);
console.log("beforeCreate>>>", this.$el);
console.log("beforeCreate>>>", this.$refs);
},
created(){
// 当前函数执行时，vm对象已经初始化完成
console.log("created>>> $data=", this.$data); // 此时data选项中的数据已经被注入到vm对象中
console.log("created>>> $el=", this.$el);
console.log("created>>> $refs=", this.$refs);
// 在开发中，我们可以在这个函数中进行初始化数据相关的操作，例如：使用ajax从服务器中读取数据，并赋值给data
},
beforeMount(){
// 已经把对应的vue语法的变量替换成了html内容了，但是并没有挂载到el标签的内容中
console.log("beforeMount>>> $el=", this.$el);
console.log("beforeMount>>> template=", this.$options.template);
console.log("beforeMount>>> $refs=", this.$refs);
},
mounted(){
// vue生成的HTML内容已经挂载到了$el属性中
console.log("mounted>>>", this.$el);
console.log("mounted>>>", this.$refs);
},
beforeUpdate(){
// 变量更新前，data选项中的数据发生了改变，但是没有重新生成虚拟DOM，所以HTML中的变量值没有被同步
console.log("beforeUpdate>>>", this.$data);
console.log("beforeUpdate>>>", this.$el.parentElement.innerHTML);
// 修改数据前，判断本次修改是否合法?发送ajax，
},
updated(){
// 变量更新后，html内容已经与data选项中的数据同步了，因为重新生成了虚拟DOM
console.log("updated>>>", this.$el.parentElement.innerHTML);
// 修改数据后，发送ajax，同步数据库
}
}).mount("#app")
</script>
</body>
</html>
vm对象生命周期的钩子函数
说明
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。 mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。 另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
二 过滤器【Vue3.0已淘汰过滤器选项】
Vue3.0已经被淘汰了过滤器这个选项，所以以下使用2.6.11版本来完成代码的编写。
过滤器，是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。定义过滤器的方式有两种：全局过滤器和局部过滤器。
2.1 使用Vue.filter进行全局定义
./assets/filter.js
// 定义一个全局过滤器，定义在vm对象的外部，提供给整个项目都可以调用。 // Vue.filter("过滤器函数名", 匿名函数); Vue.filter("money", (data)=>{ return `${data.toFixed(2)}元` })
2.2 在vm对象中通过filters选项api来局部定义
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="./assets/vue@2.7.8.js"></script>
<script src="./assets/filter.js"></script>
</head>
<body>
<div id="app">
<p>{{price|money}}</p>
<p>{{price|mon}}</p>
<p>{{money_format(price)}}</p>
</div>
<script>
var vm = new Vue({ // 相当于vue3.x的 Vue.createApp()
el: "#app", // 相当于vue3.x的mount绑定视图方法
data(){
return {
// message: "hello, vue2.x",
price: 3.55555
}
},
methods: {
money_format(data){ // 过滤器完全可以被methods选项中定义的函数所代替，所以在vue3.x以后成为了废弃特性
return `￥${data.toFixed(2)}`
}
},
filters: { // 局部过滤器，是当前vm对象的属性方法存在，所以无法被外界使用
mon(data){
return `￥${data.toFixed(2)}`
}
}
})
</script>
</body>
</html>
filter选项api定义
三 计算属性和侦听属性
3.1 计算属性
计算属性，是vue提供给我们开发者用于编写代码时保存计算出新的数据结果的变量。主要通过computed选项进行声明的。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="num1">+
<input type="text" v-model.number="num2">={{result}}
</div>
<script>
var vm = Vue.createApp({
data(){
return{
num1:10,
num2:20,
}
},
computed: {
result(){
return this.num1 + this.num2
}
}
}).mount("#app")
</script>
</body>
</html>
计算属性computed
3.2 侦听属性
侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
input{
outline: none;
border: 1px solid #333;
}
</style>
</head>
<body>
<div id="app">
账号：<input ref="username" type="text" v-model="username" @blur="check_username"><br>
密码：<input ref="password" type="text" v-model="password"><br>
</div>
<script>
var vm = Vue.createApp({
data(){
return{
username:"",
password:"",
}
},
methods: {
check_username(){
console.log("check_username执行了。")
}
},
watch: {
username(new_data, old_data) {
console.log(`old_data>>${old_data},new_data>>${new_data}`)
let length = this.username.length;
if (length > 6 && length < 16) {
this.$refs.username.style.border = "1px solid blue";
} else {
this.$refs.username.style.border = "1px solid red";
}
},
password(new_vuale, old_value) {
if (/^\d+$/.test(this.password)) {
this.$refs.password.style.block = "1px solid red";
} else {
this.$refs.password.style.block = "1px solid blue";
}
}
},
}).mount("#app")
</script>
</body>
</html>
侦听属性watch
四 指令和事件修饰符
4.1 常用指令
| 指令 | 描述 |
| v-model.trim | 用于去除字符串两边的空白字符，常用于密码 |
| v-model.lazy | 用于减少触发watch侦听选项的频率，从原来的input输入事件的侦听切换成了change值改变事件的监听 |
| v-model.number | 表示把变量作为数值来进行转换提取，能转的都会转换 |
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input type="password" v-model.trim="password"><br>
<input type="text" v-model.lazy="mobile"><br>
<input type="text" v-model.number="num">+500=<span>{{ num+500 }}</span>
</div>
<script>
const vm=Vue.createApp({
data(){
return{
passsword: " ",
mobile:"",
num:0,
}
} ,
watch:{
passsword(){
console.log(this.passsword);
},
mobile(){
console.log("发送http请求验证手机号是否在服务端注册了");
console.log(this.mobile)
}
}
}).mount("#app");
</script>
</body>
</html>
v-model示例
4.2 事件修饰符
子元素的同类事件触发以后，会自动触发父类元素的同类事件，这就是事件冒泡。
| 事件修饰符 | 描述 |
| @事件名.stop | 用于阻止事件冒泡 |
| @事件名.prevent | 用于阻止标签本身拥有的页面跳转功能，例如：a标签被点击，form标签提交表单 |
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div @click="show('div')">
<button @click.stop="show('button')">点击</button>
<a @click="show('a')" href="http://www.baidu.com">点击</a>
</div>
</div>
<script>
var vm=Vue.createApp({
data(){
return{
}
},
methods: {
show(msg){
console.log(`${msg}被点击了`)
}
}
}).mount("#app")
</script>
</body>
</html>
事件修饰符.stop和.prevent
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
