12.vue属性.监听.组件

其他 2018-08-12 15:03:26 阅读次数: 0

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

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

使用

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

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

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

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:
父传子:
image
子传父:
image

==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：
image

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

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

猜你喜欢

转载自www.cnblogs.com/zhongchao666/p/9463000.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022