一、学习目标

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

二、todoList练习效果展示

2.1、效果图展示

2.2、todoList练习效果展示代码

<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
                <!--
                    @事件名称='函数/简单的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指令里面的文本覆盖掉。

<body>
    <div id="box">
        <!--显示hello world-->
        <h1>{{ msg }} world</h1>
        <!--只显示hello,它不管你写入什么内容，都会被v-text指令里面的文本覆盖掉-->
        <h1 v-text="msg">world</h1>
        <!--
            v-text:用来设置文本内容
            语法：v-text='变量'
            这个指令 innerHTML
        -->
    </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 为取消选择

<body>
    <div id="box">
        <input type="text" v-model="msg"> {{ msg }}
        <!--勾选的显示ture，不勾选显示false-->
        <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，表示移除这个元素

<body>
    <div id="box">
        <!--前端显示 style="display:none"，这个是逻辑删除标签-->
        <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指令(数据太多的时候，会看到花括号在闪，保持在元素上直到关联实例结束编译)，使用方法如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    [v-cloak] {display:none;}  //设置样式
</head>
<body>
    <div id="box" v-cloak>  //标签中使用
        <!--body....-->
    </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指令时要遵循书写规范

第3章-Vue.js 指令扩展和 todoList练习的更多相关文章

第2章-Vue.js指令
一.学习目标了解什么是 Vue.js 指令理解 Vue.js 指令的用途掌握 Vue.js 指令的书写规范能够使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
Vue.js 第1章 Vue常用指令学习
今日目标能够写出第一个vue应用程序能够接受为什么需要学vue 能够使用指令能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要可以提高开发效率实现vu ...
vue.js指令总结
1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...
第10章-Vue.js 项目实战
一.本节内容掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装能够使用axios进行数据请求二.webpack项目的目 ...
vue.js指令v-model实现方法
原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...
第5章-Vue.js交互及生命周期练习
一.学习目标使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
第4章-Vue.js 交互及实例的生命周期
一.学习目标了解实例生命周期的过程理解钩子函数的作用掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念说明 ...
Vue.js指令实例
v-if v-else v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...
一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

随机推荐

socket发送文字、图片、文件---基于python实现
socket官方文档:https://docs.python.org/2/library/socket.html socket中文详细介绍:http://blog.csdn.net/rebelqsp/ ...
什么是Meta标签？哪些Meta标签对搜索引擎SEO优化有作用？
什么是Meta标签? Meta标签给搜索引擎提供了许多关于网页的信息,这些信息都是隐含信息,意味着对于网页自身的访问者是不可见的. 你可以在网页的 <head>元素中发现<meta& ...
__autoload 与spl_autoload_register()
PHP __autoload函数(自动载入类文件)的使用方法作者: 字体:[增加减小] 类型:转载时间:2012-02-04 在使用PHP的OO模式开发系统时,通常大家习惯上将每个类的实现都 ...
如何在一台　web　服务器上注册CA证书
试验环境介绍(CA的主机为192.168.23.10.httpd的主机为:192.168.23.11) 1:新建一台web服务器,主机名为www yum install -y httpd 2:生成 ...
MySQL误操作后如何快速回滚(转)
本文转自http://www.cnblogs.com/dfcao/p/6147970.html#undefined 感谢作者基本上每个跟数据库打交道的程序员(当然也可能是你同事)都会碰一个问题,My ...
error CS0234: 命名空间“System.Drawing”中不存在类型或命名空间名称“Image”(是否缺少程序集引用?)
py27使用redis
1.安装redis pip install redis 转载请注明博客出处:http://www.cnblogs.com/cjh-notes/
Importing/Indexing database (MySQL or SQL Server) in Solr using Data Import Handler--转载
原文地址:https://gist.github.com/maxivak/3e3ee1fca32f3949f052 Install Solr download and install Solr fro ...
Notepad++查找和替换空行/空格/换行
Notepad++查找和替换支持正则表达式,功能很强大,但比较复杂因此暂不研究 Notepad++使用正则表达式查找,首先需要勾选查找/替换窗口左下部的“正则表达式(E)”\r\n表示换行,其中\r表 ...
2月4日考试——迟到的 ACX
迟到的 ACX 时限:1s 内存限制:128MB题目描述: 今天长沙下雪了,小 ACX 在上学路上欣赏雪景,导致上学迟到,愤怒的佘总给 ACX 巨佬出了一个题目想考考他,现在他找到你,希望你能帮帮他. ...

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