首页 技术 正文

12.vue属性.监听.组件

技术 2022年11月15日
0 收藏 426 点赞 4,644 浏览 9373 个字

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/

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

点赞 426

贡献者

上一篇： windows环境下 php 将office文件(word/excel/ppt)转化为pdf(转)
下一篇： _T宏的使用
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：9,105
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,582
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,429
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：7,836
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：4,919
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
37
收藏
0
人气
111,071
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页