12.vue属性.监听.组件

时间：2022-02-14 07:22:31

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发生变化才运行.

12.vue属性.监听.组件

12.vue属性.监听.组件

++计算属性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:

12.vue属性.监听.组件

使用

{{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:

12.vue属性.监听.组件

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:

12.vue属性.监听.组件

++监听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:

12.vue属性.监听.组件

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:

父传子:

12.vue属性.监听.组件

子传父:

12.vue属性.监听.组件

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：

12.vue属性.监听.组件

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:

12.vue属性.监听.组件

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:

12.vue属性.监听.组件

相关文章