Vue.js之常用指令

vue常用指令

vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令.

官网:

一.v-text、v-html

v-text：用于绑定文本

v-html：用于绑定html

<div id="app">
    <p>姓名：<label v-text="name"></label></p>
    <p>姓名：{{name}}</p>
    <div v-html="age">年龄:</div>
</div>
<script>
    new vue({
        el: "#app",
        data: {
            name:"corn",
            age:"<label>20</label>"
        }
    })
</script>
=======================>
姓名:corn
姓名:corn
20

• 1.{{name}}这种写法和v-text的作用是相同的,用于绑定标签的text属性,如果标签没有text属性,该绑定会失效,比如在一个文本框上面使用v-text时没有效果的.
• 2.从结果看出,v-html绑定后会覆盖原来标签标签里面的内容,此处是覆盖,而并非append.
• 3.对于v-html应用时要慎重,在网站上会动态渲染任意html有一定的危险存在,因此容易导致xss跨站脚本攻击.所以最好在新任的网址上面使用
• 4.v-text和v-html绑定都是单向的,只能从model到view的绑定,不能实现从view到model的更新.

二.v-model指令

v-model实现双向绑定,vue限定只能对表单空间进行绑定,常见的由input,select,textarea等.

<div id="student">
    <p>编辑姓名：<input type="text" v-model="name" /></p>
    <p>姓名：{{name}}</p>
    <br>
        
    <p>编辑备注：<textarea v-model="remark"></textarea></p>
    <p>备注：{{remark}}</p>
    <br>
        
    <input type="checkbox" id="basketball" value="篮球" v-model="hobby" />
    <label for="basketball">篮球</label>
    
    <input type="checkbox" id="football" value="足球" v-model="hobby"/>
    <label for="football">足球</label>
    
    <input type="checkbox" id="running" value="跑步" v-model="hobby"/>
    <label for="running">跑步</label>
    
    <br>
    <p>学生爱好：{{hobby}}</p>
    
    <p>户籍：{{huji}}</p>
    <select class="form-control" v-model="huji">
        <option>北京</option>
        <option>*</option>
        <option>甘肃</option>
    </select>
</div>

<script>
    //model
    let data = {
            name:"wangxc",
            age:20,
            hobby:[],
            remark:"优秀",
            huji:""
        }
    //viewmodel
    let vm = new vue({
        el:"#student",
        data:data,
    });
</script>

三.v-if v-else-if v-else指令

v-if和v-else在使用条件运算符判断时常用,需要说明的是,v-if可以单独使用,但是v-else的前面必须有一个v-if的条件或者v-show指令.这里的v-else可以不写,experssion表达式是一个返回bool类型的属性或者表达式.v-else-if的意思相当于python中的elif,否则如果.

<div id="app">
    <p>姓名：<label v-text="name"></label></p>
    <p>是否已婚：<span v-if="ismarry">是</span><span v-else>否</span></p>
    <p>大人or小孩：<span v-if="age>18">大人</span><span v-else>小孩</span></p>
    <p>单位：{{school}}</p>
</div>

<script>
    let data={
        name:"corn",
        ismarry:false,
        age:21,
        school:"oldboy''",                
    }
    //viewmodel
    let vm = new vue({
        el:"#app",
        data:data,
    });
</script>

//--------->
姓名：corn
是否已婚：否
大人or小孩：大人
单位：oldboy

四.v-show指令

v-show指令表示根据表达式的bool值来决定是否显示该元素。如果bool是false，对应的dom标签还是会渲染到页面上，只是css的display设为none而已，而如果用v-if，bool值为false时整个dom树都不会被渲染到页面上。从这点来说，如果需求是需要经常切换元素的显示和隐藏，使用v-shew效率更高，而如果只做 一次条件判断，则使用v-if更加合适。

v-show常和v-else 一起使用，表示如果v-show条件满足则显示当前标签，否则显示v-else标签。

<div id="app">
    <p>姓名：<label v-text="name"></label></p>
    <p>是否已婚：<span v-show="ismarry">是</span></p>
