一、学习目标
- 了解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指令时要遵循书写规范