第3章-Vue.js 指令扩展和 todoList练习

绝地灬酷狼 2021-09-20 12:34 265阅读 0赞

## 一、学习目标 ##

*  了解Vue.js指令的实现原理
 *  理解v-model指令的高级用法
 *  能够使用Vue.js 指令完成 todoList 练习(重点+难点)

## 二、todoList练习效果展示 ##

# 2.1、效果图展示 #

![936656-20180910103412951-939689491.png][]

# 2.2、todoList练习效果展示代码 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #box {
          width: 350px;margin: 30px auto;background: #eee;padding: 30px 50px;}
            li {
          list-style-type: none;}
            ul {
          padding-left: 0;}
            .add {
          width: 200px;height: 20px;margin-right: 10px;}
            .span1 {
          color: skyblue;cursor: pointer;}
            .finish {
          color: #ccc;text-decoration: line-through;}
        </style>
    </head>
    <body>
        <div id="box">
            <h1>任务列表</h1>
            <p>任务总数：{
         { arr.length }};还有：{
         { choose() }}未完成：【<span class="span1" @click="finish">完成</span>】</p>
            <ul>
                <li v-for="(item,index) in arr" v-bind:class="{finish: item.bol}">
                    <input type="checkbox" v-model="item.bol"/>
                    <span v-text="item.des" v-show="!item.edit" @click="edit(index)"></span>  //v-show直接用简单的js
                    <input type="text" v-model="item.des" v-show="item.edit" @blur="item.edit=false"/>  //blur也是用了简单的js
                    
                </li>
            </ul>
            <input type="text" class="add" v-model="msg.des" /><button @click="add">添加</button>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#box",
                data: {
                    arr: [
                            {des:'设计',bol:false,edit:false},
                            {des:'编写页面代码',bol:false,edit:false},
                            {des:'编写js代码',bol:false,edit:false},
                            {des:'设计产品原型',bol:false,edit:false}
                    ],
                    msg: {des:'',bol:false}
                },
                methods: {
                    add: function(){
                        //添加数据
                        if(this.msg.des.length != 0){
                            this.arr.push(this.msg);
                        }else {
                            alert("插入为空");
                        }
                        this.msg = {des:'',bol:false};
                    },
                    choose: function(){
                        //所有数组中的元素进行遍历，查看bol
                        // 如果bol为false 是未完成的；
                        //如果bol为true 是已完成的；
                        var num = 0;
                        this.arr.forEach(function(item){
                            if (!item.bol){
          //当前任务未完成
                                //增加未完成任务的数量
                                num++;
                            }
                        });
                        return num;
                    },
                    finish: function(){
                        //对所有数据进行遍历，如果已完成，将其删除掉
                        // 先将arr清空； 遍历：将未完成的数据，重新添加进来；
                        //清空arr前，先将arr中的数据保存在临时的变量中
                        var temp = this.arr;
                        this.arr = [];
                        for (var i = 0;i < temp.length;i++){
                            if(!temp[i].bol){
                                this.arr.push(temp[i]);
                            }
                        }
                    },
                    edit: function(index){
                        //需要判断一下，当前的数据是否已完成
                        //如果是已完成的状态，那么不能对数据进行更改
                        // 如果是未完成的状态，才可以 改变其 edit
    
                        if(this.arr[index].bol){
                            //return是直接终止此次程序运行
                            return;
                        }
                        //更改edit的值，改为true
                        this.arr[index].edit = true;
                    }
                }
            });
        </script>
    </body>

todoList练习代码

## 三、指令扩展 ##

# 3.1、v-text指令 #

作用：更新元素的textContent

语法：v-text='变量'

注：与双大括号的表达式功能类似，但是双大括号里面的内容不会被覆盖掉，而v-text指令，不管你写入什么内容，都会被v-text指令里面的文本覆盖掉。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<body>
        <div id="box">
            
            <h1>{
         { msg }} world</h1>
            
            <h1 v-text="msg">world</h1>
            
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'hello'
                }
            })
        </script>
    </body>

v-text指令

# 3.2、v-model指令绑定复选框 #

type: checkbox

v-model 与 布尔值绑定

true 为已选择，false 为取消 选择

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<body>
        <div id="box">
            <input type="text" v-model="msg"> {
          { msg }}
            
            <input type="checkbox" v-model="msg1"> {
          { msg1 }}
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#box",
                data: {
                    msg: '',
                    msg1: false  
                }
            });
        </script>
    </body>

v-model指令绑定复选框

# 3.3、v-if 指令 #

作用：根据表达式结果控制一个元素显示或移除。

语法： v-if = "表达式"

表达式的结果为 true，表示显示这个元素；表达式结果为false，表示移除这个元素

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<body>
        <div id="box">
            
            <h1 v-show="bol">hello world</h1>
            
            <h1 v-if="bol">hello</h1>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#box",
                data: {
                    bol: false
                }
            });
        </script>
    </body>

v-if指令

这里面还有：v-else指令(跟v-if指令或者 v-else-if指令配合着使用)，v-cloak指令(数据太多的时候，会看到花括号在闪，保持在元素上直到关联实例结束编译)，使用方法如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        [v-cloak] {display:none;}  //设置样式
    </head>
    <body>
        <div id="box" v-cloak>  //标签中使用
            
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#box"
            });
        </script>
    </body>

v-cloak

**更多指令：**请到官网的 api 去查找：https://cn.vuejs.org/v2/api/\#指令

## 四、总结 ##

*  重点：理解vue.js指令的实现原理
 *  难点： 灵活的使用vue.js指令完成页面交互效果
 *  注意事项： 使用vue.js指令时要遵循书写规范

转载于:https://www.cnblogs.com/zhangqigao/p/9604035.html

[936656-20180910103412951-939689491.png]: /images/20210726/d48808b90b854550a5bba90a9022563a.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20210726/2ae5ffbc784441d2a9e44505dcb078fa.png