vue-知识点

1.keep-alive,component 标签

// html代码
<keep-alive>
	<component :is = "type"></component>
<keep-alive>
// js代码
// component 是动态, 根据is绑定的名称渲染组件
// keep-alive  保证切换组件的时候,切换的上一个组件,而不是重新实例化出来的一个新的组件

2.slot 插槽

1.普通插槽

// html 代码
<comp-one>
	<span slot="head">这是一个头部的插槽</span>
</comp-one>

// js 代码
const compOne = {
	props: ['list'],
	template: `<div>
					<slot name= "head"></slot>
					<span>这是组件1</span>
					<slot name = foot></slot>
			  </div>`
}

2.作用域插槽

// html 代码
<comp-one :list="list">  
     // 作用域插槽必须用template标签
	<template slot-scope="comOneInfo">   
		<span slot="head">插槽传的item:{{comOneInfo.item}}, 插槽的index: {{comOneInfo.index}}</span>
	</template>
</comp-one>

// js 代码
const compOne = {
	props: ["list"],
	template: `<div>
					<slot name= "head" v-for=(item, index) in list :key="item" :item="item" :index="index"> </slot>
					<span>这是组件1</span>
					<slot name = foot></slot>
			  </div>`  // 是在这里把slot绑定的值,都打包发送到template 的slot-scope 的comOneInfo 上了
}

3.生命周期

1.vm.$mount("#app") , 挂载到#app上,相当于在vue实例上的 el:"#app"
2.template: 与data 和methods同级。接收一个字符串,直接放到#app里。
vue执行顺序:

   初始化==> el ==> y ==> template ⇒ y ⇒ Ast()抽象语法树 ==> render  ⇒ VNode 虚拟dom ⇒ 真实dom
			   ==> n ⇒ $mount  ==> y ==> template  ==⇒ y  ==> Ast()抽象语法树 ==> render  ⇒ VNode 虚拟dom ⇒ 真实dom
								⇒ n ⇒ vue实例凉凉		n  ===> #app.outHTML 变成template 	   							 

3.render函数

const vm = new Vue({
	data: {},
	template: '<div></div>',
	render: (h) {
		return h("div", {
			style: {},
			class: ["red", "green"],  
			class: {
				red: true,
				green: false
			}, // 两个class方式二选一, 后面是动态的,根据true决定是否有这个class
			domProps: {
				innerHTML: 'ssss'   // 设置这个dom的innerHTML
			},
			props: {},
			attrs: {}
		}, "我的老哥")
	}
})
  1. 整个生命周期流程 自己去官网看图好不
    我还是贴一张官网的图吧
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值