✨ catalogue
🎈3.2 code implementation componentization (local components)
🎈3.3 register global components
😁4, Component naming conventions
🥇 1, Recognize components
🔊 1. Definition
A component is a collection of code (html, css, js, image...) used to achieve local (specific function) effects
🔊 1.2. Function
Because the function of an interface is very complex, the development of components can reuse code, simplify project coding, and improve the operation of xiaolv.
🥇 2, Using components
🔊 2.1 three steps
(1) Define components (create components): use vue Extend (options) creation. Options and the options passed in when new Vue (options) are almost the same, but there are also some differences:
There is no need to write about el mounting, because ultimately all components need to be managed by a vm, and the el in the vm decides which container to serve.
Data must be written as a function type to avoid the reference relationship of data when components are reused.
template can configure component structure in scaffold.
(2) Register components
- Local registration: pass in the components option when relying on new vue.
- Global registration: vue.component('component name ', component)
(3) Writing component labels (using components)
🥇 3, Modular scaffold
🔊 3.1 knowledge package
node_modules: project dependencies
public: the static resources in it will not be affected by webpack when packaged, and they will be copied directly to dist (equivalent to the root directory at the beginning)
The assets in src also contain static resources, which will be affected by webpack. The resources in src will be compressed and finally returned to dist
.gitignore: version management ignores files
babel.config.js: configure Babel (convert ES6+ to ES5). Babel itself cannot be converted, because there is a preset, there are many plug-ins, and the conversion depends on plug-ins, and there are some configurations
jsconfig.json: configuration of js, baseUrl (basic path), paths (match with baseUrl and use./scr/*, absolute path)
package-lock.json: record the details of the installed package (function: check whether the package conflicts, and improve efficiency in npm i)
package.json: package configuration, including at least five items: name, version, private, dependencies, and devdependences
readme: project specification
vue.config.js: provided when the scaffold creates the project, because webpackconfig.js cannot be found
When opening a web page, send a request to webpack dev sever to start the service, and configure HTTP proxy middleware to proxy, so you can enter the page when running
When packaging, webpack hides the dist folder, but it still exists in memory
🔊 3.2 code implementation componentization (local components)
Components is a component item in which all components are created.
assets. It stores resources, such as img pictures, video and audio
Custom naming vue this is the component you created
APP.vue is a component, big brother
main.js is the component entry, and all components should be introduced
Well, don't talk about it, just go to the code,
Create component MyCpn (local component)
//Create component
<template>
<div>
<h2>I am MyCpn assembly</h2>
</div>
</template>
<script>
export default {//Export components
name:'MyCpn'
}
</script>
<style scoped>
h2{color: aqua;}
</style>Register components, use components
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<my-cpn></my-cpn>
</div>
</template>
<script>
import MyCpn from './components/MyCpn.vue'
export default {
name: 'App',
components: {//Register components
MyCpn
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
🔊 3.3 register global components
Register global components in the main.js component entry, and import
import Vue from 'vue'
import App from './App.vue'
import MyHeader from './components/MyHeader.vue'//Import global components
Vue.config.productionTip = false
Vue.component('my-header',MyHeader);//Register global components
new Vue({
render: h => h(App),//Render render page
}).$mount('#App') / / it is attached to the container with id app and serves the app container, which is equivalent to el
Add global components in app container
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<my-cpn></my-cpn>
<my-header></my-header>
</div>
</template>
<script>
import MyCpn from './components/MyCpn.vue'
export default {
name: 'App',
components: {//Register components
MyCpn
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Reuse global components in other components
🥇 IV. component naming specification
Several points for attention:
1. About component name:
One word composition:
Writing method (initial lowercase): school
The second way to write (initial capital): School
Multiple words:
Writing method (kebab case name): my school
The second writing method (named by CamelCase): MySchool (Vue scaffold support is required)
remarks:
(1). Component names should avoid some element names in HTML as much as possible, such as H2 and H2.
(2) . you can use the name configuration item to specify the name of the component in the developer tool.
2. About component labels:
The first way to write: < School > < /school>
The second way of writing: <school/>
Note: when scaffolding is not used, <schoo1/> will cause subsequent components to fail to render.
3. An abbreviation:
Const school = Vue. Extend (options) can be abbreviated as: const school = options
Dear brothers and sisters, Xiaobian summed it up late at night. Xiaobian is a beginner. If there is something wrong or not in place, we can still look forward to Haihan. We can exchange and learn together. I hope we can continue to walk firmly on this road and become more and more beautiful 😊😊😊😊😊
📣🔔 In addition, I wish you all a happy holiday. Although the blessing is late, it is always better than nothing
Happy holidays. Sanlian hufen Gaga CSDN community
https://bbs.csdn.net/topics/607617003 Here is a small red envelope. You can try your luck 👀👀👀👀👀👀