foreword
The content of this chapter is a simple study of VUE grammar and related grammar discussions.
Previous article address:
Vue 3: Play with web front-end technology (4) - Lion King's Blog - CSDN Blog
Next article address:
Vue 3: Play with web front-end technology (6) - Lion King's Blog - CSDN Blog
1. Simple learning of grammar
1. Import module
In Vue, we can import modules in different ways. Here are a few common practical examples:
(1) Import a single module and assign it to a variable:
import moduleA from './moduleA';
In this example, we import the module named moduleA and assign it to the variable moduleA. We can access the imported module using moduleA.
(2) Import multiple modules and assign them to different variables:
import { moduleA, moduleB } from './modules';
In this example, we import both moduleA and moduleB modules from a file called modules and assign them to the variables moduleA and moduleB respectively. We can access imported modules using these two variables.
(3) Import the entire module and use its namespace:
import * as utils from './utils';
In this example, we import a module called utils and assign all of its exports to the variable utils. We can use utils to access all methods and properties of imported modules.
(4) Import the module and rename it:
import { moduleA as myModuleA } from './modules';
In this example, we import moduleA from a file called modules and rename it to myModuleA. We can use myModuleA to access the imported module.
2. How to create a Vue application instance
Use the global function createApp, which is also the default way for vue-cli to create a project.
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')3. How to write vue files
Just three parts: html, js, css
4. Take App.vue and HelloWorld.vue as an example to see the interaction between VUE files
App.vue is rewritten as follows:
<template>
<HelloWorld msg="欢迎来到我的世界！！！"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
HelloWorld.vue is rewritten as follows:
<template>
<h1>{
{ msg }}</h1>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style>
</style>In fact, the interaction logic between these two Vue files is very simple. Let me explain step by step:
(1) In the App.vue file, we first introduced the HelloWorld.vue component.
import HelloWorld from './components/HelloWorld.vue'This is done to be able to use the HelloWorld component in App.vue. This is due to the fact that in the component configuration of HelloWorld.vue, we defined a name attribute to identify the name of the component.
name: 'HelloWorld'(2) Next, we registered the HelloWorld component in the component configuration of App.vue.
components: {
HelloWorld
}This is done so that the HelloWorld component can be used in App.vue.
(3) In the template of App.vue, we used the HelloWorld component and passed a value named "msg" through the attribute props.
<HelloWorld msg="欢迎来到我的世界！！！"/>The "msg" attribute value here is a string type, which will be used as the value of the "msg" attribute of the HelloWorld component.
(4) In the HelloWorld.vue file, we first define a template in which we use the value of the "msg" attribute.
<h1>{
{ msg }}</h1>The "msg" here is passed in through the props attribute. This is due to the fact that we defined a props property in the HelloWorld.vue file, which is similar to an external interface and is used to receive values from other vue files, which contains a property named "msg". This is done to declare that the HelloWorld component can accept a property called "msg" and that the property's type is string.
props: {
msg: String
}Basically, this is the interaction logic between these two Vue components. By using the props attribute, a value is passed to the HelloWorld.vue component in App.vue, and the value is used in HelloWorld.vue. In this way, the HelloWorld.vue component can perform corresponding logic operations and rendering according to the passed value.
2. Related Grammatical Discussion
1. Why does import App1 from './App.vue' have the same effect as import App from './App.vue'?
The two import statements have the same effect because in this case, the same module or file is being imported.
In JavaScript, use the import statement to import functions, variables, or components exposed in other modules (or files). In this example, './App.vue' is a relative path to a Vue component file.
When you use the import statement, you can give the imported module or file a new name for easy reference in your code. Here, App1 and App are the names.
The difference between the two import statements is the name of the import. If you use import App1 from './App.vue', then you can use App1 to refer to this Vue component in subsequent code. Similarly, if you use import App from './App.vue', you can use App to reference this Vue component.
So, no matter which name you use, you end up importing the same Vue component, and they have the same effect. Which name to use is mostly a matter of your personal preference and the readability of your code.
2. './App.vue' has only one default name App, why can import App1?
In this code, a component called `App` is defined in `App.vue`, and then the `components` option is used to register another component `HelloWorld` as a subcomponent of the `App` component.
When importing `App1`, since `App.vue` exports a default exported object, any name can be used when importing, which is equivalent to giving the value of App to the variable App1, similar to the effect of renaming. So it is perfectly legal for you to import `App.vue` as `App1`.
In fact, the name when importing does not affect the imported content, the key is that the import path must be correct. Generally speaking, we will use the same variable name as the exported component name to import the component to improve the readability of the code. However, feel free to give imported components a different variable name without issue.