1.vue data binding

The data binding function in vue greatly improves the development efficiency.

1-1. Data binding

① Bind inline styles: bind style data to DOM elements through v-bind. When using the v-bind binding style, vue is specially enhanced. In addition to strings, the type of expression results can also be objects or arrays.

<div id="app">
    <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
        <div v-bind:style="myDiv"></div>
    </div>
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        myDiv:{backgroundColor:'red',width:'100px',height:'100px'},
        pink:'pink',
        width:'100%',
        height:'200px'
    }
})
</script>

② Bind style class: a style class defines the style of an element with a class name.

<style>
    .box{
        background-color:pink;
        width:100%;
        height:200px;
    }
    .inner{
        background-color:red;
        width:100px;
        height:50px;
        border:2px solid white;
    }
</style>

<div id="app">
    <div v-bind:class="{box}">I am box
        <div v-bind:class="{inner}">I am inner1</div>
        <div v-bind:class="{inner}">I am inner2</div>
    </div>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        box:'box',
        inner:'inner'
    }
})
</script>

1-2. Built in command

Complex functions can be realized with simple code through built-in commands. Common built-in commands are shown in the following figure:

instructions	explain
v-model	Bidirectional data binding (both front and rear data change)
v-on	Listening events
v-bind	One way data binding
v-text	Insert text content
v-html	Insert content containing HTML
v-for	List rendering
v-if	conditional rendering
v-show	Show hide

[vue's built-in instruction writing rules start with V, and the suffix is used to distinguish the function of the instruction, which is connected by a short horizontal line. The instruction must be written on the DOM element, and the built-in instruction can also be abbreviated, such as: v-on:click, abbreviated as: @ Click]

Tip:

In vue2 0, the main form of code reuse and abstraction is components. However, in some cases, the underlying operation of ordinary DOM elements is still required, and custom instructions will be used at this time.

① v-model: it mainly implements two-way data binding, which is usually used on form elements.

<div id="app">
    <input type="text" v-model="msg">
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        msg:'v-model instructions'
    }
})
</script>

② v-text: inserts text content inside a DOM element. (innerHTML similar to HTML)

<div id="app">
    <p v-text="msg"></p>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        msg:'I am v-text'
    }
})
</script>

③ v-html: insert HTML tag content inside DOM elements. (where there is a label, it will be parsed)

<div id="app">
    <div v-html="msg"></div>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        msg:'<h2>I am v-html</h2>'
    }
})
</script>

④ v-bind: realize one-way data binding. The front end changes, the back end does not change, the back end changes, and the front end does not change.

<div id="app">
    <input v-bind:value="msg">
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        msg:'I am v-bind'
    }
})
</script>

⑤ v-on: event listening instruction, which is used directly with event types.

<div id="app">
    <p>{{msg}}</p>
    <button v-on:click="showInfo">Please click</button>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        msg:'Please click the button to view the content'
    },
    methods:{
        showInfo(){
            this.msg='I am v-on instructions'
        }
    }
})
</script>

⑥ v-for: realize page list rendering, which is often used to loop arrays.

<div id="app">
    <div v-for="(item,key) in list" data-id="key">
        The index is:{{key}},The content of the element is:{{item}}
    </div>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        list:[1,2,3]
    }
})
</script>

⑦ v-if: used to control the display or hiding of elements. The attribute is Boolean.

⑧ V-show: the same effect as v-if, but v-show is the display attribute of the operation element. v-if will delete and recreate the element.

<div id="app">
    <div v-if="isShow" style="background-color:#ccc; "> I'm V-IF < / div >
    <button @click="isShow=!isShow">display | hide</button>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        isShow:true
    }
})
</script>

[case] student list

<div id="app">
    <button @click="add">Add student</button>
    <button @click="del">Delete student</button>
    <table border="1" width="50%" style="border-collapse:collapse">
        <tr>
            <th>class</th>
            <th>full name</th>
            <th>Gender</th>
            <th>Age</th>
        </tr>
        <tr align="center" v-for="item in students">
            <td>{{item.grade}}</td>
            <td>{{item.name}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        students:[]
    },
    methods:{
        add(){
            var student={grade:'1',name:'Xiao Ming',gender:'male',age:25}
            this.students.push(student)
        },
        del(){
            this.students.pop()
        }
    }
})
</script>