This article is used to introduce the instructions commonly used in Vue
1, Instruction definition
1. In addition to variables, expressions can also be placed in the instruction
2. All instructions begin with v -
2, Common instructions
1.v-cloak
1. Definition: it is used to solve the flicker problem of small and simple vue projects. In large and engineering projects (webpack and vue router), there is only one empty div element, and the content in the element is realized through route mounting. At this time, we don't need to use the v-cloak instruction.
2. Implementation principle:
1) When the dom is rendered, that is, the page appears, vue intervenes
2) Before vue parsing, there is an attribute v-cloak in div. after vue parsing, there is no attribute v-cloak in div
3) Practice: control the display and hiding of elements. After using this instruction, the page content will be hidden before vue intervention, and the page will be displayed only after vue works.
3. Use: write V-block on the label of el binding, which is equivalent to an attribute, and set the style of V-block attribute to display:none to hide.
4. Implementation process: when vue has not entered, there is a v-bloom attribute and a hidden style is set for the v-bloom attribute. When vue intervenes, the attribute does not exist, and the set hidden style does not exist. At this time, the page is displayed
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id='app' v-cloak></div>
</body>
2.v-bind:
1. Definition: used for dynamic binding of attributes
2. Writing method: v-bind: Syntax:
3. Use:
1) Common writing method: attribute name = 'attribute value'
<body>
<div id="app">
<div v-bind:id='myId'>I'm box one</div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
myId:'redDiv',
},
})
</script>
2) Object writing method: v-bind: attribute name = '{class name 1:booolean, class name 2:boolean}'
<body>
<div id="app">
<div :class='{red:isRed,pink:isPink}'>I'm a pink box</div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isRed:false,
isPink:true
},
})
</script>
3) Object writing upgraded version: v-bing: attribute name = 'method name()'
<body>
<div id="app">
<div :class='getClass()'>I'm the blue box</div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isRed:false,
isPink:true,
isBlue:true
},
methods:{
getClass(){
return {red:this.isRed,blue:this.idBule}
}
}
})
</script>
4) Writing method of array: v-bind: attribute name = '[class name 1. Class name 2]'
<body>
<div id="app">
<div :class='["orange"]'>I'm an orange box</div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
},
})
</script>
5) Upgraded version of array writing: v-bind: attribute name = 'method name ()'
<body>
<div id="app">
<div :class='getClass()'>I'm the purple box</div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isRed:false,
isPink:true,
isBlue:true
},
methods:{
getClass(){
return ["pruple"]
}
}
})
</script>
6) Example of binding style attribute using v-bind
<body>
<div id="app">
<!-- Object writing -->
<div :style="{color:'pink',fontSize:'15px'}">I'm the pink plus version</div>
<div :style="{color:getColor,fontSize:getFontSize}">I'm the blue plus version</div>
<div :style='getStyle()'>I'm the Blue Mini</div>
<!-- Array writing -->
<div :style='[color,fontSize]'>I'm purple Mini</div>
<div :style='getStyleArray()'>I'm purple Mini</div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
getColor:'skyblue',
getFontSize:"16px",
color:{color:'purple'},
fontSize:{fontSize:'12PX'}
},
methods:{
getStyle(){
return {color:this.getColor,fontSize:'13px'}
},
getStyleArray(){
return [this.color,this.fontSize]
}
}
})
</script>
3.v-on
1. Definition: used to bind events
2. Writing method: v-on: trigger event type name = event name syntax:@
3. About parameters: if the method does not require additional parameters, the () after the method may not be added.
1) However, note that if the function requires parameters, but they are not passed in, the event parameter of the native event will be passed in by default
2) You need to pass in a parameter at the same time. If you need to pass in a parameter at the same time and you need an event, you can pass in an event through $event.
<body>
<div id="app">
<button @click='addNumber'>Click me+1</button>
<button @click='addNumber10(10,$event)'>Click me+10</button>
<div>{{number}}</div>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
number: 1
},
methods:{
addNumber(event) {
console.log(event)
this.number++
},
addNumber10(number, event) {
this.number = this.number + number
}
}
})
</script>
4. Where the method is used: on and other methods in methods, and use this when using in other methods. This refers to the instance object vm of the current vue
5. Examples of running lights:
<body>
<div id="app">
<div>{{message}}</div>
<button @click='start'>start</button>
<button @click='end'>end</button>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: 'Every wave',
interval: null
},
methods:{
start() {
if (this.interval != null) return
this.interval = setInterval(() => {
//substring(start,end) not after package
// Gets the character with subscript 0
let start = this.message.substring(0, 1)
// Gets a string with a subscript of 1 until the last character
let end = this.message.substring(1)
this.message = end + start
}, 400)
},
end() {
// Clear timer
clearInterval(this.interval)
this.interval = null
}
}
})
</script>
6. Event modifier – multiple events can be used in series
1). Stop: stop bubbling from the source and make the event explode directly in place. Usage: after binding an event stop.
2). prevent: block default events. Commonly used in
3). Once: enables the current event to be triggered only once. It is usually used in combination
4). self: only when the event is triggered in the element itself and the descendant element, it will not trigger the callback. one by one
5). Capture: use time capture form when adding event listeners
6) Keyboard events Key modifier: you can use key alias or key code.
<!-- Monitor using key code to monitor the bounce of enter key --> <input @keyup.13='keyClick'> <!-- Listening use key alias to listen and enter key pops up --> <input @keyup.enter='keyClick'>
<div @click.self='big' style="height: 200px;width: 200px;background-color: orange;">
<div @click='small' style="height: 100px; width: 100px;background-color: orchid;">
<!-- Event modifiers can be concatenated-->
<button @click.stop.once='btn'>Click me</button>
</div>
<a href="https://www.cnblogs. com/watson945/p/5067110. HTML "@ click. Prevent ='jump '> native jump event to invalidate</a>
<a href="https://www.cnblogs. com/watson945/p/5067110. HTML "@ Click ='jump '> native jump event is not invalidated</a>
</div>
4.v-if and v-show
1. Common ground:
(1) Are used to control the display and hiding of elements;
(2) Can follow the expression, but the result can only be boolean. If it is true, it will be displayed; Is false: hide
2. Difference:
(1) Means: v-if is to dynamically add or delete elements to the DOM tree, that is, if the elements cannot be seen in the document stream after being deleted; The explicit display style is controlled by the explicit display: Nov attribute of the DOM element
(2) Performance consumption: v-if has higher switching and, v-show has higher initial rendering consumption, but the total v-if consumption is high
(3) Usage scenario: v-if: for elements whose operation conditions are unlikely to change, v-show is suitable for frequent switching
(4) Mode: there are many ways of v-if (v-if, v-else-if, v-else), while there is only one way of v-show
(5) Judgment times: v-if only judges once (no judgment will be made after meeting the conditions), while v-show has to judge many times (each one has to be judged)
3. Examples
<!-- It may be executed at least once, that is, when state At 1 --> <div v-if='state == 1'>success</div> <div v-else-if='state == 0'>fail</div> <div v-else>have in hand</div> <!-- Be sure to perform it three times --> <div v-show='state == 1'>success</div> <div v-show='state == 0'>fail</div> <div v-show='state == 2'>have in hand</div>
<body>
<div id="app">
<div v-if='type'>
<label>
cell-phone number:
</label>
<!-- Add different key，tell vue No longer reuse the previous one input，Will not appear input Problems caused by values in -->
<input type="text" placeholder="Please enter your mobile number" key='1'>
</div>
<div v-else>
<label>
Email No.:
</label>
<input type="text" placeholder="Please enter email number" key='2'>
</div>
<button @click='changeType'>Switching type</button>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
type:false
},
methods:{
changeType(){
this.type = !this.type
}
}
})
</script>
4. Precautions:
1) If v-show is used as an element, display: none in css file; Setting through v-show cannot display this element;
Reason: because v-show controls the display and concealment by modifying the element style of the element through js code. If value is false, set diaplay: none; If value is true, set display: "; Therefore, when value is true, only the diaplay effect in element style can be cleared, and the diaplay effect in css cannot be overwritten;
Solution: if you use v-show and hide the DOM before vue parsing, try to set the value of display in the style attribute instead of in the css file]
[Extension: visibility:hidden: placeholder is still there; diably: none: placeholder is not there]