1.計算屬性
https://cn.vuejs.org/v2/guide/computed.html
new Vue({
computed:{//定義
show(){
}
}
})
++計算屬性1.html:++
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"abc",
msg2:"msg2"
},
methods:{//沒有緩存
reverse(){
console.log("methods");
return this.msg.split("").reverse().join("")
}
},
computed:{//有緩存
reverse2(){//只關心自己
console.log("computed");
return this.msg.split("").reverse().join("")
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg" type="text" value=""/><br />
<input v-model="msg2" type="text" value=""/><br />
{{msg2}}<br />
{{msg}}<br />
{{reverse()}}<br />
{{reverse2}}<br />
</div>
</body>
</html>
res:
只要data中的內容改變,methods就運行,computed只有與其相關的data發生變化才運行.
++計算屬性2.html:(get,set)++
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
//計算屬性的名字不出出現在 data/methods中 會有沖突
window.onload = function(){
vm = new Vue({
el:"#app",
data:{
msg:"abc",
},
computed:{
/*reverse(){// get
return this.msg.split("").reverse().join("")
} */
reverse:{
get(){
return this.msg.split("").reverse().join("")
},
set(value){
console.log("set:",value);
this.msg = value;
}
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg" type="text" value=""/><br />
<input v-model="reverse" type="text" value=""/><br />
{{msg}}<br />
{{reverse}}<br />
</div>
</body>
</html>
res:
使用
{{show}}
注意事項：
1、名字：data/methods里面不能出現, 會有沖突
2、計算屬性可以修改 前提條件—— 必須有set
3、方法可以調用計算屬性 計算屬性頁可以調用方法
4、計算屬性必須有返回值 使用的時候不帶括號!
show(){}
show:{
get(){},
set(value){...}
}
++計算屬性3.html:++
方法調用計算屬性 計算屬性頁可以調用方法;
計算屬性必須有返回值 使用的時候不帶括號!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
//方法調用計算屬性 計算屬性頁可以調用方法
window.onload = function(){
vm = new Vue({
el:"#app",
data:{
a:12,
b:5
},
methods:{
sum(){
return this.sum2;
//return this.sum2();//不能帶括號
}
},
computed:{
sum2(){
return parseInt(this.a) + parseInt(this.b);
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="a" type="text" value=""/><br />
<input v-model="b" type="text" value=""/><br />
{{sum()}}<br />
{{sum2}}<br />
</div>
</body>
</html>
res:
2.監聽 watch
let vm = new Vue({
watch:{
wd(){},
wd:"方法名 show",
wd:[fn1,fn2....],
["json.wd"](){}
json:{
handler: function (val, oldVal) { /* ... */ },
deep: true//深度監聽
immediate: true//立即執行
},
}
});
vm.$watch
https://cn.vuejs.org/v2/api/#vm-watch
++監聽1.html:++
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload = function(){
let url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
let vm = new Vue({
el:"#app",
data:{
wd:"abc",
arr:[1,2,3]
},
methods:{
show(){
console.log("methods");
this.$http.jsonp(url,{params:{wd:this.wd},jsonp:"cb"}).then(res=>{
this.arr = res.data.s;
});
}
},
watch:{
/*wd(){
this.show();
} */
wd:"show"
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="wd" type="text" value=""/><br />
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
</body>
</html>
res:
++監聽2.html:++
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload = function(){
let url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
let vm = new Vue({
el:"#app",
data:{
json:{wd:"abc"},
arr:[1,2,3]
},
methods:{
show(){
console.log("methods");
this.$http.jsonp(url,{params:{wd:this.json.wd},jsonp:"cb"}).then(res=>{
this.arr = res.data.s;
});
}
},
watch:{
/* ["json.wd"](){
this.show();
}, */
//深度監聽
json:{
handler: function () {
this.show();
},
deep: true,
immediate: true
},
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="json.wd" type="text" value=""/><br />
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
</body>
</html>
res:
3.組件：模板 template 標簽
全局組件、局部組件
全局組件
Vue.component("組件的名稱、標簽名",選項);
選項 options
{template:<div>內容</div>}
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
//全局組件
//Vue.component(組件名稱，選項);
Vue.component("mycomponent",{
template:`<div>全局組件</div>`
});
window.onload = function(){
let vm = new Vue({
el:"#app",
});
};
</script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
<div is="mycomponent"></div>
<component is="mycomponent"></component>
</div>
</body>
</html>
局部組件
new Vue({
components:{
組件的名稱、標簽名:選項
}
})
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
let vm = new Vue({
el:"#app",
components:{
mycomponent:{
template:`<div>局部組件</div>`
}
}
});
};
</script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
</body>
</html>
顯示三種：
<組件的名稱></組件的名稱>
<div is="組件的名稱"></div>
<component is="組件的名稱"></component>
注意事項：
1、組件必須定義在vue實例化之前
2、推薦使用雙標簽 單標簽慎用,最好不要使用單標簽
3、模板里面只能有一個父元素，不能有兄弟節點
組件的命名規范：
Component names can only contain alphanumeric characters and the hyphen,
and must start with a letter.
組件名稱只能包含【字母】【數字】和【連字符】，並且必須以字母開頭。
1、不能使用中文
2、不能使用系統html里面已經存在的標簽名
3、連字符： 中橫線和下划線
4、駝峰標識 優先級 my-componen > myComponen > MyComponent,
頁面上使用: ++++
組件可以循環 ：必須帶上key---> ++:key="id"++
Vue.component("mycomponent",{
template:`<div>mycomponent組件</div>`
});
<mycomponent v-for="item in 3" :key="item"></mycomponent>
is:規范標簽的寫法！
<ul>
<li>li</li>
<div>div</div>
<p>p</p>
</ul>
<table>
<tbody>
<tr><td> tr--->td</td></tr>
/*tr標簽為空,div和p標簽在table上面*/
<tr><div>div</div></tr>
<tr><p>p</p></tr>
</tbody>
</table>
Vue.component("mytr",{
template:`<tr><td> tr--->td</td></tr>`
});
<table>
<tbody>
<mytr></mytr>錯誤寫法
<tr is="mytr"></tr>正確的寫法
</tbody>
</table>
組件通信：vuex
1、父傳子 props :子組件的屬性="父組件的data"
//通信是單向的 父組件到子組件,子傳父自定義事件
2、子傳父 this.$emit(自定義事件,數據);
@自定義事件="父組件的函數名"
子組件,data必須是一個函數
props里面的屬性不能出現在data中 反之亦然
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
//通信是單向的 父組件到子組件
Vue.component("mycomponent",{
props:["msg"],
template:`<div>子組件:<input v-model="wd" @input="show" type="text" value=""/>
{{msg}}------{{wd}}
</div>`,
data(){
return {
wd:this.msg
}
},
methods:{
show(){
//this.msg = this.wd;
//console.log(this.wd);
this.$emit("abc",this.wd);
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"abc"
},
methods:{
fn(data){
console.log("fn:",data);
this.msg = data;
}
}
});
};
</script>
</head>
<body>
<div id="app">
父組件:<input v-model="msg" type="text" value=""/> {{msg}}
<hr />
<mycomponent :msg="msg" @abc="fn"></mycomponent>
</div>
</body>
</html>
res:
父傳子:
子傳父:
props命名規則
1、props:["props-name"] {{propsName}} :props-name="xxxx"
2、props:["props_name"] {{props_name}} :props_name="xxxx"
3、props:["propsName"] {{propsName}} :props-name="xxxx"
4、props:["PropsName"] {{PropsName}} :props-name="xxxx"
5、props:["AAA"] {{AAA}} :a-a-a="xxxx"
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
Vue.component("mycomponent",{
props:["AAA"],
template:`<div>組件{{AAA}}</div>`,//不能是中划線
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"Vue msg"+Math.random()
}
});
};
</script>
</head>
<body>
<div id="app">
<mycomponent :a-a-a="msg"></mycomponent>
</div>
</body>
</html>
案例
組件通信：
1、自增：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script>
//this.$emit(sEv,data)
Vue.component("mycomponent",{
props:["count"],
template:`<div><input @click="handleClick" type="button" value="點我"> {{count}}</div>`,
methods:{
handleClick(){
//this.count++;
this.$emit("plus",this.count+1);
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
count:0
},
methods:{
add(data){
console.log(1111,data);
this.count = data;
}
}
});
};
</script>
</head>
<body>
<div id="app">
{{count}}
<hr />
<mycomponent :count="count" @plus="add"></mycomponent>
</div>
</body>
</html>
res：
2、百度下拉索引
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
Vue.component("baidu-input",{
template:`<input v-model="wd" type="text" value=""/>`,
data(){
return {wd:""}
},
watch:{
wd(){
this.$emit("jsonp",this.wd);
}
}
});
Vue.component("baidu-list",{
props:["arr"],
template:`
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>`,
});
window.onload = function(){
let url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
let vm = new Vue({
el:"#app",
data:{
arr:[],
},
methods:{
baiduJsonp(wd){
this.$http.jsonp(url,{params:{wd},jsonp:"cb"}).then(res=>{
this.arr = res.data.s;
});
}
}
});
};
</script>
</head>
<body>
<div id="app">
<baidu-input @jsonp="baiduJsonp"></baidu-input>
<baidu-list :arr="arr"></baidu-list>
</div>
</body>
</html>
res:
3、選項卡
方法一:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<style>
input.active{background:pink;}
</style>
<script>
Vue.component("tab",{
template:`
<div>
<input @click="tab(index)"
:class="{active:iNow==index}"
v-for="item,index in title"
type="button" :value="item"/>
<div>{{content[iNow]}}</div>
</div>
`,
data(){
return {
iNow:0,
title:["aaa","bbb","ccc"],
content:["aaa","bbb","ccc"],
}
},
methods:{
tab(index){
this.iNow = index;
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
});
};
</script>
</head>
<body>
<div id="app">
<tab></tab>
</div>
</body>
</html>
方法二:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<style>
input.active{background:pink;}
</style>
<script>
Vue.component("tab",{
props:["iNow","title","content"],
template:`
<div>
<input @click="tab(index)"
:class="{active:iNow==index}"
v-for="item,index in title"
type="button" :value="item"/>
<div>{{content[iNow]}}</div>
</div>
`,
methods:{
tab(index){
this.$emit("abc",index);
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
iNow:0,
title:["aaa","bbb","ccc"],
content:["aaa","bbb","ccc"],
},
methods:{
tab(index){
this.iNow = index;
}
}
});
};
</script>
</head>
<body>
<div id="app">
<tab :i-now="iNow" :title="title" :content="content" @abc="tab"></tab>
</div>
</body>
</html>
res:
