5.前端-Vue的高级功能
侦听器watch-methods包括了它的功能
效果图,在更改数量的时候总价随之变化,在超出库存的时候提示超出库存
正常使用函数进行调用
<!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.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in car"> {{item.name}}--商品价格:{{item.price}}--库存:{{item.stock}} 数量:<input type=number v-model="item.num"> </li> <li><strong>总价:</strong>{{getSum}}</li> <!-- 在使用<br/>时需要使用v-html --> <div v-html="warn()"></div> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let vm=new Vue({ el: "#app", data:{ car:[ {name:"华为",price:4999,stock:3,num:1}, {name:"小米",price:3999,stock:6,num:1} ]}, //和method效果一样,在调用的时候可以不用写() //每次当函数里使用过的数据改变时sum也会跟着改变 computed:{ getSum(){ let sum=0; this.car.forEach(element => { sum+=element.price*element.num }); return sum; } }, methods: { warn(){ let msg=""; this.car.forEach(item=>{ if(item.num>item.stock){ msg+=`${item.name}的库存超出限制<br/>` }} ) return msg; } }, }) </script> </body> </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.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in car"> {{item.name}}--商品价格:{{item.price}}--库存:{{item.stock}} 数量:<input type=number v-model="item.num"> </li> <li><strong>总价:</strong>{{getSum}}</li> <div v-html="message"></div> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { car: [{ name: "华为", price: 4999, stock: 3, num: 1 }, { name: "小米", price: 3999, stock: 6, num: 1 } ], //用于接受侦听器的数据 message: "" }, computed: { getSum() { let sum = 0; this.car.forEach(element => { sum += element.price * element.num }); return sum; } }, methods: { }, //侦听器 watch: { car: { handler(newvalue, oldvalue) { //置空 this.message = ""; this.car.forEach(item => { if (item.num > item.stock) { this.message += `${item.name}的库存超出限制<br/>` } }); },//因为是数组所以要启用深度侦听,适用于数组和对象 deep: true } } }) </script> </body> </html>
方法体中,只要有使用的变量发生变化就会调用,侦听器则是针对某一个变量更加有针对性
如果num在初始环境下就大于了库存,如果也想有提示信息的话就只能用方法来写了
过滤器filters---methods包括了它的方法
<!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.0"> <title>Document</title> </head> <body> <div id="app"> <ul > <li v-for="(item, index) in userlist" > {{item.name}}-{{item.age}}--{{item.gender|Gender}}--{{GetGender(item.gender)}} </li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let vm=new Vue({ el: "#app", data: { userlist: [ {name:"小吴",age:10,gender:0}, {name:"小红",age:10,gender:1}, {name:"小白",age:10,gender:2}, ] //当然方法也可以使用 },methods: { GetGender(gender){ if(gender==0){ return "~男" }else if(gender==1){ return "~女" }else{ return "~阴阳人" } } }, //过滤器 filters:{ Gender(gender){ if(gender==0){ return "男" }else if(gender==1){ return "女" }else{ return "阴阳人" } } } }) </script> </body> </html>
组件化--复用
全局组件,放在vue外面,所有的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.0"> <title>Document</title> </head> <body> <div id="app"> <xiaowu :sonnum="parentNum"></xiaowu> </div> <script src="./node_modules/vue/dist/vue.js"></script> <!-- 在使用组件的时候不要使用驼峰命名!!! --> <script> //组件也是vue实例在这里其实是app对象的子实例,要使用组件必须使用绑定app Vue.component("xiaowu",{ //data属性必须写成函数形式 data(){ return {num:10} }, //从父类中取值需要借助这个属性 //模板 点击就会++的模板 两个标签一个从自己接收,一个从Vue实例接收 //由于是嵌套解构在点击num的时候事件会冒泡影响到sonnum template:` <div @click="sonnum++">{{sonnum}} <div @click="num++">{{num}}</div></div>` ,props: ["sonnum"] }) new Vue({ el:"#app", data:{ parentNum:20 } }) </script> </body> </html>
局部组件,在vue里面声明,像这样写在外面清楚一点
Vue的生命周期
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.0"> <title>Document</title> </head> <body> <div id="app"> <div> <router-link to="/index">登陆</router-link> <router-link to="/product">商品</router-link> <router-view></router-view> </div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <!-- 引入路由 --> <script src="./node_modules/vue-router/dist/vue-router.js"></script> <script type="text/javascript"> let Index = Vue.component("index", { template: `<h1>欢迎来到宇智波联盟</h1>` }); let Product = VUe.component("product", { template: `<ul><li>1.小米</li><li>2.iphone</li></ul>` }); //绑定路由地址和组件 const router = new VueRouter({ routes: [{ path: "/index", component: Index },{ path: "/product", component: Product }] }) var vm = new Vue({ el: "#app", //名字相同可以省略 router: router }) </script> </body> </html>
脚手架
如何在脚手架中定义自己的页面
实现过程:
在components中创建XiaoWu.vue组件
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'helloword', data () { return { msg: '你好啊,小吴' } } } </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
在路由中导入组件
在helloworld里给到链接
装上axios
如果需要所有的东西都能使用axios那么需要把这两个注册为Vue的属性
注意是在main.js里写的而且use函数需要,+空格