</div>

<script>
    let data = {
        name:"corn",
        ismarry:false,
    }
    let vm = new vue({
        el:"#app",
        data:data,
    });
</script>

//----------->
姓名：corn
是否已婚：

五.v-for指令

v-for指令需要以item in items 形式的特殊语法，常用来绑定数据对象。

<div id="app">
    <ul>
        <li v-for="value in nums">{{value}}</li>
    </ul>
</div>

<script>
    let vm = new vue({
        el:"#app",
        data:{
            nums:[1,2,3,4,5]
        }
    });
</script>

//-------------->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

除基础数据之外，还支持json数组的绑定：

<div id="array">
    <ul>
        <li v-for="item in items">姓名：{{item.name}},年龄：{{item.age}}</li>
    </ul>
</div>

<script>
    let vue = new vue({
        el:"#array",
        data:{
            items:[
                {
                    name:"呵呵",
                    age:20
                },
                {
                    name:"虫虫",
                    age:25
                }
            ]
        }
    });
</script>

//---------->
姓名：呵呵,年龄：20
姓名：虫虫,年龄：25

在v-for里面，可以使用<template>标签渲染多个元素块，下面基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo.

<style>
    #mypage li{float:left;list-style:none;padding:6px 10px;border:1px solid #ddd;border-left:0px;}
    #mypage li:first-child{border-left:1px solid #ddd;border-radius:6px 0 0 6px;}
    #mypage li:last-child{border-radius:0 6px 6px 0;}
    #mypage li a{color:#0081cc;text-decoration:none;}
    #mypage li.disabled a{color:#999;}
    #mypage li.active{background:#0081cc}
    #mypage li.active a{color:#fff;}            
</style>

<div id="mypage">
    <nav>
        <ul>
            <template v-for="page in pages">
                <li v-if="page==1" class="disabled"><a href="#">上一页</a></li>
                <li v-if="page==1" class="active"><a href="#">{{page}}</a></li>
                <li v-else><a href="#">{{page}}</a></li>
                <li v-if="page==pages"><a href="#">下一页</a></li>
            </template>
        </ul>
    </nav>
</div>

<script>
    let mypage = new vue({
        el:"#mypage",
        data:{
            pages:10
        }
    });
</script>

实现效果:

v-for指令除了支持数据对象的迭代以外，还支持普通json对象的迭代，如：

<div id="list">
    <ul>
        <li v-for="(item,key) in items">{{key}}:{{item}}</li>
        <li v-for="(item,key,index) in items">{{index}}.{{key}}:{{item}}</li>
    </ul>
</div>

<script>
    let list = new vue({
        el:"#list",
        data:{
            items:{name:"corn",age:21,company:"oldboy"}
        }
    });
</script>


//------------------->
name:corn
age:21
company:oldboy
0.name:corn
1.age:21
2.company:oldboy

六.v-once指令

v-once表示只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。什么意思呢？来看demo：

<div id="app">
    <p>姓名：<label v-once v-text="name"></label></p>
    <p v-once>年龄：{{age}}</p>
    <p>学校：{{school}}</p>
</div>

<script>
    let data = {
        name:"小明",
        age:18,
        school:"光明小学",
    }
    let vm = new vue({
        el:"#app",
        data:data,
    });
</script>

从demo看出，只要使用v-once指令的，view和model之间除了初次渲染同步，之后便不再同步，而同一次绑定里面没使用v-once指令的还是会继续同步。

七.v-bind指令

对于html标签的text、value等属性，vue里面提供了v-text、v-model去绑定。但是对于除此之外的其他属性呢，这就要用到接下来要说的v-bind指令了。v-bind的作用是绑定除了text、value之外的其他html标签属性，常见的比如class、style、自定义标签的自定义属性等。

<div id="app">
    <p>姓名：<label v-text="name"></label></p>
    <p>是否女性：<span class="classsex" v-bind:class="{backred:isback}"><label v-if="isback">是</label></span></p>
    <p>岗位等级：<span v-bind:style="{color:level}">aa</span></p>
