Summary of commonly used Vue commands

instruction	Description
v-model	Two-way data binding, generally used for form elements
v-for	Loop operations on arrays or objects
v-on	Binding event, usage v-on: event = "function"
v-show/v-if	Used to show or hide elements, v-show is realized through display, v-if is to recreate after each deletion
v-on:	Abbreviation: @
$event	Contains target, type, offset...

The event object $event
prevents the event from bubbling:
1. Native js, which depends on the event object, needs to call the stopPropagation() method
2. Vue method: @click.stop, does not depend on the event object.
Default blocking events:
1. Native js: Dependent On the event object, call preventDefault() method
2, vue method: does not depend on the event object, @click.prevent
keyboard event:
Enter: @keydown.13 or @keydown.enter
event modifier:

name	description
.stop	Call event.stopPropagation()
.prevent	Call event.preventDafault()
.{keyCode\|keyAlias}	The callback is only triggered when the event is triggered from a specific key
native	Listen to the native event of the root element of the component
.once	Only trigger the callback once

Property binding and shorthand

v-bind用于属性绑定  语法v-bind：属性=" 	"，简写为	:src|

class and style attributes:
binding class

template:

Vue.js uses HTML-based template syntax to bind the DOM to the data in the Vue instance. The
template is { {}}, used for data binding, displayed on the page, and also becomes Mustache syntax
Data binding Determined method:
1. Two-way binding: v-model
2. Single binding: a): { {}} There may be flickering problems. To use v-cloak, you need to combine css [cloak]{display:none} Use
b): Use v-text, v-html

Other instructions

v-once: bind the data value once
v-pre: do not compile, display directly

filter:

Introduction: used to filter model data, data processing and filtering before display
Syntax: { {data | filter1 | filter2(parameter)}}
There are many built-in filters in vue1.0, such as currency, uppercase, lowercase, limitby, orderby, filterBy
all built-in filters have been abandoned in vue2.0,
how to solve:
a, use a third-party tool library, such as loadash, data-fn (date formatting), accounting.js (for currency Format)
b, custom filter,

Custom filter::

Category: Global filter, local filter
Custom global filter:
Use global method: Vue.filter (filter ID, filter function)
Custom local filter:

Send AJAX request

Introduction:
Vue itself does not support sending AJAX requests, you need to use vue-resource, axios [Official recommendation, vue2.0]
Axios is a promise-based HTTP request client to send requests.
Basic usage:
axios([options])
axios.get(url,[options])
Passing parameters: 1, Passing parameters through url
2, Passing parameters through params
axios.post(url,data,[options ]); When
axios sends data by default, the data format is Request Payload, which is not our commonly used form data format.
So the parameters must be passed in the form of key-value pairs, and cannot be passed in the form of json. Passing parameters
:
1. Yourself Splicing key-value pairs
2. Use transformRequest to convert the request data before the request is sent.
3. If you use modular development, you can use the qs module to convert.
Axios itself does not support cross-domain requests.
Use vue-resource to send cross- domain requests. Domain request

vue life cycle

The process from creation to destruction of a vue instance is called the life cycle. There are eight stages in total

stage	Description
beforeCreate	The component has just been created, but the data observation and event configuration are not yet fun
created	The instance has been created, and data observation and event configuration have been performed
beforeMount	Before the template is compiled, it has not been mounted
mounted	After the template is compiled and mounted, the page will be rendered at this time to see the display of data on the page
beforeUpdate	Before component update
updated	After component update
beforeDestroy	Before the component is destroyed
destroyed	After the component is destroyed

Calculation properties:

1. Basic usage
Calculated attributes are also used to store data, but have the following characteristics:
1. Data can be used for logical processing operations.
2. Monitor the data in the calculated attributes.
2. Calculated property vs method
Defining the get function of the calculated property as a method can also achieve similar functions.
Differences:
a. The calculated property is updated based on its history, and can only be updated when the relevant dependency occurs.
b. The calculated attribute is cached. As long as the related dependencies are not changed, the value obtained by multiple accesses to the calculated attribute is the calculation record stored in the previous cache and will not be executed multiple times.
3, get and set
Calculated attributes are composed of two parts: get and set, which are used to obtain calculated attributes and set calculated attributes respectively.
By default, only get is available. If you need set, you must add it yourself

