Vue component programming and initialization

Three steps for using components in Vue

1, Define components (create components)

2, Register components

3, Use component (write component label)

Three steps for non single file components

Define components

Create using Vue.extend(options), where options and new Vue(options) are almost the same, but there are still differences

The differences are as follows:

el should not be written, because ultimately all components must be managed by a vm, and the el in the vm determines which container to serve
Data must be written as a function to avoid reference relationship when components are reused. It is written as a function. Each data taken is independent and will not change due to a change

Note: use template to configure the structure of components - HTML

// Create a student component const student = Vue.extend({ template:` <div> <h2>Student name:{}</h2> <h2>Student age:{}</h2> </div> `, data(){ return{ studentName:"Zhang San", studentAge: 18 } } })

Note: when writing structures in the template, you need to add div to the periphery for wrapping

Register components

Local registration: pass in the components option when you rely on new Vue

Note: components have s, so it is easy to make mistakes here

// Register components new Vue({ el:"#root", components:{ school:school, student:student } })
Global registration: Vue.component('component name ', component)

Vue.component("school", school)

Authoring component labels

<school></school>

Three steps of single file component

definition

Create a Vue file and write html css javascript in this file

< template > < / template > -- write structure (HTML)

< script > < / script > -- write business logic (JS)

< style > < / style > -- write style (CSS)

Student.vue

<template> <div> <h2>Student Name:{}</h2> <h2>Student age:{}</h2> </div> </template> <script> export default { data(){ return{ studentName:"Zhang San", age:16 } } } </script> <style> </style>

School.vue

<template> <div> <h2>School Name:{}</h2> <h2>School address:{}</h2> </div> </template> <script> export default { data(){ return{ schoolName:"tsinghua", address:"Beijing" } } } </script> <style> </style>

App.vue

<template> </template> <script> import School from "./School" import Student from "./Student" export default { name:App, components:{ School, Student } } </script> <style> </style>

register

main.js

import App from "./App" new Vue({ el:"#root", components:{ App:App } })

quote

<body> <div id="root"> <App></App> </div> <script src="./main.js"></script> </body>

However, an error will be reported. Cannot use import statement outside a module. This is because the scaffold is not used, resulting in problems in the import in the code and no effect

Nesting of components

// Create a student component const student = Vue.extend({ template:` <div> <h2>Student name:{}</h2> <h2>Student age:{}</h2> </div> `, data(){ return{ studentName:"Zhang San", studentAge: 18 } } }) // Create a school component (embedded student component) const school = Vue.extend({ template:` <div> <h2>School name:{}</h2> <h2>School address:{}</h2> <student></student> </div> `, components:{ student:student }, data(){ return{ schoolName:"Peking University", address:"Beijing" } } }) // Registration component (embedded school component) new Vue({ el:"#root", components:{ school:school } })

About VueComponent

The essence of the previously created school component is a constructor named VueComponent, which is not defined by the programmer, but generated by Vue.extend
We only need to write < school / > or < School > < / School >. Vue will help us create an instance object of the school component when parsing, that is, Vue will help us execute: new VueComponent(options)
Special note: each time Vue.extend is called, a new VueComponent is returned
About the direction of this:
1. Component configuration in progress
  
  The data function, the function in method, the function in watch, and the function in computed all have this as VueComponent instance objects
2. new Vue(options) configuration
  
  The data function, the function in method, the function in watch, and the function in computed all have this as Vue instance objects

Notes on component naming

One word composition:

First Chinese writing (initial lowercase): school
The second writing method (initial capital): School

Regardless of the case of the initial letter, the last component parsed by Vue is capitalized

Multiple words:

The first way to write: my school
The second writing method: MySchool (Vue scaffold support is required)

Scaffolding

Initialize scaffold

Step 1 (only for the first time): install @ vue/cli globally

npm install -g @vue/cli

Step 2: switch to the directory where you want to create the project, and then use the command line to create the project

vue create xxxx

Step 3: start the project

npm run serve

remarks:

If the download is slow, please configure NPM Taobao image: npm config set registry http://registry.npm.taobao.org
Vue scaffolding hides all webpack related configurations. To view the specific webpack configuration, please execute: Vue inspect > output.js

Module project structure:

├──node_modules
├──public
│♪ favicon.ico: tab Icon
│ └ -- index.html: main page
├──src
│♪ assets: store static resources
││└──logo.png
│ │ - component: store components
││└──HelloWorld.vue
│ │ - App.vue: summarize all components
│ │ - main.js: entry file
. gitignore: configuration ignored by git version control
Configuration - babel.config.js: configuration file of Babel
Application package.json: application package configuration file
Application - README.md: application description file
package-lock.json: package version control file