Examples of vue development skills worth collecting
In this article, we will elaborate on some useful development skills of vue from many aspects. They are worth collecting. I hope they can help everyone.
1. The clever use of placeholder and computed
Form development is definitely an indispensable part of daily development, but design drawings often have form default values, such as: 
The demand point of the demander is : display the default value when no value is entered, and display the input when the value is entered. value.
Usually you can think of using placeholder to solve this problem, and usually use v-model to bind the value in data. Then, the value of data is set to the default value as empty
//script
data(){
return {
index:0,
name:''
}
}
//template
<input type="number" placeholder="默认值index" v-model="index"/>
<input type="text" placeholder="默认值name" v-model="name"/>The above effect is that the value of the placeholder of the first input cannot be displayed, and the value of index is displayed: 0 , does not meet the requirements
The second type can display the value of the placeholder, and the requirements are met.
But for some complex requirements, for example, allowing the user to select a city name (city) and a country name (country), and finally display them in a variable (countryAndCity), in this case computed
//template
<input type="text" placeholder="城市" v-model="city"/>
<input type="text" placeholder="国家" v-model="country"/>
<input type="text" placeholder="国家+城市" v-model="countryAndCity"/>
//script
data(){
return {
city:'',
country:''
}
},
computed:{
countryAndCity () {
let str = ''
if(this.city && this.country){
str = `${this.city}+${this.country}`
}
return str
}
}You need to make a judgment above. The result will be displayed when city and country have values. Otherwise, the value of placeholder will be displayed.
2. Design of single-select and multi-select selections
Such as radio-select and multi-select buttons designed by designers
Radio buttons are relatively simple
//template
<li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li>
//script
data(){
return {
currentIndex:0，
list:['aa','bb','cc','dd']
}
},
methods:{
select(index){
this.currentIndex = index
}
}The above is very simple. You can understand it after just a look. This is a single-select situation. If multi-select is the case, then you need to change your thinking.
First change the data format.
data(){
return {
list:[
{text:'aa',isActive:false},
{text:'bb',isActive:false}
{text:'cc',isActive:false}'
]
}
},
methods:{
select(index){
this.list[index].isActive = !this.list[index].isActive
}
}Then the template will become like this
<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>3. Use of dynamic components and asynchronous components
Dynamic components are generally rarely used, but you need to dynamically introduce components It's really useful when using it. It is the core of the component configuration system we have done before. I use a dynamic component loop, then use is to get the component name, and use props to get the custom props of each component
<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components>
componentList:[{ name:'index',props:{title:'title'}}]4. Server-side rendering of created and mounted
created and mounted The window object exists during client rendering, so it can be operated directly.
But during server-side rendering, the windows of both of them do not exist, so a judgment must be added in front of all logic
if(typeof window !== 'object') return ;
5.The wonderful use of this.$emit
Based on component thinking, many times we will split a page into several components, and then extract some common components, such as the dialog pop-up component. Its opening and closing are based on the data of the referenced component page. Determined by a value,
//app.vue
<dialog v-if="isDialog"></dialog>
data(){
return {
isDialog:false
}
}
methods:{
showDialog(){
this.isDialog = true
}
}But the close button is usually written inside the dialog component, that is to say, there is no such button that can be clicked on the reference component page,
So, you can put it in the dialog The signal of the click time is passed out, the reference component page receives the signal, and then controls the shutdown
//dialog.vue
<p @click="close"> 点击关闭 </p>
methods:{
close() {
this.$emit('close')
}
}
//app.vue
<dialog v-if="isDialog" @close="closeDialog"></dialog>
data(){
return {
isDialog:false
}
}
methods:{
showDialog(){
this.isDialog = true
},
closeDialog(){
this.isDialog = false
}
}The general idea is to put the actual closing operation in isDialog page for easy operation.
There will be a public component writing method that does not reference this way and is referenced directly in the methods method. Please stay tuned
6.css scoped
css in vue can be used The scoped key is used to limit the scope of css.
<style scoped>...</style>
This is used every day, because there is no need to consider the overlapping of class names, plus the use of css processors such as sass, less, stylus, postcss, etc. The effect is simply overwhelming.
But if you want to change the css style of the body element, but don’t want to change the public layout template. Then you can write two style tags
<style> body{...} </style>
<style scoped> .. .</style>in a vue file. Related recommendations:
Vue implementation of splitting mobile phone numbers in the number input box example tutorial
detailed explanation of vue syntax splicing strings
#vue detailed explanation of using eventbus to pass values between components
Detailed explanation of vue transition animation
Vue implements a simple example of the 60-second countdown function of the verification code
The above is the detailed content of Examples of vue development skills worth collecting. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Four recommended AI-assisted programming tools
Apr 22, 2024 pm 05:34 PM
This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git
Win11 Tips Sharing: Skip Microsoft Account Login with One Trick
Mar 27, 2024 pm 02:57 PM
Win11 Tips Sharing: One trick to skip Microsoft account login Windows 11 is the latest operating system launched by Microsoft, with a new design style and many practical functions. However, for some users, having to log in to their Microsoft account every time they boot up the system can be a bit annoying. If you are one of them, you might as well try the following tips, which will allow you to skip logging in with a Microsoft account and enter the desktop interface directly. First, we need to create a local account in the system to log in instead of a Microsoft account. The advantage of doing this is
Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent
Apr 07, 2024 am 09:10 AM
On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A
Learn how to develop mobile applications using Go language
Mar 28, 2024 pm 10:00 PM
Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head
A must-have for veterans: Tips and precautions for * and & in C language
Apr 04, 2024 am 08:21 AM
In C language, it represents a pointer, which stores the address of other variables; & represents the address operator, which returns the memory address of a variable. Tips for using pointers include defining pointers, dereferencing pointers, and ensuring that pointers point to valid addresses; tips for using address operators & include obtaining variable addresses, and returning the address of the first element of the array when obtaining the address of an array element. A practical example demonstrating the use of pointer and address operators to reverse a string.
What are the tips for novices to create forms?
Mar 21, 2024 am 09:11 AM
We often create and edit tables in excel, but as a novice who has just come into contact with the software, how to use excel to create tables is not as easy as it is for us. Below, we will conduct some drills on some steps of table creation that novices, that is, beginners, need to master. We hope it will be helpful to those in need. A sample form for beginners is shown below: Let’s see how to complete it! 1. There are two methods to create a new excel document. You can right-click the mouse on a blank location on the [Desktop] - [New] - [xls] file. You can also [Start]-[All Programs]-[Microsoft Office]-[Microsoft Excel 20**] 2. Double-click our new ex
VSCode Getting Started Guide: A must-read for beginners to quickly master usage skills!
Mar 26, 2024 am 08:21 AM
VSCode (Visual Studio Code) is an open source code editor developed by Microsoft. It has powerful functions and rich plug-in support, making it one of the preferred tools for developers. This article will provide an introductory guide for beginners to help them quickly master the skills of using VSCode. In this article, we will introduce how to install VSCode, basic editing operations, shortcut keys, plug-in installation, etc., and provide readers with specific code examples. 1. Install VSCode first, we need
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