Properties and methods of vue instance

Property: vm. $e l v m .$ data vm. $o p t i o n s v m .$ refs
方法：
vm. $KaTeX parse error: Expected 'EOF', got '#' at position 8: mount("#̲id") vm.$ destroy()
vm. $n e x t T i c k (c a l l b a c k) v m .$ set(object,key,value)
vm. $d e l e t e (o b j e c t, k e y) v m .$ watch(data,callback[options])

Custom instruction:

Category: global instructions, local instructions
Customized global instructions: Vue.directive (instruction id, [definition definition object])
Customized local instructions: directives: {}

over:

Vue provides the encapsulation component of transition, which provides different effects when inserting, updating or removing dom.
Basic usage: Transition contains the element to be animated in this component. Elements of movement

Filtered css class name 6
hook function: 8
combined use with third-party animation library animate.css

 <transition 
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutRight">
            <p v-show="flag">青羊区</p>

        </transition>

Multi-element animation

Component

Introduction: HTML elements can be extended to encapsulate reusable code. Components are custom elements (objects) How to
define components:
Method 1: Create a component constructor first, and then create a component by the component component constructor
Method 2 : Directly create components
Classification of
components : Global components
Local components

Reference template
Put the component content in the template and reference

Dynamic component

Assembly of
a plurality of components using the same mount point and then dynamically switch between them in

Data transfer between components

1. Parent-child component
Define another component inside a component, called a parent-child component. The child component can only be used in the parent component.
By default, the child component cannot access the data in the parent component. The role of each component instance The domains are all independent.
2. Data transfer (communication) between components. The
child component accesses the data of the parent component:
a): When calling the child component, bind the data in the parent component that you want to get
b): Inside the child component, use the props option to declare the acquired data, that is, receive the data from the parent component.
Note: There are three forms of data in the component: data, props, computed
Summary: The parent component passes data down to the child component through props The
parent component accesses the data of the child component:
a): Use vm in the child component .$emit (event name, data) triggers a custom event, event name custom
b): The parent component listens to the event triggered by the child component where the child component is used, and defines a method in the parent component to obtain data
Summary: The child component sends messages to the parent component through events, in fact the child component sends its own data to the parent component

Unidirectional data flow

Props are one-way bound. When the properties of the parent component change, they will be transmitted to the child component, but not the other way around. And it is not allowed for child components to directly modify the data in the parent component. Will report an error.
Solution:
Method 1: If the child component wants to use it as local data, you can store the data in another variable and then operate it without affecting the parent component.
Method 2: If the child component wants to modify the data and update it synchronously There are two ways to reach the parent component.
1. Use .sync() this.$emit('update:value','newValue') to explicitly trigger an update event.
2. You can wrap the data in the parent component into Object, and then modify the properties of the object in the subcomponent (because the object is a reference type and points to the same memory space), this method is more recommended

Communication between non-parent and child components

The communication between non-parent and child components can be used as a central event bus (event center) through an empty Vue instance. Use it to trigger events and monitor events

Slot content distribution:

Slot intent: location, slot
Function: used to get the original content in the component. Similar to the translude command in angular

vue-router routing:

Introduction: Use Vue.js to develop SPa (single Page Application) single page application
Single page application: according to different URL addresses, display different content, but displayed in the same page.
Basic usage
1. For page layout, see demo

Routing nesting and parameter passing

Nesting: to write another route under the sub-route,
two forms of passing parameters are required for children[ ] : a: query string: login?name=tom&pwd=123
{ { $KaTeX parse error: Expected'EOF' , got'}' at position 12: route.query}̲} b\dots$ route.params}}

Method of routing instance:

router.push(): add a route, the function is the same as router-link
router.replace(): replace a route, no history record

Single file component

1. .vue file The
.vue file is called a single file component, which is a file format customized by vue.js. A .vue file is a single file, and the relevant code is encapsulated in the file: html, The css, js,
.vue file consists of three parts:

<template>
html
</template>
<style>
css
</style>
<script>
	js
</script>

