“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”
slot
What is a slot?
The concept Vue implements a set of content distribution apis, providing components with a
element as an outlet for hosting distribution content. Simply put, the
element acts as a content distribution slot in the component template. The
element itself will be replaced.
Content of the slot
The syntax starts by creating a new file to write our slot
// slot.vue
<template>
<div>
<div>
<! -- The content of the distribution content will be loaded to the slot tag location -->
<slot></slot>
</div>
<p>Account:<input /></p>
<p>Password:<input type="password" /></p>
<button>The login</button>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
Copy the codeThen we use it in another component (SlotTest)
// SlotTest.vue
<template>
<div>
<slotCom>
<h2>I'm the content distributed to slot</h2>
</slotCom>
</div>
</template>
<script>
/ / introduction
import slotCom from ".. /views/slot";
export default {
components: {
slotCom
},
}
</script>
<style>
</style>
Copy the codeFrom the rendering (below) we can see that the h2 tag sentence has been rendered on the page and the tag position corresponds to the tag in the slot.vue file
If the template in <SlotTest> does not contain a <slot> element, anything inside the component's symmetric tag is discarded.Copy the codeCompile scope
When you want to use data in a slot, for example:
<navigation-link url="/profile">
Logged in as {{ user.name }}
</navigation-link>
Copy the codeThis slot can access the same instance property (i.e. the same “scope”) as the rest of the template, but not the scope of
<navigation-link url="/profile">
Clicking here will send you to: {{ url }}
/* The 'URL' here will be undefined because its contents are passed to _
and not defined inside the
component. * /
</navigation-link>
Copy the codeAs a rule, remember:
Everything in the parent template is compiled in the parent scope; Everything in a subtemplate is compiled in a subscope.
Backup the content
The
element can have backup content inside it, and the component will eventually render backup content if nothing is inserted inside the current component’s symmetric tag. In simple terms, this is equivalent to the default value of the slot.
For example,
// a button component that sets the backup content to the text Submit
<button type="submit">
<slot>Submit</slot>
</button>
// When I use
in a parent component and do not provide any slot content:
<submit-button></submit-button>
// The backup "Submit" will be rendered:
<button type="submit">
Submit
</button>
// But if we provide content:
<submit-button>
Save
</submit-button>
// The supplied content will be rendered instead of the backup content:
<button type="submit">
Save
</button>
Copy the codeA named slot
Concept Sometimes we need multiple slots for components. You can insert different components into different slots by using named slots and assigning a name attribute to the
element in the component. When providing content to a named slot, we can use the V-slot directive on a
element to insert the corresponding content into the specified
element
grammar
// login-component.vue
<template>
<div>
<div>
<slot>Backup the content</slot>
</div>
<p>Account:<slot name="user"></slot>
</p>
<p>Password:<slot name="psd"></slot>
</p>
<button>The login</button>
<slot></slot>
</div>
</template>
/ / use
<login-component>
<h2>I'm the content distributed to slot</h2>
<template v-slot:user>
<! -- everything here will be inserted into the name="user" slot -->
<div>
123
</div>
</template>
<input slot="psd" type="password" placeholder="This element will be inserted into the name= PSD slot.">
<component-a slot="psd"></component-a>
</login-component>
Copy the codePay attention to
Like v-on and v-bind, v-slot has an abbreviation that replaces everything before the argument (v-slot:) with the character #. For example, V-slot :header can be rewritten as #header
<login-component>
<h2>I'm the content distributed to slot</h2>
<template #user>Everything here is inserted into the name="user" slot<div>
123
</div>
</template>
<template #psd>
<input type="password" placeholder="This element will be inserted into the name= PSD slot.">
</template>
</login-component>
Copy the codeI personally feel that slots are not used very much in project development and are often used for UI library development. For more information about slots, check out the official documentation cn.vuejs.org/v2/guide/co…
The filter
concept
Vue.js allows you to customize 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 supported as of 2.1.0+). The filter should be added at the rear, the JavaScript expression by the symbol “|” instructions:
grammar
Filter Supports global or local filters
Global filter
<div id="app">
{{str | capitalize}} // Hello
</div>
// Capitalize the first letter of the word
Vue.filter('capitalize'.function (value) {
if(! value)return ' '
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)})new Vue({
el: '#app'.data: {
str: 'hello'}})Copy the codeLocal filter
<div id="app">
<div v-for="(f,i) in friends" :key="i">
<h3>Name: {{balance ame}}</h2>
<p>Age: {{f.a ge}}</p>
<p>Gender: {{f.s ex | getSex}}</p>
</div>
</div>
<script>
new Vue({
el: '#app'.data: {
friends: [{
name: 'Max'.sex: 0.age: 19
},
{
name: 'Jack'.sex: 1.age: 22
},
{
name: 'Jacose'.sex: 1.age: 19
},
{
name: 'Tim'.sex: 1.age: 18
},
{
name: 'Jimmy'.sex: 0.age: 20
},
{
name: 'Tom'.sex: 0.age: 19}},],filters: {
getSex(type) {
if (type === 0) {
return 'male'
}
return 'woman'}}})</script>
Copy the codeNote: Filter supports passing multiple arguments, and arguments passed directly to substr are, in turn, the second and third…. of the filter method A parameter
<div>{{'hello' | substr(3.4)}}</div>
<script>
{
filters: {
substr(str,start,end) {
return str.substr(start,end)
}
}
}
</script>
Copy the codepractice
Implements a filter that returns the timestamp string to the time of the corresponding structure based on the specified template
/ / case
<p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56
<p>{1599639292100 | getTemplateTimeByDate('YYYY-M-d h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('YYYY 'M month D day hh:mm)}</p> -> 2020years9years9 15:04
new Vue({
el: '#app'.data: {
date: new Date().getTime()
},
filters: {
getTemplateTimeByDate(date, template) {
date = new Date(date)
let TimeObj = {
'Y+': date.getFullYear(),
'(M+)': date.getMonth() + 1.'(d+)': date.getDate(),
'(h+)': date.getHours(),
'(m+)': date.getMinutes(),
'(s+)': date.getSeconds()
}
for (key in TimeObj) {
let reg = new RegExp(key)
if (reg.test(template)) {
console.log(RegExp. $1)let time = TimeObj[key]
// Determine whether the current template time is two-digit or one-digit
// If the time is two digits, the time must be preceded by zero, 1 -> 01
// Do not add zero if it is one digit
if (RegExp.$1.length > 1) {
time = time >= 10 ? time : '0' + time
}
template = template.replace(reg, time)
}
}
return template
}
}
})
</script>
Copy the code