侦听器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函数需要,+空格