vue组件

组件的定义注册使用

定义：const stepper = {
template:``
}
注册： components:{ steper}
使用：<steper></steper>

组件的传参

父传子props

组件外
<steper 1:num=“10”>
组件内
props:[“num”]
props:{
“num”:{type:Number,default:1}
}
传入的props 只读的
this.num 访问数据,不能修改数据

子传父

组件内
this.emit("countchange",this.count)事件emit组件外部<stepper@countchange="r=emit("countchange",this.count) 事件emit 组件外部 <stepper @countchange="r=emit("countchange",this.count)事件emit组件外部<stepper@countchange="r=event">


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/vue.js"></script><style>.circle{border: 1px solid red;text-align: center;/* border-radius: 50px;width: 50px;height: 50px; */}</style></head><body><div id="app"><h1>03使用组件</h1>         <steper :num="r" @countchange="r=$event"></steper> <br><div class="circle" :style="{width:r+'px',height:r+'px',borderRadius:r+'px'}">{{r}}</div></div><script>// 01 定义组件const steper = {template:`<span><button @click="count--">-</button><input v-model="count"/><button @click="count++">+</button></span>`,data(){return {count:this.num}},props:["num"],watch:{"count":{handler(){this.$emit("countchange",this.count)},deep:true}}}// this.$emit("事件名",事件值) 发送一个事件,携带事件值// <steper v-on:事件名="$event"> // <steper @事件名="$event"> $event就是事件名发送的时候携带事件值// 02 监听count的变化,发送count的值给外部new Vue({// 02 注册组件components:{steper},el:"#app",//模板data(){ return {r:200,}}, //方法methods:{},//方法filters:{},//过滤computed:{},//计算})</script></body>
</html>

组件的插槽

定义组件如何嵌套
标签的内容
组件外部

<modal><p>插槽内容1</p><p>插槽内容2</p>
</modal>

组件内:

<div><slot></slot>
</div>```

插槽在弹窗的应用

<div id="app"><h1>组件的插槽-定义一个弹框组件</h1><button @click="visible2=true">弹框</button><modal :title="'编辑内容'":visible="visible2" @visiblechange="visible2=$event"><p>东方红,太阳升</p><p>中国出了</p>          </modal></div><script>const modal = {template:`<div class="modal" v-if="visible"><div class="modal-content"><div class="modal-header">{{title}} <span class="close" @click="$emit('visiblechange',false)">x</span></div><div class="modal-body"><slot></slot></div>                     </div></div>`,props:{visible:{type:Boolean,default:false,},title:{type:String,default:''}}}new Vue({components:{modal},el:"#app",data(){return {visible2:false,}}})</script>

计算computed

计算和监听的区别：从现有数据,计算新的数据,多个对1

computed:{
doneList(){return this.list.filter(item=>item.done)}
}

 <div id="app"><h1>{{msg}}</h1><input type="text" v-model="msg"><p>{{rmsg}}</p><p>数量:{{num}},价格:{{price}},总价格:{{total}}</p><input type="text" v-model.number="num"></div><script>new Vue({el:"#app",data(){return {msg:"我爱中国",num:5,price:10}},computed:{// 计算出来的rmsg 只读,不能修改"rmsg":function(){return this.msg.split('').reverse().join('');},"total":function(){return this.price*this.num;}}})</script>

watch监听

监听和计算的区别：监听数据的变化,执行回调函数handler ,1对多


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/vue.js"></script></head><body><div id="app"><button @click="num++">{{num}}</button><button @click="num+=5">{{num}}</button></div><script>new Vue({el:"#app",data(){return {num:5}},// 监听数据的变化,并执行handler函数(只有num发生变化,这个handler就会执行)// num值类型有两个参数 nval最新的值,oval变化前的值// num引用类型只有一个参数最新值watch:{num:{handler(nval,oval){console.log("num从",oval,"变化为",nval)}}}})</script></body>
</html>

filters

对现有数据,进行格式输出

{{3.1415926|fix(2)}}
filters:{
fix(val,arg){reutrn Number(val).toFixed(arg)}
}


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/vue.js"></script></head><body><div id="app"><p v-for="item in list" :key="item">{{item|hide('**')}}</p><!-- 管道把数据操作过滤一下 --><p>{{PI|fix}}</p><p>{{999999|fix(4)}}</p><p>{{25|fix(1)}}</p></div><script>new Vue({el:"#app",data(){return {PI:3.14159261768456,list:["曾庆林","李华","高兵","张艳艳"]}},// 定义管道的方法filters:{// val默认的值// arg是参数fix(val,arg=2){console.log(val);// toFixed转换为字符串保留小数点2位return Number(val).toFixed(arg);},hide(val,arg){var temp = val.split('');temp[1] = argreturn temp.join('');}}})</script></body>
</html>

生命周期钩子函数	组件状态	常见用法
beforeCreate	this指向创建的实例，还不能访问data，comouted，methods	初始化非响应式变量
created	可以访问data，methods；但是未挂载DOM，并且还不能访问 $ el属性,$ref属性内容此时会为空数组	简单的ajax请求，页面的初始化
beforeMount	在beforeMount之前，会找到对应的template,并编译成render函数	-
mounted	vue实例挂载到DOM上，$ref,ref,ref, $el均能访问	获取VNode信息，ajax请求
beforeUpdate	data发生变化，即DOM发生改变	适合在更新之前访问现有的DOM，如手动移除已添加的事件监听器
updated	组件DOM已更新，可执行依赖于DOM的操作	在这个钩子函数中操作数据，可能陷入死循环。尽量据，可能陷入死循环。尽量
beforeDestroy	实例销毁之前调用。此时，实例依然可以使用，this能获取到实例	常用于销毁定时器、解绑全局事件、销毁插件对象等
destroyed	实例销毁后调用，调用后，vue实例数据解除绑定，事件监听器被移除，子实例都被销毁	-

vue组件及生命周期相关推荐

vue组件的生命周期和执行过程
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
Vue组件的生命周期以及钩子函数的作用
什么叫做生命周期一个组件从创建到销毁的过程叫做组件生命周期. Vue在生命周期中提供了一些函数可以在其内部实现一些业务逻辑并且这些函数会在一些特定的场合下执行. 组件的生命周期钩子函数大致可以分为三 ...
Vue组件的生命周期
1 beforeCreate () { 2 console.log("beforeCreate 创建前状态===============组件1") 3 }, 4 created() ...
vue父子组件生命周期执行顺序_关于Vue组件的生命周期及执行顺序
本文主要讲述了:Vue组件渲染时的生命周期及执行顺序 Vue组件数据变更时的生命周期及执行顺序 Vue组件嵌套时的生命周期及执行顺序正文组件渲染时的生命周期在组件渲染时,每个Vue组件都有4个生 ...
vue实例的生命周期详解
Vue实例的生命周期简介此篇文章说的是最简单的单个VUE组件的生命周期. 官网中的长图诠释了Vue实例从创建,运行到销毁的整个过程.从vue实例的创建,运行,销毁期间,总是伴随着各种各样的事件,这 ...
vue的组件的生命周期
在vue的官网上,有一个很难懂的图,还是英文的········ 简单总结一下,方面处理数据和渲染dom 第一个:单独组件的生命周期: beforeCreate:dom和data以及motheds未定义 ...
python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
第五节：轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...

vue组件及生命周期

vue组件

组件的定义注册使用

组件的传参

父传子props

子传父

组件的插槽

计算computed

watch监听

filters

vue组件及生命周期相关推荐

最新文章

热门文章