Xiaobai said:
As the front-end Xiaobai, I hope to share the learning process with you. Every new content learned will be shared here. I hope it will be helpful to you. I also hope you can put forward what you have done badly. I will correct it in time. If there are errors in the code, I hope you can remind me, hee hee hee~~~
What is vue
vue is a progressive JavaScript framework. Progressive refers to the use of vue framework from shallow to deep and from simple to complex.
Advantages of vue
- Smaller volume: the volume of vue.js after compression is only 33k.
- Higher operation efficiency: vue.js is based on virtual DOM operation, which greatly improves the operation rendering efficiency of DOM.
- Two way data binding: developers do not need to operate DOM, they only need to operate packets.
- Rich ecology and low learning cost.
Basic code of vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. Import vue.js file -->
<script src="../vue.js"></script>
</head>
<body>
<!-- 2. Prepare container -->
<div id="app">
<!-- 4. Rendering data within a container -->
<!-- {{variable}}: And data Data binding to data in -->
<h1>{{msg}}</h1>
</div>
<!-- 3. Initialization, by vue.js Creates an instantiated object using the provided constructor-->
<script>
new Vue({
// Identification control area / container
el:'#app',
// Data packet, data to be transmitted
data:{
msg:'hello word'
}
})
</script>
</body>
</html>
Common syntax instructions for vue
- Normal data rendering
v-text is used to manipulate plain text, which will replace the value on the corresponding data object. When the value on the bound data object changes, the content of the interpolation will be updated. v-text can be abbreviated as {}.
<div id="app">
<!-- 1. Rendering of ordinary data -->
<h1 v-text="msg">{{msg}}</h1>
<h1>{{msg}}</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
// General data
msg:'hello word',
},
})
</script>
- Rich text data rendering
V-html is used to output HTML. The difference between v-text and v-text is that v-text outputs plain text. The browser will not parse it, but v-html will output it as an HTML tag.
<div id="app">
<!-- 2. Rendering of rich text data -->
<div v-html="richText"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
// Rich text data
richText:'<h2 style="color:red">Rich text data rendering</h2>',
},
})
</script>
- Label attribute rendering
Use v-bind when you need to dynamically determine tag attributes.
<style>
.box{
width:100px;
height:100px;
border:2px solid red;
}
.box.active{
background-color:orange;
}
</style>
<div id="app">
<!-- 3. Rendering of label attributes, when div have active Property, add a background color-->
Usage 1: judge by ternary operator
<div class="box" v-bind:class="active?'isActive':''"></div>
Usage 2: directly through the object{}Bind a class
<div class="box" v-bind:class="{active:isActive}"></div>
Usage 3: through array[]Combine fixed attributes and dynamic attributes in the same way
<div v-bind:class="[box,{active:isActive}]"></div>
<div v-bind:class="[box,active?'isActive':'']"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
// Rendering of label attributes
isActive:true,
},
})
</script>
- conditional rendering
v-if determines the conditional rendering element according to the value of the condition. If the value of the condition is true, the element appears in the page, otherwise it does not appear. V-else does not need judgment conditions, but its previous sibling element must be v-if or v-else-if, which adds else blocks to v-if or v-else-if.
<style>
.box{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<div id="app">
<!-- 4. Conditional rendering, judgment conditions can be variables or statements -->
<div class="box" v-if="5>3">v-if demonstration</div>
<div class="box" v-if="isShow">v-if demonstration</div>
<!-- When v-if The result is false Display when v-else -->
<div class="box" v-else>v-else demonstration</div>
</div>
<script>
new Vue({
el:'#app',
data:{
// conditional rendering
isShow:else,
},
})
</script>
- Event binding
v-on: event type, used for event binding function. v-click can be abbreviated as @ click, but it is not recommended because @ is not well recognized on asp.net mvc page.
<style>
.box{
width:100px;
height:100px;
border:2px solid red;
}
.box.active{
background-color:orange;
}
</style>
<div id="app">
<!-- 4. Event binding-->
<div class="box" v-bind:class="active?'isActive':''"></div>
<div class="box" v-bind:class="{active:isActive}"></div>
<div v-bind:class="[box,{active:isActive}]"></div>
<div v-bind:class="[box,active?'isActive':'']"></div>
<!-- Add a click event to the button to control the display of background color-->
<button v-on:click="handleBg">background color </butoon>
</div>
<script>
new Vue({
el:'#app',
data:{
// Rendering of label attributes
isActive:true,
isShow:true,
},
methods:{
handleBg:function(){
this.isActive = !this.isActive;
},
},
})
</script>
epilogue
The above are some of the most basic and commonly used vue instructions. I hope they will be helpful to you.