第3章-Vue.js 指令扩展 和 todoList练习
一、学习目标
- 了解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的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
随机推荐
- loadrunner socket协议问题归纳(4)---buffer接收变长和定长的数据
测试场景:聊天系统 用户登录后,要先向服务器发送用户名,然后可以发送聊天信息,同时也可以接受聊天信息. 如果接受的字符为定长时,可以设定接受长度.recv buf2 66 #include " ...
- Java访问控制
转自:菜鸟教程
- 第二次c艹作业
1,c语言实现方法:按照电梯运行方式,改变被定义为全局变量的结构体的数值. c艹实现方法:用类来存放电梯的属性,整个过程都是对类操作. 两者不同:c语言是面向过程的,整个函数里都要对电梯的参数进行修改 ...
- IT小小鸟 读书笔记
讲真的,整本书我并没有看完,翻阅了一下,然后小小的借鉴了一下! 首先设计你自己的进度条 进度条的设计是一个很多人都知道的故事:同样的耗时,如果不给任何进度提示,只是在完成之后才弹出一个完成消息,中间没 ...
- ngx_http_rewrite_module(重定向)
1:指定rewrite规则 rewrite regex replacement [flag]; 什么是rewrite规则:If the specified regular expression m ...
- springmvc值传递
1.页面向后台传值 A.HttpServletRequest方式: package com.rong.controller; import javax.annotation.Resource; imp ...
- Python——cmd调用(os.system阻塞处理)(多条命令执行)
os.system(返回值为0,1,2)方法 0:成功 1:失败 2:错误 os.system默认阻塞当前程序执行,在cmd命令前加入start可不阻塞当前程序执行. 例如: import os os ...
- JarvisOJ平台Web题部分writeup
PORT51 题目链接:http://web.jarvisoj.com:32770/ 这道题本来以为是访问服务器的51号端口,但是想想又不太对,应该是本地的51号端口访问服务器 想着用linux下的c ...
- (转)ActiveMQ的重连机制
花了一天的时间,终于搞明白了我的疑问. failover://(tcp://localhost:6168)?randomize=false&initialReconnectDelay=100& ...
- 分享几个IP获取地理位置的API接口(最全面的了)
转载;https://cloud.tencent.com/developer/article/1152362 全网首发,最全的IP接口,不服来辩!博主找了几个小时的资料,又手动抓取到了几个接口补充进来 ...