1. Slot
normal slot, named slot, scoped slot
Slots allow us to pass templates to child components when calling them.
The <slot> element acts as an outlet to carry distribution content. A <slot> outlet without a name would carry the implicit name "default".
Everything in the parent template is compiled in the parent scope; everything in the child template is compiled in the child scope.
### 1. Default slot
A slot without a name is the default slot
<slot>123</slot>
<slot name="default">123</slot>
### 2. Named Slots
slot with name
<slot name="slot2">123</slot>
### 3. Slot filling
<my-com>hello</my-com>
In which slot of the template is the content filled?
designated slot
<my-com>
<template v-slot:default>
hello
</template>
<template v-slot:slot>
123
</template>
<template #slot>
123
</template>
</my-com>
### Slot declaration {template:`<slot>slot default template</slot>`}
Slot Template
### 1. Default template
<slot>Slot Default Template</slot>
### 2. Customize the template
<my-com>
<template #name>
Slot custom template
</template>
</my-com>
In the slot default template, you can directly access the data of the child component, you can pass props Indirect access to parent component data
In the slot custom template, the data of the parent component can be directly accessed, and the data of the child component can be accessed indirectly through the slot property(slot scope)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<my-a :arr="arr">
<div>I am a child component</div>
<template v-slot:header> start content</template>
<template v-slot:center> middle content</template>
<template v-slot:footer> end content</template>
<template slot-scope="scope"> {{scope.row}}</template>
</my-a>
</div>
<script>
let myA = {
props: ['arr'],
data() {
return {
msg: '222'
}
},
template: `
<div>
A components
<slot name='default'></slot>
<div class="header"><slot name='header'></slot></div>
<div class="center" >
<slot name='center'></slot>
</div>
<div class="footer"><slot name='footer'></slot></div>
<ul>
<li v-for="item in arr">
<slot v-bind:row='item'></slot>
</li>
</ul>
</div>
`
};
Vue.component('my-a', myA)
new Vue({
el: "#app",
data: {
arr: [1, 2, 3, 4]
},
methods: {}
})
</script>
</body>
</html>2. Custom instructions
directive
Most directives in Vue are called with v- . However, sometimes the directives provided by Vue do not meet our needs, and at this time we need custom directives.
Directives allow us to perform low-level operations on normal DOM elements. Can be registered globally or locally
Global registration
Use Vue.directive
Partial registration
Add new option directives in Vue instance or component
hook function
Hook functions can add code at critical moments in the instruction's life cycle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<input v-focus="msg" type="text" >
{{msg}}
<input v-myshow="msg" type="text" >
</div>
<script>
Vue.directive('focus',{
inserted(el){
el.focus()
},
bind(el,binding,vnode){
el.style.backgroundColor=binding.value
}
})
new Vue({
directives:{
'myshow':{
inserted(el){
},
bind(el,binding,vnode){
el.value=binding.value;
}
}
},
el:"#app",
data:{
msg:'red'
},
methods:{}
})
</script>
</body>
</html>3.render rendering function
Vue recommends using templates to create your HTML in the vast majority of cases. However, in some scenarios, you really need the full programming capabilities of JavaScript. Then you can use render functions, which are closer to the compiler than templates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-a :friuts="friuts">
list
</my-a>
</div>
<script>
let myA={
props:{
friuts:{
type:Array,
}
},
beforeMount(){
alert('beforeMount')
},
mounted(){
alert('mounted')
},
render(h){
alert('2222')
let lis=this.friuts.map(item=>{
return h('li',{},item)
})
return h('ul',{},[this.$slots.default,...lis])
},
// template:`
// <div>
// <ul>
// <li v-for='item in friuts'>{{item}}</li>
// </ul>
// </div>
// `,
data(){
return {
}
}
}
new Vue({
components:{
'my-a':myA
},
el:"#app",
data:{
friuts:['apple','banana','Pineapple']
},
methods:{}
})
</script>
</body>
</html>4. Filters
Vue.js allows custom filters that can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter is supported since 2.1.0+). Filters should be added at the end of JavaScript expressions, indicated by the "pipe" | symbol:
<!-- in double curly braces --> {{ message | fi lt erMethod }} <!-- in `v-bind` -->
import first `moment`Third-party library, and then proceed to the next operation. introduce moment For implementation only, not related to filters.
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/af.js"></script>
<script>
// Global registration
Vue.filter("fmtDate_global", function (date) {
return moment(date).format("YYYY-MM-DD HH:mm:ss");
// Or return the time processing function written by yourself
})
new Vue({...})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div id="app">
<!-- use filter -->
<div>{{ new Date() | fmtDate_global}}</div>
<div :title="new Date() | fmtDate_global">Mouse over to see time</div>
</div>
<script>
// Globally register filters
Vue.filter("fmtDate_global", function (date) {
return moment(date).format("YYYY-MM-DD HH:mm:ss");
})
new Vue({
el: '#app',
})
</script>
</body>
</html>5. Plugins
plugin
Plugins are often used to add global functionality to Vue. Vue.js plugins should expose an install method. The first parameter of this method is the Vue constructor, and the second parameter is an optional options object:
MyPlugin.install = function (Vue, options) {
// 1. Add a global method or property
Vue.myGlobalMethod = function () {
// logic...
}
// 2. Add global resources
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// logic...
}
...
})
// 3. Inject component options
Vue.mixin({
created: function () {
// logic...
}
...
})
// 4. Add instance method
Vue.prototype.$myMethod = function (methodOptions) {
// logic...
}
}
Plugins are used via the global method Vue.use() . It needs to be done before you call new Vue() to start the app:
// call `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...component options
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div id="app">
{{time | fmtTime}}
<input type="text" v-focus>
</div>
<script>
let MyPlugin = {
install(Vue, options) {
Vue.filter('fmtTime', (val) => {
return moment(val).format('YYYY--MM-DD')
}),
Vue.prototype.$message=function(val){
alert(val)
},
Vue.directive('focus', {
inserted(el) {
el.focus()
},
bind(el, binding, vnode) {
el.style.backgroundColor = binding.value
}
})
},
};
Vue.use(MyPlugin)
new Vue({
el: "#app",
data: {
time: new Date().getTime()
},
created(){
this.$message('request succeeded')
},
methods: {}
})
</script>
</body>
</html>