• Vue框架之自定义钩子函数，nextTick，局部和全局，什么叫组件？什么是复用？，注册组件需要主要的点注册组件的属性，Css样式的覆盖解决

    自定义钩子函数

    除了Vue 内置指令外，Vue也支持我们自定义注册指令，当我们觉得什么功能注册为指令更方便使用的时候，我们就可以自己去注册

    • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
    • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
    • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind：只调用一次，指令与元素解绑时调用

    nextTick

    nextTick() 等待下一次 DOM 更新刷新的工具方法

    我们有时会考虑到现在正在写的业务代码能否操作vue对象的实例，所以我们需要一个工具 就是让我们写的代码 无论在哪里写 都希望它是组件加载完了以后才运行的，而nextTick() 正好解决了这个问题

    当我们在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这也是为了确保每个组件无论发生多少状态改变，都仅执行一次更新

    局部和全局

    全局:所有组件共同的功能(指令,过滤器,组件)

    局部:只有当前组件的功能(指令,过滤器,组件)

    <script src='https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
<style type="text/css">
<body>
	.app {
			width: 400px;
			background-color: gold;
		}
	
		.box1 {
			width: 200px;
			height: 200px;
			background-color: darkorange;
			margin: 20px;
		}
		.box11{
			width: 120px;
			height: 50px;
			background-color: hotpink;
			margin: 20px;
		}
	</style>
	<div id='app' class="app">
		<Box1></Box1>
		<p>{{msg|box1tool}}</p>
		<p v-color2="'blue'" v-color>{{msg|alltool1}}</p>
	</div>
	<script>
		Vue.filter("alltool1",function(str){
			return str+"全局"
		})
		Vue.directive("color",function(el,obj){
			el.style.color=obj.value||"red"
		})
		var vm = new Vue({
			el: '#app',
			data: {
				msg:"appdata"
			},
			components: {
				Box1: {
					template: template: `
    
						 
    {{msg|box1tool}}
    
						  
    {{msg|alltool1}}
    
						  
						 
    `    ,
					data: function() {
						return {
							msg: "hello"
						}
					},
					filters: {
						box1tool(str) {
							return str + "局部"
						}
					},
					directives:{
						color2:{
							inserted(el,obj){
								el.style.background=obj.value||"red"
							}
						}
					},
					components:{
						Box11:{
							template:`
    
							         
    box11
    
							 
    `    
							 
						}
					}
				}
			}
		})
	</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    在这里插入图片描述

    组件

    什么是组件？

    组件是Vue中的一个重要概念，是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。

    因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。

    仅有的例外是像el这样根实例特有的选项。

    什么是复用？

    把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。那么我们可以将其抽出为一个组件进行复用

    例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率

    定义组件

    <template>
	<div>
		<h1>nav1组件h1>
	div>
template>

<script>
	export default {
		data:function(){
			return {
				msg:"hello"
			}
		},
	}
script>
<style>
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    引入并使用组件

    <script src='https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'>script>
head>
<body>
	<div id='app'>
		<Nav1>Nav1>
	div>
	<script type="module">
	import Nav1from "./com/Nav1.js"
		var vm = new Vue({
			el: '#app',
			components:{
				Nav1
			}
		})
	script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    使用Nav1，就能在页面上显示 nav1组件 这几个字了

    注册组件需要主要的点

    1. 可以这样引入import Box1 from "@/Nav1.vue"，@代表目录
    2. 注册的组件名不能跟vue中的和原生DOM的重名,注册的名字是驼峰 使用时就用连字符
    3. 注册的组件 使用时可以用双标签也可以用单标签: 如果有插槽必须用双标签
    <script>
	//1.@代表了src目录的意思
	import Box1 from "@/Nav1.vue"
	//2.注册的组件名不能跟vue中的和原生DOM的重名,注册的名字是驼峰 使用时就用连字符
	import BoxDiv2 from "@/com/BoxDiv2.vue"
	
	//3.注册的组件 使用时可以用双标签也可以用单标签: 如果有插槽必须用双标签	
	export default {
		components: {
			Nav1
		}
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    如果 .vue 的script注释了 在打包的时候 vue的打包环境 会帮我们把这个文件解析为一个对象 然后给这个对象添加一个template属性 值为解析的页面模板，也就是说 .vue文件中 可以不要