前端开发系列048-基础篇之Vue的基础指令

本文介绍Vue框架中涉及的基础指令。

一、基础指令

简单总结下Vue中常用的基础指令。

v-html

设置标签的innerHTML

v-text

设置标签的innerText

v-bind

设置标签的属性节点

v-on

给标签绑定事件,可以使用@语法糖来替代

v-if

条件判断，根据动态数据来创建或销毁对应的标签

v-else

条件判断，通常更在v-if的后面

v-else-if

条件判断，跟在v-if的后面

v-model

双向绑定数据(绑定message到文本输入框的value值)

v-show

是否显示对应的标签（设置样式隐藏）

v-for

循环渲染的指令，主要用于处理对象或者是数组数据

基础指令的代码示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../../Vue/vue.min.js"></script>

</head>

<body>

<div id="app1">

    <div> {{msg}}</div>

    <div v-html="html"></div>

</div>

<div id="app2">

    <div> {{msg}}</div>

    <div v-text="text"></div>

</div><br>

<div id="app3">

    <div> {{msg}}</div>

    <a v-bind:href="src_url">点击我跳转到{{src_url}}页面</a><br>

    <a :href="src_url">点击我跳转到{{ url }}页面</a>

</div><br>

<div id="app4">

    <div> {{msg}}</div>

    <input type="text" placeholder="请输入具体的内容..." v-model:value="message">

    <span>文本输入框中的内容为：{{message}}</span>

</div><br>

<div id="app5">

    <div> {{msg}}</div>

    <button v-on:click="count1 += 1"> 当前Count的值为 {{ count1 }}</button>

    <button v-on:click="countClick"> 当前Count的值为 {{ count2 }}</button>

    <button @click="count3 += 1"> 当前Count的值为 {{ count3 }}</button>

</div><br>

<div id="app6">

    <div>{{msg}}</div>

    <div>条件渲染演示[001]</div>

    <div v-if="type == '数学'"><p>数学：几何 + 代数</p> </div>

    <div v-else-if="type == '语文'"><p>语文：白话文 + 文言文</p></div>

    <div v-else><p>其他学科...</p></div>

    <div>条件渲染演示[002]</div>

    <template v-if="ok">

        <div>哈哈哈</div>

        <div>啦啦啦</div>

        <div>嘻嘻嘻</div>

        <div>吼吼吼</div>

    </template>

    <div v-else><div>哎哟 ok的值为false !!!</div> </div>

</div><br>

<div id="app7">

    <div> {{msg}}</div>

    <div v-show="isShow">show指令和if指令的不同在于它通过样式来控制标签是否显示</div>

</div>

<script>

    new Vue({

        el:"#app1",

        data:{

            msg:"① v-html指令的使用",

            html:"<p>我是p标签</p>"

        }

    });

    new Vue({

        el:"#app2",

        data:{

            msg:"② v-text指令的使用",

            text:"<p>我是p标签</p>"

        }

    });

    new Vue({

        el:"#app3",

        data:{

            msg:"③ v-bind指令的使用",

            src_url:"http://www.wendingding.com"

        },

        computed:{

            url:function () {

                return this.src_url.substr("7");

            }

        }

    });

    new Vue({

        el:"#app4",

        data:{

            msg:"④ v-model双向数据绑定",

            message:"默认的消息"

        }

    });

    new Vue({

        el:"#app5",

        data:{

            msg:"⑤ v-on指令绑定事件监听",

            count1:0,

            count2:0,

            count3:0

        },

        methods:{

            countClick:function () {

                this.count2 +=1;

            }

        }

    });

    new Vue({

        el:"#app6",

        data:{

            msg:"⑥ v-if v-else v-else-if指令",

            type:"哈哈哈",

            ok:false

        }

    });

    new Vue({

        el:"#app7",

        data:{

            msg:"⑦ v-show指令",

            isShow:false

        }

    });

</script>

</body>

</html>

这里贴出上面代码的执行情况

<body>

<div id="app1"><div> ① v-html指令的使用</div> <div><p>我是p标签</p></div></div>

<div id="app2"><div> ② v-text指令的使用</div> <div>&lt;p&gt;我是p标签&lt;/p&gt;</div></div><br>

<div id="app3"><div> ③ v-bind指令的使用</div> <a href="http://www.wendingding.com">点击我跳转到http://www.wendingding.com页面</a> <br> <a href="http://www.wendingding.com">点击我跳转到www.wendingding.com页面</a></div><br>

<div id="app4"><div> ④ v-model双向数据绑定</div> <input type="text" placeholder="请输入具体的内容..."> <span>文本输入框中的内容为：默认的消息</span></div><br>

<div id="app5"><div> ⑤ v-on指令绑定事件监听</div> <button> 当前Count的值为 0</button> <button> 当前Count的值为 0</button> <button> 当前Count的值为 0</button></div><br>

