What are the precautions for using Vue.js?
This time I will bring you what are the precautions for using Vue.js, what are the precautions for using Vue.js, the following is a practical case, let's take a look.
1. When passing parameters, there must be a space between the second parameter and the preceding comma
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
2. Pay attention to the space
Correct format
<script>import Store from './store'console.log(Store)export default { ... }</script>
错误格式
<script> import Store from './store' console.log(Store)export default { ... }</script>3. The parent passes parameters to the child component
In the parent component
//模板中<template>
<div id="app">
//之前老版本 <conponent-a msgfromfather="父亲传给儿子!"></conponent-a>
<ConponentA msgfromfather="父亲传给儿子!"></ConponentA>
</div></template>//Js<script>export default { //注册ConponentA
components: {ConponentA},
}</script>In the child component
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button v-on:click="onClickMe()">点我啊,小样儿</button>
</div></template><script>
export default {
data () { return { msg: 'hello from component A!'
}
}, //props 可以是数组或对象，用于接收来自父组件的数据
props: ['msgfromfather'], methods: { onClickMe: function () { //打印从父组件传过来的值
console.log(this.msgfromfather)
}
}
}</script><style scoped>
h1 { font-weight: normal;
}</style>4. The child passes parameters to the parent component
The son tells The father needs to use vm.$emit and vm.$on to trigger events and listen for events
In child components
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1>{{msgfromfather}}</h1>
<button v-on:click="onClickMe()">点我啊,小样儿</button>
</div></template><script>
export default {
data () { return { msg: 'hello from component A!'
}
}, methods: { onClickMe: function () {// 子传父 触发当前实例上的事件
this.$emit('child-tell-me-something', this.msg)
}
}
}</script><style scoped>
h1 { font-weight: normal;
}</style>In parent components
<template>
<div id="app">
<p>child tells me: {{childWorlds}}</p>
<ConponentA msgfromfather="父亲传给儿子!" v-on:child-tell-me-something="listenToMyBoy"></ConponentA>
</div></template><script>import ConponentA from './components/componentA.vue'export default { data: function () { return { childWorlds: ''
}
}, components: {ConponentA}, watch: { items: { handler: function (items) {
Store.save(items)
}, deep: true
}
}, methods: { //监听
listenToMyBoy: function (msg) { console.log(msg) this.childWorlds = msg
}
}
}</script>In addition to this method, there are For other methods, please see the Vue.js official website
Self-defining componentSpecify attributesData type
export default { props: { slides: { type: Array, //数组 default: [] //默认值 } },
在加载完毕执行某个方法
mounted () { this.loadxxx() }<!-- Add "scoped" attribute to limit CSS to this component only --><style>......</style>
<!--css书写规范 可被继承的写在前面,不让继承的的写在后面--><style lang="stylus" rel="stylesheet/stylus">
#app
.tab
display: flex
width: 100% height: 40px
line-height: 40px
.tab-item
flex: 1 text-align: center
/* & > a & 代表父元素 tab-item 子元素选择器 */
& > a
display: block
font-style: 14px
color: rgb(77,85,93)
&.active
color: rgb(240,20,20)</style> can be used on the PC Through the following settings, it is achieved.
border-bottom: 1px solid rgba(7,17,27,0.1)
Deep into the movement of JS in JavaScript
Deep into the advanced application of DOM in JavaScript
In-depth knowledge of JavaScript
The above is the detailed content of What are the precautions for using Vue.js?. 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
Introduction to matters needing attention during the Mingchao test
Mar 13, 2024 pm 08:13 PM
During the Mingchao test, please avoid system upgrades, factory resets, and parts replacement to prevent information loss and abnormal game login. Special reminder: There is no appeal channel during the testing period, so please handle it with caution. Introduction to matters needing attention during the Mingchao test: Do not upgrade the system, restore factory settings, replace equipment components, etc. Notes: 1. Please upgrade the system carefully during the test period to avoid information loss. 2. If the system is updated, it may cause the problem of being unable to log in to the game. 3. At this stage, the appeal channel has not yet been opened. Players are advised to choose whether to upgrade at their own discretion. 4. At the same time, one game account can only be used with one Android device and one PC. 5. It is recommended that you wait until the test is completed before upgrading the mobile phone system or restoring factory settings or replacing the device.
How to start a live broadcast on Douyin for the first time? What should you pay attention to when broadcasting live for the first time?
Mar 22, 2024 pm 04:10 PM
With the rise of short video platforms, Douyin has become an indispensable part of many people's daily lives. Live broadcasting on Douyin and interacting with fans are the dreams of many users. So, how do you start a live broadcast on Douyin for the first time? 1. How to start a live broadcast on Douyin for the first time? 1. Preparation To start live broadcast, you first need to ensure that your Douyin account has completed real-name authentication. You can find the real-name authentication tutorial in "Me" -> "Settings" -> "Account and Security" in the Douyin APP. After completing the real-name authentication, you can meet the live broadcast conditions and start live broadcast on the Douyin platform. 2. Apply for live broadcast permission. After meeting the live broadcast conditions, you need to apply for live broadcast permission. Open Douyin APP, click "Me"->"Creator Center"->"Direct
Steps and precautions for installing pip without network
Jan 18, 2024 am 10:02 AM
Methods and precautions for installing pip in an offline environment. Installing pip becomes a challenge in an offline environment where the network is not smooth. In this article, we will introduce several methods of installing pip in an offline environment and provide specific code examples. Method 1: Use the offline installation package. In an environment that can connect to the Internet, use the following command to download the pip installation package from the official source: pipdownloadpip This command will automatically download pip and its dependent packages from the official source and save it in the current directory. Move the downloaded compressed package to a remote location
Steps and precautions for using localstorage to store data
Jan 11, 2024 pm 04:51 PM
Steps and precautions for using localStorage to store data This article mainly introduces how to use localStorage to store data and provides relevant code examples. LocalStorage is a way of storing data in the browser that keeps the data local to the user's computer without going through a server. The following are the steps and things to pay attention to when using localStorage to store data. Step 1: Check whether the browser supports LocalStorage
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
Steps and points for correctly installing and using pip in a Linux environment
Jan 17, 2024 am 09:31 AM
The installation steps and precautions of pip in the Linux environment Title: The installation steps and precautions of pip in the Linux environment When developing Python, we often need to use third-party libraries to increase the functionality of the program. As a standard package management tool for Python, pip can easily install, upgrade and manage these third-party libraries. This article will introduce the steps to install pip in a Linux environment, and provide some precautions and specific code examples for reference. 1. Install pip to check the Python version
Frequently Asked Questions and Notes: Using MyBatis for Batch Query
Feb 19, 2024 pm 12:30 PM
Notes and FAQs on MyBatis batch query statements Introduction MyBatis is an excellent persistence layer framework that supports flexible and efficient database operations. Among them, batch query is a common requirement. By querying multiple pieces of data at one time, the overhead of database connection and SQL execution can be reduced, and the performance of the system can be improved. This article will introduce some precautions and common problems with MyBatis batch query statements, and provide specific code examples. Hope this can provide some help to developers. Things to note when using M
