1. Data rendering: v-text, v-html, {{}}
1.1 v-text
Details: Update the textContent of the element. If you want to update a partial textContent, you need to use {{ Mustache }} interpolation.
Example:
<div >
<p v-text="message"></p>
</div>
<script>
new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});
</script>
1.2 {{}} is the same as the v-text effect above
Example:
<div >
<p>{{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});
</script>
1.3 v-html
Details: Update the innerHTML of the element. Note: Content is inserted in normal HTML - will not be compiled as a Vue template. If you try to use v-html to combine templates, you can reconsider whether to replace them by using components.
Note: Dynamic rendering of arbitrary HTML on a website is very dangerous because it is prone to XSS attacks. Use v-html only on trusted content and never on user-submitted content.
Example:
<div >
<p v-html="message"></p>
</div>
<script>
new Vue({
el:'#app',
data: {
message:'<h5>hello </h5>'
}
});
</script>
2. Conditional rendering control templates are hidden: v-show, v-if, v-else
2.1 v-show
Usage: Switch the display CSS attribute of the element based on the true or false value of the expression. This command triggers the transition effect when the condition changes.
Note: v-show does not support the <template> syntax
Example:
<div >
<p v-show="isShow">
show
</p>
</div>
<script>
new Vue({
el:'#app',
data: {
isShow:true
}
});
</script>
2.2 v-if
v-show and v-if generally have the same effect, the difference is that the elements of v-show will always be rendered and kept in the DOM.
Usage: Render elements based on the true or false conditions of the value of the expression. The element and its data binding/component are destroyed and rebuilt during switching. If the element is <template> ,
Take the contents of it as a conditional block. This command triggers the transition effect when the condition changes.
Example:
<div >
<p v-if="isShow">
show
</p>
</div>
<script>
new Vue({
el:'#app',
data: {
isShow:false
}
});
</script>
2.3 v-else
Limitation: The previous sibling element must have v-if or v-else-if
Usage: Add "else block" to v-if or v-else-if
<div >
<p v-if="isShow">show</p>
<p v-else>hide</p>
</div>
<script>
new Vue({
el:'#app',
data: {
isShow:true
}
});
</script>
2.4 v-else-if
<div >
<p v-if="type === 'a'">A</p>
<p v-else-if="type==='b'">B</p>
<p v-else>C</p>
</div>
<script>
new Vue({
el:'#app',
data: {
type:'b',
}
});
</script>
3. v-for render loop list
Usage: Render elements or template blocks multiple times based on source data. The value of this directive must use the specific syntax alias in expression to provide an alias for the currently traversed element:
v-for default behavior tries not to change the whole, but instead replaces elements. To force it to reorder the elements, you need to provide a special attribute of a key:
Example:
<body>
<div >
<ul>
<li v-for="item in items" :key="">{{}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data: {
items:[
{name:'hxl'},
{name:'zp'},
{name:'hxlzp'},
],
}
});
</script>
4. v-on binding event
usage:
Bind event listener. The event type is specified by the parameter. An expression can be the name of a method or an inline statement, and can be omitted without a modifier.
When used on ordinary elements, you can only listen for native DOM events. When used on a custom element component, you can also listen for custom events triggered by subcomponents.
When listening for native DOM events, the method takes the event as the unique parameter. If an inline statement is used, the statement can access a $event property:
Modifier:
.stop - Call ().
.prevent - Call ().
.capture - Use capture mode when adding event listeners.
.self - The callback is triggered only if the event is triggered from the element bound by the listener.
.{keyCode | keyAlias} - The callback is triggered only if the event is triggered from the element bound to the listener.
.native - listen for a native event on the root element of component.
.once - Triggered once.
.left - (2.2.0+) only trigger handler for left button mouse events.
.right - (2.2.0+) only trigger handler for right button mouse events.
.middle - (2.2.0+) only trigger handler for middle button mouse events.
.passive - (2.3.0+) attaches a DOM event with { passive: true }.
Example:
<div >
<!--Method Processor-->
<button v-on:click="doSomething">Method Processor</button>
<!--Inline statements-->
<button v-on:click="doSomething('!',$event)">Inline statements</button>
<!--abbreviation-->
<button @click="doSomething">abbreviation</button>
<!--Stop bubbles-->
<button @="doSomething">Stop bubbles</button>
<!--Block default behavior-->
<button @="doSomething">Block default behavior</button>
<!--Concatenation modifier-->
<button @="doSomething">Concatenation modifier</button>
<!--Key modifier，Key alias-->
<input @="onEnter" placeholder="Enter key" v-model="msg">
<button v-on:="doSomething">Execute once</button>
</div>
<script>
new Vue({
el:'#app',
data: {
name:'',
msg:''
},
//Define method in methods object methods:{
doSomething:function (event) {
//This in the method points to the Vue instance alert()
},
onEnter:function (event) {
= 'Pressed the Enter key'
}
},
});
</script>
-bind binding attributes
usage:
Dynamically bind one or more features, or a component prop to an expression.
When binding class or style attributes, other types of values, such as arrays or objects are supported. You can view the details through the tutorial link below.
When binding a prop, the prop must be declared in the child component. Different binding types can be specified with modifiers.
When there are no parameters, you can bind to an object containing key-value pairs. Note that at this time the class and style binding do not support arrays and objects.
Modifier:
.prop - is used to bind DOM properties.
.camel - (2.1.0+) transform the kebab-case attribute name into camelCase.
.sync - (2.3.0+) a syntax sugar that expands into a v-on handler for updating the bound value.
Example:
<!-- Bind a property -->
<img v-bind:src="imageSrc">
<!-- abbreviation -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class Bind -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style Bind -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
The above is the use of common instructions introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!