注册全局组件
- 应用场景:多处使用:的公共功能组件,就可以注册全局组件,减少冗余代码
- 全局API:Vue.component('组件名',组件对象);
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> //注册公共的全局组件,省去很多的components:{xxx:Xxx} Vue.component('my-btn',{ template:` <button style="background-color:red;">漂亮的按钮</button> ` }); var MyHeader={ template:` <div> 我是header组件 <my-btn/> </div> `, }; var MyFooter={ template:` <div> 我是footer组件 <my-btn/> </div> `, } //入口组件 var App={ components:{ 'my-header':MyHeader, 'my-footer':MyFooter }, template:` <div> <my-header></my-header> <my-footer></my-footer> <my-btn/> </div> ` }; new Vue({ el:'#app', components:{ app:App, }, template:`<app/>`, }); </script> </body> </html>
附加功能:过滤器&监视改动
- filter||filters
将数据进行添油加醋的操作 Vue.filter("过滤器名",过滤方式fn)
过滤器分两种:
组件内的过滤器(组件内有效)
全局过滤器(所有组件共享)
先注册,后使用
组件内:filters:{过滤器名:过滤器fn},最终fn内通过return产出最终的数据
使用方式是{{原有数据|过滤器}}
需求:页面input框输入字符串,反转字符串输出,按参数显示label(中英文)
过滤器fn:声明function(data,argv1,argv2....){}
使用:{{数据|过滤器名(参数1,参数2)}}
- watch监视单个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var App={
template:`
<div>
<input type="text" v-model="myText">
{{myText | reverse('反转字符串')}}
<button @click="stus[0].name='rose'">改变stus[0].name属性</button>
</div>
`,
data:function(){
return {
myText:'111',
stus:[{name:'jack'}]
}
},
watch:{
//监视复杂类型,无法监视的原因是因为监视的事对象的地址
//地址没改,改的是地址同属性的值
// stus:function(){
// },
//深度监视:object||array
stus:{
deep:true,
handler:function(newV,oldV){
alert("复杂类型监视成功")
}
},
//key是属于data属性的属性名,value是监视后的行为
myText:function(newV,oldV){
if(newV=='i love you'){
alert("i love you,too");
}
}
},
//组件内的过滤器
filters:{
reverse:function(dataStr,reverseStr){ //参数1就是传递的原数据
//变数组 反转 变字符串
return reverseStr+':'+dataStr.split('').reverse().join(''); //显示的内容
}
}
};
//全局过滤器
Vue.filter('myreserve',function(data,arg1){
return 'xxx'
});
new Vue({
el:"#app",
components:{
app:App,
},
template:`<app/>`
});
</script>
</body>
</html>
- computed监视多个
computed:{监视的业务名:function(){return 显示一些内容}}
使用:{{计算属性的名称}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var App={
template:`
<div>
(<input type="text" v-model="n1">
+
<input type="text" v-model="n2">)
*
<input type="text" v-model="rate">
={{result}}
</div>
`,
data:function(){
return {
n1:0,
n2:0,
rate:0
}
},
computed:{
//包含原值不变,缓存不调函数的优化机制
result:function(){
//监视对象,写在了函数内部
//凡是函数内部有this,相关属性,改变都会触发当前函数
return ((this.n1-0)+(this.n2-0))*this.rate;
}
}
};
new Vue({
el:"#app",
components:{
app:App,
},
template:`<app/>`
});
</script>
</body>
</html>
slot
- 内置的组件
- slot就是子组件里给DOM留下的坑
- <子组件>DOM</子组件>
- slot动态的DOM,props是动态的数据
组件的生命周期
- 需要频繁的创建和销毁组件,比如页面中部分内容显示与隐藏,但是用的是v-if
- 组件缓存
内置组件中<keep-alive>
被其包裹的组件,在v-if=false的时候,不会销毁,而是停用
v-if=true,不会创建,而是激活
避免频繁的创建组件对象的性能损耗
- 成对比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var Test={
template:`
<div>
我是test组件{{text}}
<button @click="text=text+1">点我加1</button>
</div>
`,
data:function(){
return {
text:'hello world'
}
},
beforeCreate:function(){
//组件创建之前
//console.log(this.text);
console.log("beforeCreate");
},
created:function(){
//组件创建之后
//console.log(this.text);
console.log("created");
},
//使用该组件,就会触发以上的事件函数(钩子函数)
//created中可以操作数据,并且可以实现Vue->页面的影响
//应用:发起ajax请求
// beforeMount:function(){
// //vue起作用,装载数据到DOM之前
// //console.log(document.body.innerHTML);
// console.log("beforeMount");
// },
// mounted:function(){
// //vue起作用,装载数据到DOM之后
// //console.log(document.body.innerHTML);
// console.log("mounted");
// },
// //基于数据改变,影响页面
// beforeUpdate:function(){ //改变前
// console.log(document.body.innerHTML);
// },
// updated:function(){ //改变后
// console.log(document.body.innerHTML);
// },
//以上两个是当有更改数据才会触发
//应用:beforeUpdate 可以获取原DOM
//updated可以获取新DOM
//对应父组件v-if false 就销毁当前组件
activated:function(){
console.log("组件被激活了");
},
deactivated:function(){
console.log("组件被停用了");
},
//created和activated 都是v-if="true"子组件的状态
//created没有被keep-alive内置组件包裹,activated被包裹了
//销毁和停用同上
beforeDestroy:function(){
console.log("beforeDestroy");
},
destroyed:function(){
console.log("destroyed");
},
//销毁,最终都是做一些其他功能的释放,比如:保存到LocalStorage
};
var App={
components:{
test:Test
},
data:function(){
return {
isExist:true,
}
},
template:`
<div>
<keep-alive>
<test v-if="isExist"></test>
</keep-alive>
<button @click="isExist=!isExist">事关子组件生死</button>
</div>
`,
}
new Vue({
el:"#app",
components:{
app:App
},
template:"<app/>"
});
</script>
</body>
</html>
获取DOM元素
- 救命稻草,document.querySelector
- 在template中标识元素 ref="xxx"
- 在要获取的时候,this.$refs.xxx获取元素,创建组件,装载DOM,用户点击按钮
- ref在DOM上获取的是原生DOM对象
- ref在组件上获取的是组件对象
- $el是拿其DOM,这个对象就相当于我们平时玩的this,也可以直接调用函数