table of Contents

I haven't updated vue for a long time. The last time I wrote this series of articles was 1 year ago, and I only wrote 2 articles. It may be that I usually pay more attention to the content of classroom teaching, and I feel that I am going to be out of date~. Don't be lazy~ Keep learning~! !

1. What is an instruction

Instructions are the most commonly used function in Vue. The main responsibility is to apply certain behaviors to the DOM when the value of its expression changes.

Instructions are prefixed with v- . All instructions in Vue are in the form of v-xxx.
v-xxx is similar to attributes in HTML tags.

 <div  v-xxx>
 </div>

Through instructions, Vue can perform more convenient operations on the DOM and data.

Two, commonly used instructions in Vue

1. v-text

The innerText equivalent to the label can only be used in double labels. However, it cannot recognize the HTML code in the content.

let  myv = new Vue({
    el:"#app",
    template:`
        <div>
           <div v-text="message +'，I am happy.' "></div>
        </div>
    `,
    data:function(){
        return {
            message:"你好"
        }
    }
});

The instruction value is essentially a js expression . The use of variables does not require the interpolation operator { {}}, it is directly the variable name in data, or other expressions.

The variables here must be declared in data.

Strictly speaking, the "variable" here is actually the name of the Object property of data.

2. v-html

The innerHTML equivalent to the tag can only be used in double tags. Similar to the v-text command, but it can identify HTML code in the content.

3.v-if

Determine whether to insert this element. If the judgment result is true, the page will add this element; if false, the page will not add this element.

v-else-if

v-else

v-if, v-else-if, v-else three instructions are used, and they must be the adjacent DOM.

<button type="button" v-if="num>10">这个是个测试 v-if </button>
<button type="button" v-else-if="num>5">这个是个测试 v-else-if </button>
<button type="button" v-else>这个是个测试 v-else </button>

4. v-show

Label display or not. Confirm to hide, will add display:none; to the style of the label

Note the difference between v-show and v-if:

v-show is to display hidden tags through the display property of CSS;
v-if is purely not to insert the element.

<div id="app">
</div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
    template:`
        <div>
           <div v-text="message + ',I am happy' "></div>
           <div v-text="htmlText"></div>
           <div v-html="htmlText"></div>
           <button type="button" v-if="num>10">这个是个测试 v-if </button>
           <button type="button" v-else-if="num>5">这个是个测试 v-else-if </button>
           <button type="button" v-else>这个是个测试 v-else </button>
           <h3 v-show="isIn">测试 v-show </h3>
        </div>
    `,
    data:function(){
        return {
            message:"你好",
            htmlText:"<h1>测试能实现H1标签不呢？</h1>",
            isIn: false,
            num: 2
        }
    }
});
</script>

5. v-bind

Assign values to the attributes of the elements .

Native attributes, such as src, value, etc.
Custom attributes, such as mydata, myvalue and other attributes written by the programmer.

<div mydata="{
   
   {message}}">message的值是没法赋值给 div的属性 mydata 的</div>

The right way to use v-bind,v-bind:属性名=“变量|表达式”

<div v-bind:mydata="message"> OK </div>

Can be abbreviated :属性名="变量|表达式"

<div :mydata="message"> OK </div>

<div id="app">

</div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
   template:`
        <div>
            <div mydata="{
   
   {message}}">看看有无自定义属性的值？？？</div>
            <div v-bind:mydata="message" :mynum="num+2"> OK </div>
        </div>
    `,
    data:function(){
        return {
            message:"你好",
            num: 2
        }
    }
});
</script>

6. v-on

Bind native events to tags to better manipulate data based on events.

v-on:原生事件名=“表达式，给变量进行操作||函数名，调用函数”

Short form,@原生事件名=“表达式，给变量进行操作||函数名，调用函数”

<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
    template:`
        <div>
            <div>{
   
   {message+234}}</div>
            <h1 v-on:click="message='abc'">点击试试</h1>
            <h1 @click="message='xyz'">点击试试</h1>
        </div>
    `,
    data:function(){
        return {
            message:"test"
        }
    }
});
</script>

7. v-model

We know that one of the core features of Vue is a two-way binding, responsive vue principle is to achieve data -> View , then we have to learn View -> Data principles.

v-model is a command limit <input>, , <select>, <textarea>Components (attribute must be a value of an element) is used.

When adding the v-model attribute to the <input /> element, the value will be used as the attribute of the element by default, and then the'input' event will be used as the trigger event for real-time value transfer .

 <input type="text" v-model="mes">  
//  此时mes值就与input的值进行双向绑定

<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
 let  myv = new Vue({
        el:"#app",
        template:`
        <div>
            <input type="text"  v-model="message">
            <div>{
   
   {message}}</div>
            <button type="button" v-if="message=='abc'"  
					@click="message='xyz'">这个是按钮</button>
        </div>
    `,
        data:function(){
            return {
                message:"test"
            }
        }
    });
</script>

8. v-for

Basic syntax: The v-for="item in Arr"variable item represents an array element.

Object operation: The v-for="item in Obj"variable item represents the attribute value of the object, or the method body.

The order of the variables in v-for:

数组：v-for=" ( item，index ) in Arr"
对象：v-for=" ( value，key，index ) in Obj "

demo: change the background color according to age

<style>
 .a{ background: #ff0;}
 .b{ background: #ffad00;}
</style>

<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
    let  myv = new Vue({
        el:"#app",
        template:`
        <div>
            <ul>
                <li v-for="item in students"   
 					v-bind:class="item.age>17?'a':'b'">
                    学生姓名：{
   
   { item.name }} --
                    年龄：{
   
   { item.age }}
                </li>
            </ul>
            <div>
                  数组一共  {
   
   { students.length }}个学生。
            </div>
        </div>
    `,
        data:function(){
            return {
                students:[
                    {name:"张三",age:18},
                    {name:"Lily",age:19},
                    {name:"Lucy",age:17}
                ]
            }
        }
    });
</script>

In the code, the order of v-for and v-bind does not matter.

9. Vue methods attribute

Vue's methods define the methods that can be called in the v-on instruction . Such as:

<button type="button"  v-on:click="myFun()">点击出现特效</button>

methods:{
   myFun:function(){
        // 方法体
   }
}

$event parameter in methods

The passed $event parameter is actually the event event object encapsulated by Vue.

<button @click=”add(2,$event)”>add</button>

let myv = new Vue({
        el:"#app",
        template:`
            <button type="button"  v-on:click="myFun($event,message)">
            		点击出现特效
            </button>
        `,
        data:function(){
            return {
                message:"Hello,world"
            }
        },
        methods:{
            myFun:function(e,msg){
                console.info(this);  // this 是data return 的对象。
                console.info( this.message ); // this.xxx 就可以获取、更改data的数据
                console.info(e.target);  // 事件对象, 当前标签
                alert(msg);
            }
        }
});

Vue study notes three: Vue common instructions