12.vue属性.监听.组件

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:

12.vue属性.监听.组件的更多相关文章

vue属性监听
1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...
vue的属性监听
一.vue的监听 1.监听的例子如: html:<input type="number" v-model="a" /> js: watch: { ...
Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
Vue 变量，成员，属性监听
Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...
Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
vue对象属性监听
对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...
设计模式(5): vue 不监听绑定的变量
概述最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

随机推荐

JavaWeb中过滤器Filter的使用示例
https://github.com/YouXianMing/Java-Web-Study/tree/master/Servlet-Filter 过滤器示例基于以下流程测试效果如下 web.xml配 ...
centos7安装redis设置开机启动
1. 首先下载redis源码,并使用tar进行解压缩 wget http://download.redis.io/releases/redis-4.0.8.tar.gztar xvzf redis-4 ...
android：第十章，后台的默默劳动者——服务，学习笔记
一.多线程 1)本章首先介绍了安卓的多线程编程,说明在子线程中如果要修改UI,必须通过Handler, Message, MessageQueue, Looper来实现,但是这样毕竟太麻烦了. 2) ...
solr集群构建的基本流程介绍
先从第一台solr服务器说起:1. 它首先启动一个嵌入式的Zookeeper服务器,作为集群状态信息的管理者,2. 将自己这个节点注册到/node_states/目录下3. 同时将自己注册到/live ...
HOWTO: Avizo/Amira使用前的显卡设置(Volume Rendering，Volren不显示)
关于Avizo或Amira中体渲染不显示的问题,常常有人在问,有人甚至怀疑软件有问题,今天就这个话题总结如下: 首先我们要清楚像Avizo或Amira之类的三维可视化软件,必须是在配有专业显卡的工作站 ...
Java操作Linuxshell并且获取返回值
/** * */package com.king.weixin.util;import java.io.BufferedReader;import java.io.InputStream;/*** @ ...
cookie 跨域解决方法
1.Nginx 正向和反向代理的区别正向代理和反向代理的区别:正向代理隐藏真实客户端,反向代理隐藏真实服务端,图示: 2.cookie跨域问题因为cookie存在跨域问题,其中一个解决方法是,设置 ...
每天一个linux命令:free
1.命令简介 free (free) 命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer. 2.用法 free [-b | -k | -m | -g | -h ...
使用插件扩展Docker
http://wwwbuild.net/dockerone/241249.html Docker吸引我的,同时也是促使其成功的一个重要方面,是其开箱即用的特性. “开箱即用”是指什么呢?简单来说, ...
ssh的用户配置文件config管理ssh会话
抄的这个: https://www.cnblogs.com/zhonghuasong/p/7236989.html 只是在这里留个存档,防止删除我有这样的需求就是,因为需要ssh连接到服务器,然后每 ...

12.vue属性.监听.组件

1.计算属性

++计算属性1.html:++

++计算属性2.html:(get,set)++

使用

注意事项：

++计算属性3.html:++

2.监听 watch

++监听1.html:++

++监听2.html:++

3.组件：模板 template 标签

全局组件、局部组件

显示三种：

注意事项：

组件的命名规范：

is:规范标签的写法！

组件通信：vuex

props命名规则

案例

组件通信：

1、自增：

2、百度下拉索引

3、选项卡

12.vue属性.监听.组件的更多相关文章

随机推荐

热门专题