vue3 Vm对象提供的选项API
Vm对象提供的选项API
所谓的选项API就是在实例化vm对象时，往createApp中传递进行选项参数，例如，我们已经使用过的data或者methods就是选项api。
3.1 过滤器
Vue3.0已经被淘汰了过滤器这个选项，所以我们这里使用2.6.11版本来完成代码的编写。
过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。
定义过滤器的方式有两种：全局过滤器和局部过滤器。
3.1.1 使用Vue.filter()进行全局定义
js/filters.js，代码：
// 全局范围定义的过滤器
Vue.filter("money1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v
}
return v.toFixed(2)+"元"
})
// 定义一个全局过滤器，定义在vm对象的外部，提供给整个项目都可以调用。
// Vue.filter("过滤器函数名", 匿名函数);
Vue.filter("money", (data)=>{
return `${data.toFixed(2)}元`
})
在vm对象中通过filters选项api来局部定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="../js/vue@2.7.8.js"></script> <script src="../js/filter.js"></script> </head> <body> <div id="app"> <p>{{price|money}}</p> <p>{{price|mon}}</p> <p>{{money_format(price)}}</p> </div> </body> <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> </html>
计算属性和侦听属性
3.2.1 计算属性
所谓的计算属性，是vue提供给我们开发者用于编写代码时保存计算出新的数据结果的变量。主要通过computed选项进行声明的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></script> </head> <body> <div id="app"> <input type="text" size="1" v-model.number="num1">+ <input type="text" size="1" v-model.number="num2">={{result}} <hr> <input type="text" size="1" v-model="result"> </div> </body> <script> var vm = Vue.createApp({ data(){ return{ num1:10, num2:10, } }, computed:{ // 计算属性选项API，里面的成员就是一个属性方法，用于保存在vm中其他变量的计算结果 result(){ return this.num1+this.num2; } } }).mount("#app") </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></script> <style> .table{ border-collapse: collapse; border: 1px solid red; width: 600px; } .table td,table th{ border: 1px solid red; height: 40px; line-height: 40px; font-size: 12px; text-align: center; } .bg{ background-color: orange; } </style> </head> <body> <div id="app"> <p>循环显示对象属性</p> <table class="table"> <tr> <th>序号</th> <th>商品名字</th> <th>价格</th> <th>购买数量</th> <th>单品统计</th> </tr> <tr v-for="(goods,key) in goods_list" :class="{bg: goods.price>100}"> <td>{{key+1}}</td> <td>{{goods.name}}</td> <td>{{goods.price}}</td> <td> <button @click="sub(goods)">-</button> <input type="text" size="1" v-model="goods.num"> <button @click="goods.num+=10">+</button> </td> <td>{{goods.num * goods.price}}</td> </tr> </table> <p>总结:{{total}}</p> </div> </body> <script> var vm = Vue.createApp({ data(){ return { goods_list: [ {"name":"python入门","price":150,num: 0}, {"name":"python进阶","price":100,num: 0}, {"name":"python高级","price":75,num: 0}, {"name":"python研究","price":60,num: 0}, {"name":"python放弃","price":110,num: 0}, ] } }, computed: { //计算属性选项 total(){ let res = 0; for(let goods of this.goods_list) res += goods.num * goods.price return res; } }, methods: { sub(goods){ goods.num-=10; if(goods.num<0){ goods.num = 0; } } } }).mount("#app") </script> </html>
侦听属性
侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></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><br> 口令：<input ref="password" type="text" v-model="password"><br><br> </div> </body> <script> var vm = Vue.createApp({ data(){ return { username: "", password: "" } }, watch: { // 侦听选项API 成员就是data变量名 username(new_data, old_data){ //侦听data中的username console.log(`old_name=${old_data},new_old=${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_value, old_value){ // 参数为：修改前的变量值以及修改后的变量值 if(/^\d+$/.test(this.password)){ this.$refs.password.style.border="1px solid red"; }else{ this.$refs.password.style.border="1px solid blue"; } }, }, methods: { check_username(){ console.log("check_username执行了。") }, } }).mount("#app") </script> </html>
vm对象的生命周期
每个vm对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同时间阶段加上我们需要的自动执行代码，就实现特定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></script> <style> </style> </head> <body> <div id="app"> <p ref="p1">{{message}}</p> <input type="text" v-model="message"> </div> </body> <script> var vm = Vue.createApp({ data(){ return { message: 'hello', } }, beforeCreate(){ // 当前函数执行时,vm还没有初始化完成。 console.log("beforeCreate>>>",this); 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> </html>
总结：
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。
例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
指令修饰符
指令修饰符，用于编写在vue执行之后的补充符号，作用是增强当前指令或给当前指令进行功能的调整的。
v-model的指令修饰符。
事件指令的修饰符使用.stop和.prevent
.prevent 用于阻止页面跳转，用于a标签和form标签下的button
.stop 用于阻止事件继续冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></script> <style> </style> </head> <body> <div id="app"> <div @click="show('div')"> <button @click.stop="show('button')">点击</button> <a href="http://www.baidu.com" @click.stop.prevent="show('a')">点击</a> </div> </div> </body> <script> // 子元素的同类事件触发以后，会自动触发父类元素的同类事件，这就是事件冒泡。 // @事件名.stop 用于阻止事件冒泡 // @事件名.prevent 用于阻止标签本身拥有的页面跳转功能，例如：a标签被点击，form标签提交表单 var vm = Vue.createApp({ data(){ return { } }, methods: { show(msg){ console.log(`${msg}被点击了`) } } }).mount("#app") </script> </html>
浙公网安备 33010602011771号