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 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
随机推荐
- centos7安装redis设置开机启动
1. 首先下载redis源码,并使用tar进行解压缩 wget http://download.redis.io/releases/redis-4.0.8.tar.gztar xvzf redis-4 ...
- 远程FTP下载文件
现在存在以下环境: 远程服务器:192.168.1.107 用户名:dt 密码:dt123 需要从该服务器上下载文件到本地 1.登录(进入到那个目录登录的 ,文件就会被下载到该文件) ftp 192. ...
- Mac下的Chrome或Safari访问跨域设置，MBP上使用模拟器Simulator.app或iphone+Safari调试网页
Mac下的Chrome或Safari访问跨域设置: mac下终端启动Chrome $ open -a Google\ Chrome --args --disable-web-security 或 /A ...
- 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈
多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...
- SQL Server 性能优化实战系列(二)
SQL Server datetime数据类型设计.优化误区 一.场景 在SQL Server 2005中,有一个表TestDatetime,其中Dates这个字段的数据类型是datetime,如果你 ...
- 带你Python入门，踏进人工智能领域
1.Python能做什么? 不知大家 没有看<中国好声音>呢?有位选择就是利用AI改编了一首周杰伦的歌<止战之殇>. Python适合做人工智能AI吗? 很明确的告诉你,可以! ...
- 爬取 Caused by SSLError(SSLError("bad handshake: Error
在爬虫中遇到如下报错: Traceback (most recent call last): File "C:/Users/xuchunlin/PycharmProjects/A9_25/h ...
- AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: 1 <!DOCTYPE h ...
- Session 在分布式系统中实现方式
##server独立Session 例如以下图所看到的: server独立Session要求用户的每次请求都必须在同一台应用server上面操作,这就要求负载均衡server每次都能把用户的请求发送到 ...
- spring事务的传播机制新解
以下是事物的传播机制: @Transactional(propagation=Propagation.REQUIRED)如果有事务, 那么加入事务, 没有的话新建一个(默认情况下)@Transacti ...