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. 整个生命周期流程 自己去官网看图好不
    我还是贴一张官网的图吧
    在这里插入图片描述
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。下面是 Vue Router 的所有知识点详细介绍: 1. 路由概念 路由是指根据不同的 URL 地址展示不同的页面或视图,常见的有前端路由和后端路由。前端路由是指通过 JavaScript 解析 URL,根据 URL 的不同参数展示相应的视图,不需要刷新页面;后端路由是指通过服务器解析 URL,根据 URL 的不同参数返回相应的 HTML 页面。 2. Vue Router 安装和使用 安装 Vue Router 可以通过 npm 或 yarn,使用时需要在 main.js 中引入并挂载到 Vue 实例上。使用 Vue Router 可以通过 router-link 和 router-view 两个组件实现。 3. 路由配置 路由配置指的是在 Vue Router 中定义路由的规则,包括路由路径、组件、名称、参数等。路由配置可以通过对象字面量或函数返回对象的形式定义,也可以通过单独文件的形式定义。 4. 动态路由 动态路由是指根据不同的参数动态生成路由,常见的参数包括 ID、用户名等。在 Vue Router 中,可以通过冒号(:)定义动态路由参数。 5. 嵌套路由 嵌套路由是指在一个路由中再定义子路由,实现多级路由嵌套的效果。在 Vue Router 中,可以通过 children 属性定义子路由。 6. 命名路由 命名路由是指给路由定义名称,方便在代码中调用和跳转。在 Vue Router 中,可以通过 name 属性定义命名路由。 7. 路由参数 路由参数是指通过 URL 传递参数,常见的有查询参数和动态路由参数,可以通过 $route 对象获取当前路由的参数。 8. 路由导航 路由导航指的是在页面中跳转路由,包括通过 router-link 跳转和通过编程式导航跳转。在 Vue Router 中,可以通过 $router 对象和 $route 对象实现路由导航。 9. 导航守卫 导航守卫是指在路由导航过程中执行的钩子函数,包括全局守卫、路由独享守卫和组件内守卫。导航守卫可以实现路由跳转前的验证、权限控制等功能。 10. 路由元信息 路由元信息是指在路由中定义的额外信息,可以通过 meta 属性定义。路由元信息可以实现页面标题、权限控制等功能。 11. 懒加载 懒加载是指在需要时才加载组件,可以提高应用性能。在 Vue Router 中,可以通过异步组件和 import() 函数实现懒加载。 以上就是 Vue Router 的所有知识点详细介绍。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值