vue从入门到放弃——（3）vue基础练习
Vue基础练习
$event事件对象
【扩展】事件对象
语法：
中，$event为事件对象
作用：记录事件相关的信息
作用：记录事件相关的信息
注：函数传参必须写$event
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="demodiv">
<input type="text" name="uname" @keydown="fun($event)" />
div>
body>
html>
<script src="node_modules/vue/dist/vue.min.js">script>
<script>
new Vue({
el: "#demodiv",
data: {
},
methods: {
fun(text) {
if (text.keyCode == 65) {
console.log("您按下了a健")
}
}
}
})
script>
事件修饰符
扩展】事件修饰符
概念：v-on指令提供了事件修饰符来处理DOM事件细节
prevent修饰符：阻止事件的默认行为(submit提交表单)
stop修饰符：阻止事件冒泡
注意：修饰符可以串联使用
按键修饰符： .up, .down, .ctrl, .enter, .space等等
语法：@click.修饰符=‘fn()’
eg1:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="demodiv">
<input type="text" name="uname" @keydown.up="fun()" />
div>
body>
html>
<script src="node_modules/vue/dist/vue.min.js">script>
<script>
new Vue({
el: "#demodiv",
data: {
},
methods: {
fun() {
console.log("您按下了光标上健");
}
}
})
script>
eg2:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="demodiv">
<h1>阻止事件传播h1>
<div @click="funA()">
<button @click.stop="funB()">点我呀button>
div>
<h1>阻止默认行为h1>
<form action="#" method="get" @submit.prevent="funC()">
<input type="text" name="uname">
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="checkbox" name="ck" />
<input type="submit" value="aaaaaaa">
form>
div>
body>
html>
<script src="node_modules/vue/dist/vue.min.js">script>
<script>
new Vue({
el: "#demodiv",
data: {
},
methods: {
funA() {
console.log("我是div")
},
funB() {
console.log("我是button")
},
funC() {
console.log("表单提交了")
}
}
})
script>
计算属性与侦听
概念：顾名思义，首先它是一种属性，其次它有==“计算”==这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。同时只要在它的当中里引用了 data 中的某个属性，当这个属性发生变化时，计算属性仿佛可以嗅探到这个变化，并自动重新执行。
为什么要用计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
语法
computed: {
需要返回的数据: function () {
return 处理操作
}
}
一定一定一定要return出去
计算属性的使用
小知识：
substr()
从第几个下标开始截取，截取几个
substring()
从第几个下标开始截取，截取到第几个下标包含
第一个下标，但不包含最后一
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demodiv">
<input type="text" v-model="text" />
<p>{{newText}}</p>
</div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#demodiv",
data: {
text: "abcdefg"
},
methods: {
},
// 计算属性
computed: {
newText() {
return this.text.toUpperCase().substr(3, 2)
}
}
})
</script>
上面的例子也可以methods来完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demodiv">
<p>{{fun()}}</p>
<p>{{fun()}}</p>
<p>{{fun()}}</p>
<p>{{fun()}}</p>
<p>{{fun()}}</p>
<p>{{fun()}}</p>
<p>{{newText}}</p>
<p>{{newText}}</p>
<p>{{newText}}</p>
<p>{{newText}}</p>
<p>{{newText}}</p>
<p>{{newText}}</p>
<p>{{newText}}</p>
<p>{{newText}}</p>
</div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#demodiv",
data: {
text: "abcdefg"
},
methods: {
fun() {
console.log("我是函数")
return this.text.toUpperCase().substr(3, 2)
}
},
// 计算属性
computed: {
newText() {
console.log("我是计算属性")
return this.text.toUpperCase().substr(3, 2)
}
}
})
</script>
计算属性和方法的区别
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
方法每当触发重新渲染时，调用方法将总会再次执行函数。
说的通俗一点
函数也可以完成计算属性的功能但是
函数是调用多少次执行多少次，计算属性是
在计算机缓存里调用的，只调用一次，计算属性的
效率更高，函数比较浪费资源
侦听/监听 watch
watch：可以监听模型数据 当模型数据改变的时候就会触发
watch:{
监听的data数据(newval,oldval){
console.log(newval+"—"+oldval)
}
}
watch初始化的时候不会运行,只有数据被改变之后才会运行
什么时候使用watch
当需要在数据变化时执行异步或开销较大的操作时，watch这个方式是最有用的。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demodiv">
<input type="text" v-model="text">
{{text}}
</div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#demodiv",
data: {
text: "abcdefg"
},
methods: {
},
watch: {
text(newval, oldval) {
console.log(newval + '========' + oldval)
}
}
})
</script>
注意：newval是新值而oldval是旧值
exercise
ex1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container" id="box">
<div class="row">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入用户名" v-model="inputa">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入密码" v-model="inputb">
</div>
</form>
</div>
<div class="row">
<input type="button" class="btn btn-success" value="添加" @click="add()" v-bind:disabled="btnBool">
<input type="button" class="btn btn-info" value="删除">
</div>
<div class="row">
<h1>用户信息表</h1>
<table class="table table-bordered">
<tr class="text-center">
<td>序号</td>
<td>名字</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr class="text-center" v-for="(v,i) in arr">
<td>{{i+1}}</td>
<td>{{v.uname}}</td>
<td>{{v.age}}</td>
<td><button class="btn btn-success" data-toggle="modal" data-target="#myModal"
@click="del(i)">删除</button></td>
</tr>
<tr class="text-right" v-if="arr.length>0">
<td colspan="4"><button class="btn btn-info" data-toggle="modal"
data-target="#myModal" @click="delAll()">删除全部</button></td>
</tr>
<tr class="text-center" v-else>
<td colspan="4">
<p>暂无数据。。。。</p>
</td>
</tr>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">确定删除吗？</h4>
</div>
<div class="modal-body text-center">
<button type="button" class="btn btn-default" data-dismiss="modal" @clickq="delTr()">确定</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
new Vue({
el: "#box",
data: {
arr: [
{ "uname": "小明", "age": 18 },
{ "uname": "小王", "age": 22 }
],
//确认删除得到是哪个元素,
index:"",
//姓名
inputa: "",
//密码
inputb: "",
//判断删除全部还是删除单个1为单个，2为全部
biaoshi:-1,
btnBool: true,
},
methods: {
add() {
//添加
this.arr.push({ "uname": this.inputa, "age": this.inputb });
},
del(num) {
//传递想删除元素的下标把这个下标赋给index
this.index=num;
//点击删除单个让标识变为-1
this.biaoshi=-1;
},
delTr() {
if(this.biaoshi==-1){//删除单个
this.arr.splice(this.index,1);
}else if(this.biaoshi==-2){//删除全部
this.arr.splice(0,this.arr.length);
}
},
delAll(){//点击删除全部让标识变为-2
this.biaoshi=-2;
}
},
watch: {
inputa() {
if (this.inputa != "" && this.inputb != "") {
this.btnBool = false;
} else {
this.btnBool = true;
}
},
inputb() {
if (this.inputa != "" && this.inputb != "") {
this.btnBool = false;
} else {
this.btnBool = true;
}
},
}
})
</script>
ex2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body {
font-size: 14px;
}
ul {
list-style: none;
}
.gray {
color: gray;
text-decoration: line-through;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
<h1>任务列表</h1>
<p>任务总数：{{obj.length}}；还有：{{residue()}} 未完成；【<span v-on:click="del()">完成</span>】</p>
<ul>
<li v-for="(v,i) in obj">
<input type="checkbox" v-model="v.style">
<span v-bind:class="v.style?'gray':''" v-if="!v.edit" v-on:click="edit(i)">{{v.str}}</span>
<input type="text" v-model="v.str" v-if="v.edit" v-on:blur="v.edit=!v.edit">
</li>
</ul>
<input type="text" v-model="str">
<input type="button" value="添加" v-on:click="add()">
</div>
</body>
</html>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: ".box",
data: {
obj: [
{ "str": "吃饭", "edit": false, "style": false },
{ "str": "睡觉", "edit": false, "style": false },
{ "str": "看书", "edit": false, "style": false },
{ "str": "音乐", "edit": false, "style": false },
{ "str": "唱歌", "edit": false, "style": false }
],
str: "",
},
methods: {
add(index) {
this.obj.push({ "str": this.str, "edit": false, "style": false });
this.str = "";
},
edit(index) {
this.obj[index].edit = true;
},
residue() {
var i = 0;
this.obj.forEach((v) => {
if (v.style == false) {
i++
}
})
return i;
},
del() {
var arr = this.obj;
this.obj = [];
for(var i=0; i<arr.length; i++){
if(arr[i].style==false){
this.obj.push(arr[i]);
}
}
}
}
})
</script>