2, vue-loader loader The
browser itself does not recognize the .vue file, so the .vue file must be loaded and analyzed. At this time, vue-loader is required
. There are many similar loaders, such as: html-loader, css- Loader, style-loader, babel-loader, etc. It
should be noted that vue-loader is based on webpack.
3, webpack.
webpack is a front-end resource modular loader and packaging tool, which can use various resources as modules Use and processing, in fact, webpack packs these resources after loading them through different loaders, and then outputs the packed files. Simply put, webpack is a module loader. All resources can be loaded as modules, and finally packaged and output.
webpack has a core configuration file: webpack.config.js, which must be placed in the root directory of the project
Example, steps:
1. Create a project, the directory structure is as follows:
|-index.html
|-main.js entry file
|-App.vue vue file
|-package.json project file {description file, dependency description information, etc.}
|-.babelrc Babel configuration file
|-webpack.config.js webpack configuration file
2, write App.vue
3, install related modules
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel -D -loader
CNPM install babel-Core -D
CNPM install babel-PRESET -D-env // Depending on the configuration of the operating environment is automatically enabled plug-ins required babel
cnpm install vue-template-compiler -D // precompiled templates
Can be combined and installed together: cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template- compiler
4, write main.js
5, write webpack.config.js
6, write .babelrc
7, write package.json
8, run tests
npm run dev

vue-cli scaffolding:

vue-cli quickly constructs the project structure
vue-cli itself integrates a variety of project templates:
simple: very few and simple to use
webpack: includes esLint code specification checking, unit unit testing, etc.
webpack-simple: no code specification and Unit test
browserify: more webpack
browserify-simple: a simplified version of browserify
Example:
1. npm install -g vue-cli, configure the vue command environment, verify the version command (without angle brackets) <vue - version> (check available templates)
2. Initialize the project vue init
3. Enter the generated project directory, install the module package cnpm install
4. Run npm run dev to start the test service, this is a test, if you want to use it in a production environment The npm run bulid command will package the project into the dist directory. If the project is online, copy the dist directory to the server.
Example: Use webpack template vue init webpack demo3
Eslint uses tools to unify code specifications and styles, such as indentation, spaces, symbols, etc.

Modular development:

1, vue-router modular
CNPM the install VUE -S-Router
2, edit main.js
. 3, edited App.vue
. 4, edit router.config.js Axios modular installation command: cnpm install axios -S There are two ways to use axios: 1. Introduce axios in each component. 2. Use axios globally in main.js and add it to the prototype of vue. Adding events to custom components requires adding modifiers

Element UI

Introduction: Element UI is a set of component libraries based on Vue2.0 provided by Element UI, which can quickly build your website and improve development efficiency.
Element UI PC terminal
MintUI mobile terminal
Quick start:
1. cnpm install element-ui -S
2. Introduce and use components in main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI);

3. Add loader to webpack.config.js, restart the server after changing webpack.config.js, css style and font icon need corresponding loader to load

默认 没有这个匹配规则
{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
     }

4, use components
5, use less to
install loader, you need two: less, less-loader

cnpm install less less-loader -D

Introduce groups as needed
1, cnpm install babel-plugin-component -D
2, configure the .babelrc file

"plugins":[
["components",[{
"librarName":"element-ui",
"styleLibraryName":"theme-default"}]
	]
]

3, only introduce the required plug-ins

Custom global components (plug-ins):

Global component (plug-in): It can be imported globally using Vue.use() in main.js, and then it can be used directly in other components, such as vue-router.
Common component (plug-in): every time you use it Import, such as axios

Vuex

Vuex is a state management mode specially developed for Vue.js applications. It uses centralized storage and management of the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way. Simple In other words, it is used to centrally manage data, similar to Redux in React. It is a front-end state management framework based on Flux.
Basic usage:
1. Install vuex cnpm install vues -S
2. Create store.js file, in main Import (import store from'./store.js') in the .js file and configure store options
3. Edit the store.js file

Project
1, initialize the project:

vue init webpack itany
cd itany
cnpm install 
cnpm install less less-loader -D
cnpm install vuex -S
cnpm install axios -S
npm run dev

2. Project resources
|-reset.css
|-data.json
3. Create a directory structure
Clear part of the content in the project
Create the following directory structure

|-data.json
|-static
	|-css
		|-reset.css

4. Configure api interface to simulate background data
Use express framework to start a node server, configure Api interface, simulate background data
Refer to http://www.duanlonglong.com/qdjy/940.html

Test api http://localhost:8081/api/goods#/
5. Development of overall project structure