1、自定义属性
1.1、局部自定义属性
实现类似v-show的自定义指令
<div id='app'>
<button @click="isShow=!isShow">按钮</button>
<p v-myshow="isShow"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
},
directives: {
myshow: {
bind(el, binding) {
// myshow这个指令绑定到元素上的时候执行这里的代码(页面一刷新就绑定上了)
// el表示 myshow这个指令 绑定的元素
// binding.value 表示这个指令对应的真实值
binding.value ? el.style.display = "block" : el.style.display = "none"
},
update(el, binding) {
// myshow这个指令的值一旦发生改变，就会执行这里的代码
binding.value ? el.style.display = "block" : el.style.display = "none"
}
}
}
})
</script>
复制代码2.2、全局自定义属性
<div id='app'>
<button @click="isShow=!isShow">按钮</button>
<p v-myshow="isShow"></p>
</div>
<script>
Vue.directive("myshow", {
bind(el, binding) {
// myshow这个指令绑定到元素上的时候执行这里的代码(页面一刷新就绑定上了)
// el表示 myshow这个指令 绑定的元素
// binding.value 表示这个指令对应的真实值
binding.value ? el.style.display = "block" : el.style.display = "none"
},
update(el, binding) {
// myshow这个指令的值一旦发生改变，就会执行这里的代码
binding.value ? el.style.display = "block" : el.style.display = "none"
}
})
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
复制代码2、Vue组件化开发（重点！！！）
组件化开发的优势：可维护性高 可复用性高
什么是组件化开发：面对复杂问题的处理方式，把问题拆解成很多个能处理的小问题，再将其放在整体中。（类似于俄罗斯套娃，将问题分解，然后重构）
组件化思想：
- 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
- 任何的应用都会被抽象成一颗组件树。
2.1、局部组件化开发
<div id='app'>
<!--
局部组件的书写流程：
1、确定好组件名称
components: {
'my-header': {
template: '#tmp'
}
}
2、书写template标签，确定HTML格式
3、在页面中调用组件
-->
<my-header></my-header>
<template id="tmp">
<!-- 组件的HTML代码，组件模板 -->
<div>
<h1>标题</h1>
<p>p标签!!</p>
</div>
</template>
</div>
<script>
// 注意事项：
// 1、定义组件的时候，组件名称可以为驼峰式命名，或者带-的命名方式
// 2、在页面中调用组件的时候，组件名称只能是带-的命名方式，驼峰式不行
// 3、组件只能在绑定了Vue对象的标签内部使用
// 4、组件只能有一个根标签
new Vue({
el: '#app',
data: {
},
components: {
'my-header': {
template: '#tmp'
}
}
})
</script>
复制代码2.2、全局组件化开发
通过
Vue.component('组件名称', {})，通过这个方法注册的都是全局组件，也就是他们再注册之后可以用在任何新创建的Vue实例挂载的区域内。
<div id='app'>
<my-header></my-header>
<template id="tmp">
<!-- 组件的HTML代码，组件模板 -->
<div>
<h1>标题</h1>
<p>p标签!!</p>
</div>
</template>
</div>
<script>
Vue.component('my-header', {
template: '#tmp'
})
new Vue({
el: '#app',
data: {
}
})
</script>
复制代码2.3、组件的复用
1、声明这个组件标签的属性；
2、给属性赋值；
3、在组件中用胡子语法使用这个属性；
<div id='app'>
<!-- 2、给属性赋值 -->
<my-header title='分类'></my-header>
<my-header title='购物车'></my-header>
</div>
<template id="tmp">
<div>
<!-- 3、在组件中用胡子语法使用这个属性 -->
<h1>{{title}}</h1>
<p>p标签</p>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
},
components: {
myHeader: {
template: '#tmp',
// 1、声明这个组件标签的属性
props: ['title']
}
}
})
</script>
复制代码3、标签自定义
3.1、组件标签属性的默认值和类型
<div id='app'>
<my-header title="购物车"></my-header>
<my-header :title='tit'></my-header>
</div>
<template id="tmp">
<div>
<h1>{{title}}</h1>
<p>this标签</p>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
tit: '111'
},
components: {
myHeader: {
template: '#tmp',
props: {
title: {
default: '默认值',
type: String
}
}
}
}
})
</script>
复制代码3.2、组件也可以有自己的数据和方法
<div id='app'>
<comp></comp>
</div>
<template id="tmp">
<div>
<p>{{num}}</p>
<button @click='add()'>按钮</button>
</div>
</template>
<script>
let comp = {
template: '#tmp',
data() {
return {
num: 20,
}
},
methods: {
add() {
this.num++
}
},
}
new Vue({
el: '#app',
data: {
},
components: {
comp
}
})
</script>
复制代码4、父子组件间的通讯父级向子级传递
4.1、父级向子级传递
在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：
1. 字符串数组，数组中的字符串就是传递时的名称。
2. 对象，对象可以设置传递时的类型（String，Number，Boolean，Array， Object，Date，Function，Symbol），也可以设置默认值等。
复制代码父传子的步骤总结：
1、先在子组件声明属性
2、组件被调用的时候，赋值属性
3、在子组件中使用这个属性
<div id='app'>
<!--2、组件被调用的时候，赋值属性 -->
<child-comp :title='parentTitle' :vue-obj='parentObj'></child-comp>
</div>
<template id="tmp">
<div>
<!-- 3、在子组件中使用这个属性 -->
<h1>标题</h1>
<p>{{title}}</p>
<p>{{vueObj.name}}的年龄是：{{vueObj.age}}</p>
</div>
</template>
<script>
// 父传子的步骤总结：
let childComp = {
template: '#tmp',
// 1、先在子组件声明属性
props: ['title', 'vueObj']
}
new Vue({
el: '#app',
data: {
parentTitle: '父组件的title',
parentObj: {
name: 'Vue',
age: 8
}
},
components: {
childComp
}
})
</script>
复制代码4.2、子级向父级传递
父组件向子组件传递数据，通过自定义事件
子传父的步骤总结：
1、在父组件中先准备一个修改数据的方法；
2、定义自定义函数；
3、触发自定义事件，让changeNum这个函数来执行；
<div id='app'>
<!-- 2、 @fn 自定义事件 @事件名 = "事件触发时要执行的函数" -->
<child-comp :num='palnum' @fn='changeNum'></child-comp>
</div>
<template id="tmp">
<div>
<p>{{num}}</p>
<button @click='add(20)'>按钮</button>
</div>
</template>
<script>
// 单向数据流（只支持数据从父组件传到子组件）
let childComp = {
template: '#tmp',
props: ['num'],
methods: {
add(val) {
// 修改父组件中的palnum
// 触发自定义事件fn
// $emit()专门来触发自定义事件，调用对应的函数
// this.$emit(事件名，参数1，参数2...)
// 3、触发自定义事件，让changeNum这个函数来执行
this.$emit('fn', val)
}
},
}
new Vue({
el: '#app',
data: {
palnum: 20
},
components: {
childComp
},
methods: {
// 1、在父组件中先准备一个修改数据的方法
changeNum(val) {
this.palnum += val
}
},
})
</script>
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
