<! -- development environment version with helpful command line warnings -- >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<! -- production environment version, optimized size and speed -- >
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

The core of Vue.js is a system that allows concise template syntax to be used to declaratively render data into DOM
General mode

var vm = new Vue({
  // option
})

1.v-once

Render elements and components only once. With subsequent re rendering, the element / component and all its child nodes are treated as static content and skipped. This can be used to optimize update performance.

<!-- Render once  -->
<div v-once>{{ mes }}</div>

2.v-text

Update the textContent of the element. If you want to update a partial textContent, you need to use {{Mustache}} interpolation.

<span v-text="msg"></span>
<!-- Same as below -->
<span>{{msg}}</span>
<div v-html="html"></div>

3.v-html

Update the innerHTML of the element. Note: content is inserted as plain HTML - it will not be compiled as a Vue template.

<div v-html="html"></div>

4.v-show ,v-if

v-show: switch the display CSS attribute of the element according to the true or false value of the expression.

<div v-html="html"></div>

v-if: directly operating DOM objects will consume more performance

<div v-if="Math.random() > 0.5">
  Now you see me
</div>

v-show can be used when frequently showing and hiding, thus saving performance.

5.v-else,v-else-if

V-else: restriction: the previous sibling element must have v-if or v-else-if, and no expression is required.

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

V-else-if: the former sibling element must have v-if or v-else-if, which can be used in chain with v-if and v-else.

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else>
  Not A/B/C
</div>

6.v-for

Render elements or template blocks multiple times based on source data. The value of this instruction must use the specific syntax alias in expression, and the priority of v-for must be higher than that of v-if.

//You can specify an alias (or key for an object) for the array index:
<div v-for="(item, index) in items"> {{ Value, subscript }}</div>
<div v-for="(val, key) in object">{{ Value, subscript }}</div>
<div v-for="(val, name, index) in object">{{ Value, subscript , subscript}}</div>

7.v-on

Abbreviation: @
Bind event listeners. The event type is specified by the parameter. An expression can be the name of a method or an inline statement, or it can be omitted without modifiers.

When used on normal elements, you can only listen to native DOM events. When used on custom element components, you can also listen for custom events triggered by subcomponents.

When listening for native DOM events, the method takes the event as its only parameter. If you use an inline statement, the statement can access a $event attribute: v-on:click="handle('ok', $event)".
Modifier:

• . stop - call event.stopPropagation() to prevent bubbling to the parent element.
• . prevent - call event.preventDefault() to eliminate the element's default action.
• . capture - use capture mode when adding event listeners.
• . self - triggers the callback only if the event is triggered from the element itself bound by the listener.
• {keyCode | keyAlias} - triggers the callback only if the event is triggered from a specific key.
• . native - listens for native events on the component root element.
• . once - triggers the callback only once.
• . left- (2.2.0) is triggered only when the left mouse button is clicked.
• . right - (2.2.0) triggered only when the right mouse button is clicked.
• . middle - (2.2.0) is triggered only when the middle mouse button is clicked.
• . passive - (2.3.0) add listeners in {passive: true} mode

<!-- Method processor -->
<button v-on:click="doThis"></button>

<!-- Dynamic events (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- Inline statement -->
<button @click="jian(1,2,$event)"></button>

//You can declare a function in methods, and view it by calling the value of event.starter.attribute
jian: function (q, w, event) { //When the first parameter is named by default, the event name of the direct function is placed after the event name of the multi parameter
  console.log(q, w, event.target.innerHTML);
  
<!-- Abbreviation -->
<button @click="doThis"></button>

<!-- Dynamic event abbreviation (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- Stop bubbling -->
<button @click.stop="doThis"></button>

<!-- Block default behavior -->
<button @click.prevent="doThis"></button>

<!-- Block default behavior, no expression -->
<form @submit.prevent></form>

<!--  Concatenation modifier -->
<button @click.stop.prevent="doThis"></button>

<!-- Key modifier, key alias -->
<input @keyup.enter="onEnter">

<!-- Key modifier, key code -->
<input @keyup.13="onEnter">

<!-- Click callback only once -->
<button v-on:click.once="doThis"></button>

<!-- Object syntax (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

8.v-bind

Abbreviation::
Dynamically bind one or more properties, or a component prop to an expression. You can modify the properties of DOM objects.

• . prop - binding as a DOM property rather than as an attribute. (what's the difference? )
• . camel - (2.1.0 +) converts kebab case attribute names to camelCase. (supported from 2.1.0)
• . sync (2.3.0 +) syntax sugar, which is extended to a v-on listener that updates the binding value of the parent component.

<!-- Bind a property -->
<img v-bind:src="imageSrc">
data:{ imageSrc : 'http://sanyetongsj.oss-cn-shanghai.aliyuncs.com/system/root/jinze/vue.jpg'}

<!-- Dynamic property name (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- Abbreviation -->
<img :src="imageSrc">

<!-- Dynamic property name abbreviation (2.6.0+) -->
<button :[key]="value"></button>

<!-- Inline string concatenation -->
<img :src="'/path/to/images/' + fileName">

<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- Binding an object with properties -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- adopt prop Modifier binding DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop Binding. " prop"Must be my-component China statement.-->
<my-component :prop="someThing"></my-component>

<!-- adopt $props The props Pass to sub components together -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

9.v-model

Create a two-way binding on a form control or component
The following properties are valid

<input>
<select>
<textarea>

Modifier:

• . lazy - replace input to listen for change events
• . number - the input string is converted to a valid number
• . trim - enter first and last space filtering

<input type="text" v-model.number="numb">
<input type="text" v-model.trim="spanc">
<input type="text" v-model.number="change">

10.v-block

This instruction remains on the element until the associated instance finishes compiling. When used with CSS rules such as [v-clock] {display: none}, this instruction can hide the uncompiled Mustache tag until the instance is ready.

<style>
[v-cloak] {
  display: none;
}
</style>
<div v-cloak>
  {{ message }}
</div>