An article briefly analyzing the single file component in Vue

Single file components are often used in actual development, so how to create a single file component? So in this article, we will briefly introduce the single-file component.

1. Create a single file component

1. Switch to the directory where you want to create the file. I am switching to the desktop directory. Of course, it is also You can switch according to your own needs. The command is cd directory/file name

2. Open cmd and enter npm config set registry https://www.php.cn/link/591d4b6b2ae94b362529d9dcbe8ea63f Switch/set to Taobao mirror. [Related recommendations: vuejs video tutorial, web front-end development]

Install global vue scaffolding (simple and convenient to use anywhere)npm install -g @vue/cli

See the following content to indicate successful installation

3. Use the vue create project name to create a project. After success, there will be a vue version to choose from (press the down arrow on the keyboard to switch). Here we choose Vue2

After the command is executed, if it looks like the picture below, it means the creation is successful (very considerate, the first line of blue code below is to switch to the directory where the creation was successful, and the second line is to run the vue project)

4. After successful creation, the project will come with a project as shown in the picture below (at this point, a vue project based on scaffolding is completed)

5. You can directly search for the file you just created, and then drag it directly into vscode (there are the following files). We can find the components folder under src, and there is a file named HelloWorld.vue in it. file, here is the code for the above picture

The following is a brief summary of the files in the project, file creation It's over, we have to know what this is for,

Curious friends will find a problem, that is, there is a vue file under node_module, which The file also contains various versions of vue, such as: vue.js , vue.runtime.js, etc. Stacking vue versions, let’s take a look at the differences between them

Second, about different versions of Vue

## The difference between #vue.js and vue.runtime.xxx.js

(1) .vue.js is complete Version of Vue, including: core function template parser.

(2) . vue.runtime. xxx. js is the running version of Vue, which only contains core functions and does not have a template parser.

Because vue.runtime.xxx.js does not have a template parser, the template configuration item cannot be used, and you need to use

renderThe createElement function received by the function specifies the specific content.

Three, vue.config.js configuration file

Use vue inspect > output.js to view the Vue scaffolding default allocation.

Use vue.config.js to customize the scaffolding (the following is the configuration of vue.config.js for reference)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

Four, ref attribute

1. It is used to register reference information for elements or sub-components. It can also be said to be used to replace id

2. Applied in htm1 What is obtained on the label is the real DOM element, and what is applied to the component label is the component instance object(VueComponent )

• Usage: Mark:

  ....

  or Get: this.$refs. xxx

##Five, configuration item props

Function:

Let the component receive data from the outside

(1) Pass data:

(2) Receive data:

The first way (receive only)

  props: ["name"]

The second way Method (restriction type)

  props: {
    name:string,
    age:Number
  }

The third method (restriction type, restriction necessity, specifying default value)

  props :{
    name : {
    type:String, //类型
    required:true, //必要性
    default:'老王' //默认值
    }
  }

Note: props are read-only, although it is read-only, it is still ok is modified, the bottom layer of Vue will detect the modification of props. If modifications are made, a warning will be issued. If the requirements really need to be modified, then copy the contents of props to the data, and then modify the contents of the data to achieve the requirements

6, mixin(mix)

##Function : You can extract the configuration shared by multiple components into a mix-in object Usage method:

The first step is to define the mix, for example: data(){ ....}, methods:{....}}, take out the methods or data configuration items of the component and put them in mixin.js. Here, the methods are put in mixin.js

The second step is to use mixin

Seven, plug-in

Function: Used to enhance Vue

Essence: An object containing the insta1l method. The first parameter of install is Vue, and the second and subsequent parameters are the data passed by the plug-in user.

1. Define the plug-in: install = function (Vue, options) {//Add the global filter Vue.filter(....), you can also add other ones here, such as custom instructions, etc.

2. Use plug-in: Vue.use()

##8, scoped

The role of scoped styles: Make styles take effect locally to prevent conflicts.

Writing:

Generally, scoped is only written in sub-components and does not need to be written in the app, because most of the styles in the app are basic styles. Every component can be used. If scoped is added, it will only take effect on this component and other components cannot use it

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of An article briefly analyzing the single file component in Vue. For more information, please follow other related articles on the PHP Chinese website!