</div>

<script>
   let data = {
        name:"corn",
        age:21,
        level:"red",
        isback:true
    }
    let vm = new vue({
        el:"#app",
        data:data,
    })
</script>


//--------------------->
姓名：wangxc

是否男性：是

岗位等级：aa

需要说明的是同一个标签里面的同一个属性，可以既有绑定的写法，也有静态的写法，组件会自动帮你合并，比如上文中的class属性。

八.v-on指令

在vue中v-on指令用来绑定标签的事件，语法和v-bind类似。

v-on:event="expression"，这里的event可以是js里的常用事件，也可以是自定义的事件。

<div id="app">
    <p>姓名：<label v-text="name"></label></p>
    <p>年龄：{{age}}</p>
    <botton v-on:click="age++;if(name=='wangxc')name='hehe';else name='wangxc';">增加年龄</botton>
</div>

<script>
    let vm = new vue({
        el:"#app",
        data:{
            name:"corn",
            age:"21"
            }
        });
</script>

//------------>
这段代码是一个最简单的应用，直接在click事件里面执行逻辑，改变变量的值。

除了直接在标签内写处理逻辑，还可以定义方法事件处理器：

<div id="clickevent">
    <p>姓名：<label v-text="name"></label></p>
    <p>年龄：{{age}}</p>
    <botton v-on:click="hello">hello</botton>
</div>

<script>
      let clickevent = new vue({
        el:"#clickevent",
        data:{
            name:"corn",
            age:"21"
        },
        methods:{
            hello:function(){
                console.log("hello " + this.name + "!");
                this.age++
            }
        }
    });
</script>

九,实现增删改查

<div id="app">
    <div>用户管理</div>
    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>年龄</th>
                <th>毕业学校</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="row in rows">
                <tr>
                    <td>{{row.name}}</td>
                    <td>{{row.age}}</td>
                    <td>{{row.school}}</td>
                    <td>{{row.remark}}</td>
                    <td><a href="#" @click="edit(row)">编辑</a>&nbsp;&nbsp;<a href="#" @click="delete(row.id)">删除</a></td>
                </tr>
            </template>
            <tr>
                <td><input type="text" v-model="rowtemplate.name" /></td>
                <td><input type="text" v-model="rowtemplate.age" /></td>
                <td>
                    <select name="" v-model="rowtemplate.school">
                        <option>第一小学</option>
                        <option>第二小学</option>
                        <option>第三小学</option>
                    </select>
                </td>
                <td><input type="text" v-model="rowtemplate.remark"/></td>
                <td><button type="button" @click="save">保存</button></td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    let data = {
        rows:[
            {id:1,name:"hehe",age:18,school:"第一小学",remark:"三好学生"},
            {id:2,name:"chongchong",age:20,school:"第二小学",remark:"调皮学生"},
            {id:3,name:"yy",age:18,school:"第三小学",remark:"好孩子"},
            {id:4,name:"hehe",age:18,school:"第一小学",remark:"三好学生"},
            {id:5,name:"chongchong",age:20,school:"第二小学",remark:"调皮学生"},
            {id:6,name:"yy",age:18,school:"第三小学",remark:"好孩子"}
        ],
        rowtemplate:{id:0,name:"",age:"",school:"",remark:""}
    };
    let vm = new vue({
        el:"#app",
        data:data,
        methods:{
            save:function(event){
                if(this.rowtemplate.id==0){
                    //设置当前新增行的id
                    this.rowtemplate.id = this.rows.length + 1;
                    this.rows.push(this.rowtemplate);
                }
                //还原模板
                this.rowtemplate = {id:0,name:"",age:"",school:"",remark:""}
            },
            delete:function(id){
                //实际项目中参数操作肯定会涉及到id去后台处理，这里只是展示
                for(var i=0;i<this.rows.length;i++){
                    if(this.rows[i].id == id){
                        this.rows.splice(i,1);
                        break;
                    }
                }
            },
            edit:function(row){
                this.rowtemplate = row;
            }
        }
        });
</script>