<div id="app6"><div> ⑥ v-if v-else v-else-if指令</div> <div>条件渲染演示[001]</div> <div><p>其他学科...</p></div> <div>条件渲染演示[002]</div> <div><div>哎哟 ok的值为false !!!</div></div></div><br>

<div id="app7"><div> ⑦ v-show指令</div> <div style="display: none;">show指令和if指令的不同在于它通过样式来控制标签是否显示</div></div>

</body>

二、列表渲染指令

v-for指令根据一组数组|对象的选项列表来进行渲染。

v-for 指令需要使用item in items形式的特殊语法，其中items是数据源(可以是数组、对象或者是数字)，item是当前正在迭代的数据别名(代表当前的元素或者是value值)。

列表渲染指令执行示例

列表渲染指令代码示例

<body>

<div id="app1">

    <div>{{msg}}</div>

    <ul>

        <li v-for="n in 3">{{n}}</li>

    </ul>

</div>

<div id="app2">

    <div>{{msg}}</div>

    <ul>

        <li v-for="(item,index) in itemData"> index-{{ index}}  - item-{{item}}</li>

    </ul>

</div>

<div id="app3">

    <div>{{msg}}</div>

    <ul>

        <li v-for="(value,key,index) in object"> index:{{  index }} - key:{{key}} -value:{{value}}</li>

    </ul>

</div>

<div id="app4">

    <div>{{msg}}</div>

    <ul>

        <li v-for="item in itemData" :key="item.id"> ID:{{item.id}} Text:{{item.text}} Other:{{OtherData}}</li>

    </ul>

</div>

<script>

    new Vue({

        el:"#app1",

        data:{

            msg:"① 使用for指令处理数字"

        }

    });

    new Vue({

        el:"#app2",

        data:{

            msg:"② 使用for指令处理数组",

            itemData:["语文","数学","钢琴"]

        }

    });

    new Vue({

        el:"#app3",

        data:{

            msg:"③ 使用for指令处理对象",

            object:{

                age:"33",

                name:"阿牛",

                demo:"初恋红豆冰"

            }

        }

    });

    new Vue({

        el:"#app4",

        data:{

            msg:"④ 使用for指令处理对象数组",

            itemData:[

                {id:1,text:"住进布达拉宫，我是雪域最大的王"},

                {id:2,text:"流浪在拉萨街头，我是世间最美的情郎"},

            ],

            OtherData:"Test-Other 数据"

        }

    })

</script>

v-for指令的使用注意点

> ✦ 可以用 of 替代 in 作为分隔符。

> ✦ 数据源可以取整数，它将重复多次模板。

> ✦ 可以利用带有 v-for 的`template`渲染多个元素

> ✦ 在v-for模块中拥有对父作用域属性的完全访问权限。

> ✦ 迭代数组的时候，支持一个可选的第二个参数为当前项的索引。

> ✦ 迭代对象的时候，支持一个可选的第二个参数为当前项的键名，第三个参数为当前项的索引。

> ✦ 遍历对象的时候，按照`Object.keys()`[Object的静态方法用于获取对象所有的key]的结果处理。

> ✦ 在更新已渲染元素时默认用“就地复用”策略，高策略高效但有适用范围，可以通过设置key解决。

> ✦ 当在组件中使用 v-for 时，key 现在是必须的[2.2.0 + 版本]。

❖ 数组的更新检测

Vue 包含一组观察数组的变异方法(push[追加元素]、pop[弹出元素]、shift[删除第一个元素]、unshift[在数组前插入N个元素]、splice[添加|替换|删除元素]、reverse[翻转元素]、sort[排序])，调用它们的时候将会触发视图更新。

变异方法：上面这些方法被称为变异方法的原因是它们在使用的时候会改变原始数组的数据。

非变异方法：相对的，数组操作中不会改变原始数组的方法如(filter[过滤], concat[合并] 和 slice[截取])被称为非变异方法，它们大多会返回一个新的数组。当调用非变异方法来处理Vue实例中的数据时，视图并不会更新。如果需要和视图同步，可以考虑使用新数组替换旧数组(app4.itemData = app4.itemData.slice(2))。

另外，数组无法监测到 ①利用索引直接设置元素 ② 修改数组的长度 这两种情况下的数组变动。

具体的解决方案

//① 通过索引来设置数组中的元素并更新视图

//vm.items[indexOfItem] = newValue

Vue.set(vm.items, indexOfItem, newValue);   //方式（1）

vm.items.splice(indexOfItem, 1, newValue);  //方式（2）

vm.$set(vm.items, indexOfItem, newValue);   //方式（3）

//② 修改数组长度并更新视图

//vm.items.length = newLength

vm.items.splice(newLength)

❖ 对象的更新检测

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除操作。也就是说，对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。

//向嵌套对象添加响应式属性的方式：两种方法等价

Vue.set(object, key, value);

Vue.$set(object, key, value)