Getting started with vue notes

view

• Each component is a page (html/template+js+css/scss) to achieve the integrity of the component-componentization

• The main.js entry file, where you can import the used node_modules package (module) and plug-ins, ready to use, import-modular

• App.vue root component (root page),

• meta viewport mobile terminal window (viewport), you can use the viewport attribute of the meta tag of the Baidu interface

• If there is html{font-size:62.5%} in the global style-change the font to 0.625 times, in order to fit the mobile terminal, then 1rem at this time is equivalent to 1px of the computer!

• Create a project:
  
  Install scaffolding for the first time:
  cnpm install -g vue-cli (install vue cli2 scaffolding)
  vue init webpack demo1 (vue init webpack-simple demo1)
  npm run dev
  npm run build
  OR
  cnpm install -g @vue/cli ( Install vue cli3 scaffolding)
  vue create demo1
  Run: npm run serve (Run much faster than 2)
  Compile: npm run build

• vue cli3 provides a GUI interface to create (manage) projects:
  vue ui
  then enter locallhost:8080

One, js foundation

Two, package cache

1. Use directly:

2. Use after packaging:

Three, components

The component is mounted. The page is composed of components. Routing: dynamically mount components. Create a component, capitalize the beginning, component=template+js+scss, all content must be contained by the root node, the component must contain the root element (usually div). Custom label names cannot be repeated.

1. Component creation, introduction, mounting, and use

2. Value transfer between components

The value passed between components can be a variable (address), an object (function-address), or the entire component (class-address)!

-The parent component actively obtains the data and methods of the child component (the child component passes values ​​to the parent component):

The parent component actively obtains the data and methods of the child component:

-The child component actively obtains the data and method of the parent component (the parent component passes values ​​to the child component):

The child component actively obtains the data and method of the


parent component : the parent component passes the value to the child component:

Example: whether it is to pass variables, functions or components, the parent component passes the value by dynamic attribute binding, and there are two ways to receive the child component. One kind of props array form receiving——props:[], a kind of props object form receiving, object form receiving can verify the legality of the value passed by the parent component!
The parent component passes variables: the

child component props array receives variables:

The subcomponent props object receives the variable and verifies it. If the verification fails, a warning will appear:

-Passing values ​​between non-parent and child components

Broadcast method

example:

Vuex way-to solve (different pages) data sharing between components

Vuex is an official state management plug-in provided by Vue, which solves the problem of data sharing in the same state between components (different pages) and the data persistence of components.
It can also be achieved through localstorage (cache), or it can be achieved using SessionStorage!
Note: In small projects, Vuex is not needed.

1. Data sharing

---

---

2. Data persistence
Intuitively: In the console's network, when data is requested multiple times, it will be requested multiple times if the cache is used, and if Vuex is used, it can be requested once and used multiple times (and dynamically changed and shared).

---

Four, life cycle (hook) function

Five, three ways to request data

1 、 view-resource

2、Axios

3、fetch-jsonp

4、tips

• Axios does not support jsonp requests. And fetch-jsonp can support it and can be used in vue and react. The usage of fetch-jsonp is very similar to Axios.
• Vue-resource is the official plugin of vue. After man.js is introduced and used, global components can be used directly. This is an important reason for being recommended; and Axios is where it needs to be introduced. Axios can be used in vue, Used in react.
• Use arrow functions instead of functions to avoid changing the direction.
• Be sure to add --save when installing dependent packages, so that the version will be declared in package.json, and the next install can be found.
• Vue-resource, Axios, fetch-jsonp can all find the source code and installation method on git

Sixth, routing (automatically mount components and load data)

1. Configure routing

Supplement: Step 5: Set the route exit (that is, under which scope the components under these routes are rendered)

2. Actual use

1. Configuration

2.'/' routing exit (placed in the root component):

3. Router-link routing exit (similar to a label):

4. Js programming routing (programming navigation): routing is initiated by js code

In fact, when you click on the router-link component, the internal call is also the router.push() method

5. The hash mode (default, with #) and history mode (without #) of vue routing

6. Nesting of routing

3. Routing parameters

get parameter

post parameter

4. Modular routing

Routing modularization-Open a separate js file to put the routing configuration, then export it and expose it, import and mount it in main.js