Directory
slot
custom directive
directive
global registration
partial registration
hook function
render rendering function
filter
plug-in
plugin
slot
Normal slots, named slots, scoped slots
Slots allow us to pass templates for subcomponents when calling them.
The
element acts as an outlet for hosting distribution content. A exit with no name will have the implicit name “default”. Everything in a parent template is compiled in the parent scope; everything in a child template is compiled in the child 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="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-a>
{<!-- -->{msg}}
<!-- The parent component calls the child component to provide a template -->
<div :title="msg">I am a block-level element</div>
<img width="150px" src="../../HTML & amp;CSS/images/ad10.jpg">
<!-- <header>head content</header>
<article>Intermediate content</article>
<footer>bottom content</footer> -->
<!-- The parent component calls the child component to provide a specific template -->
<!-- <template v-slot:header> -->
<!-- When binding a named slot, it can be shortened to #header -->
<template #header>
<!-- <template v-slot:header> -->
<h1>Content of the head</h1>
</template>
<template v-slot:article>
<p>I am the content of the article</p>
<p>I am the content of the article</p>
</template>
<template v-slot:footer>
<div>I am the bottom content</div>
</template>
<!-- Scope slot -->
<template v-slot:default="scope">
<!-- <template v-slot="scope"> -->
<!-- <template slot-scope = "scope"> -->
<div>
{<!-- -->{scope}}
</div>
</template>
</my-a>
</div>
<script>
let myA = {
template:`
<div>
myA component
<slot name='default'>submit</slot>
<header>
<slot name='header'></slot>
</header>
<article>
<slot name='article'></slot>
</article>
<footer>
<slot name='footer'></slot>
</footer>
<slot v-bind:subMsg='subMsg'></slot>
</div>
`,
data(){
return {
msgA:'I am a subcomponent',
subMsg:'I am the attribute of the subcomponent'
}
}
}
new Vue({
components: {
'my-a':myA
},
el:'#app',
data:{
msg:'I am msg in the parent component',
},
methods:{},
})
</script>
</body>
</html>
Custom directive
directive
Most commands in Vue are called with v-. However, sometimes the instructions provided by Vue do not meet our needs, and at this time we need custom instructions.
Directives allow us to perform low-level operations on ordinary 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
The hook function can add code at a critical moment in the life cycle of the instruction
<!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="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]"></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>
render rendering function
Vue recommends using templates to create your HTML in most cases. However, in some scenarios, you really need the full programming capabilities of JavaScript. At this point 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="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-a :friuts="friuts">
the 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>
filter
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”
|notation:{{ message | filterMethod }}
//First introduce `moment` third-party library, and then proceed to the next operation. The introduction of moment is only for implementing functions and has nothing to do with filters.
<script src="//i2.wp.com/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="//i2.wp.com/cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="//i2.wp.com/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 view time</div>
</div>
<script>
// global registration filter
Vue. filter("fmtDate_global", function (date) {
return moment(date).format("YYYY-MM-DD HH:mm:ss");
})
new Vue({
el: '#app',
})
</script>
</body>
?
</html>
plugin
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 callnew 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="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="//i2.wp.com/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 successful')
},
methods: {}
})
</script>
</body>
?
</html>