一、style属性的绑定
将style内的属性使用JSON字符串的格式书写
只要点击就让页面数字的颜色发生变化
- f相当于一个开关,点击后令开关打开或者关闭,来改变a、b的值
- Vue的思想:数据改变视图就改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 绑定style属性 值就要写成json对象 让css样式的值为一个变量 -->
<!-- f相当于一个开关,点击后令开关打开或者关闭,来改变a、b的值 -->
<h1 :style="{'color':a,'background':b}" @click="change(f=!f)">2222222222</h1>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
a:'blue',
b:'pink',
f:true
},
methods:{
change(flag){
if(flag){
this.a='blue',
this.b='pink'
}else{
this.a='black',
this.b='yellow'
}
}
}
})
</script>
二、class属性的绑定
有2个class,只要点击,一个class属性显示,另一个不显示
- 给2个class设置变量f,true和false,只要点击,就将这个2个布尔值取反
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.aClass {
color: red;
font-size: 50px;
background: blue;
}
.bClass {
color: yellow;
font-size: 50px;
background: black;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h1 :class="{'aClass':f1,'bClass':f2}" @click="change()">666666</h1>
</div>
</body>
</html>
<script type="text/javascript">
//数据一改变,视图就会改变,忘记操作DOM
new Vue({
el: '#box',
data: {
f1: true,
f2: false
},
methods: {
change() {
this.f1=!this.f1;
this.f2=!this.f2;
}
}
})
</script>
V-if 多重条件的渲染
V-show:改变css中display的样式 ,真正的条件渲染,频繁的切换使用
V-if:通过增加和删除元素来展示,初始条件为假不渲染元素只是删除,只有条件为真,才会修改渲染,因此运行时条件很少的进行切换使用
满足条件就展示此标签,不满足就不展示
- 用户输入成绩显示对应的等级
通过v-if判断是否满足条件,满足条件就显示所在的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<input type="text" placeholder="请输入成绩 0---100" v-model="score"/>
<h1 v-if="score>=0&&score<60">不及格</h1>
<h1 v-else-if="score>=60&&score<70">差</h1>
<h1 v-else-if="score>=70&&score<85">中等</h1>
<h1 v-else-if="score>=85&&score<95">良好</h1>
<h1 v-else-if="score>=95&&score<=99">优秀</h1>
<h1 v-else-if="score==100">满分</h1>
<h1 v-else>成绩不合法</h1>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
score:0
}
})
</script>
- 通过v-if完成登录方式的切换
loginType一改,v-if和v-else条件发生变化就会来回切换,label标签就发生变化,但是input标签内输入的内容不发生变化,因为只修改了placeholder的内容而没有清除掉用户输入的内容,如果需要input标签内所有内容也随着改变需要加入key值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<template v-if="loginType === 'username'">
<label>Username用户名登录方式</label>
<input placeholder="Enter your username" key="one">
</template>
<template v-else>
<label>Email邮箱登录方式</label>
<input placeholder="Enter your email address" key="two">
</template>
<br>
<button type="button" @click="change(flag=!flag)">切换登录方式</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'Hello',
flag:true,
loginType:'username'
},
methods:{
change(f){
if(f){
//loginType一改,v-if和v-else条件发生变化就会来回切换,label标签就发生变化,但是input标签内输入的内容不发生变化,因为只修改了placeholder的内容而没有清除掉用户输入的内容,如果需要input标签内所有内容也随着改变需要加入key的值。
this.loginType='username'
}else{
//loginType不是username就会执行v-else所在的标签
this.loginType='aa'
}
}
}
})
</script>
v-for
数组更新检测,变更方法
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
如果没有使用以上方法进行数组的更新,数组内部也会发生更新,但是试图无法检测到,也就不能展示到前台
- 数组的更新案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box" align="center">
<ul>
<li v-for="(ele,index) in jsonArr" :key="index">
{{ele.id}}---{{ele.name}}---{{ele.age}}--{{ele.sex}}-- <a href="#" @click="del(index,ele.name)">删除</a>---<a href="#" @click="update(index,{
'id': 10,
'name': '呵呵',
'age': 25,
'sex': '女'
})">修改</a>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//数据改变,视图就会更新,忘记操作DOM
new Vue({
el: '#box',
data: {
'jsonArr': [{
'id': 1,
'name': '赵六',
'age': 26,
'sex': '男'
}, {
'id': 2,
'name': '王五',
'age': 23,
'sex': '男'
}, {
'id': 3,
'name': '李四',
'age': 24,
'sex': '男'
}]
},
methods:{
//删除
del(index,name){
if(window.confirm("你要删除"+name+"吗?")){
//根据索引来删除 splice() 删除1个元素,并向数组添加新元素。
this.jsonArr.splice(index,1);
}
},
//修改
update(index,obj){
//根据索引修改
// this.jsonArr[index]=obj;此处数组已经修改完毕,但需要方法来触发试图检测到
// this.jsonArr.reverse().reverse();
//根据索引index来删除 splice() 删除1个元素,并向数组添加新元素obj。
this.jsonArr.splice(index,1,obj);
}
}
})
</script>
学生信息添加删除修改的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<center>
<h1>添加学生信息</h1>
姓名:<input type="text" id="" value="" v-model="name" />
年龄:<input type="text" id="" value="" v-model="age" />
<button type="button" @click="add()">添加学生</button>
<table border="1" cellspacing="0" cellpadding="" width="60%">
<caption>
<h2>学生信息表</h2>
</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr align="center" v-for="(ele,index) in jsonArr" :key="index">
<td>{{index+1}}</td>
<td >{{ele.name}}<input v-if="flag=false" v-model="text"></input> <a href="#" @click="update1(index,text)"> 修改</a></td>
<td>{{ele.age}} <a href="#" @click="update2(index,age)">修改</a></td>
<td>
<a href="#" @click="del(index,ele.name)">删除</a>
</td>
</tr>
<tr align="center">
<td colspan="4"><a href="#" @click="delAll()" v-if="jsonArr.length!=0">全部删除</a><a href="#" v-if="jsonArr.length==0">请添加学生信息</a></td>
</tr>
</table>
</center>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
name: '',
age: '',
jsonArr: [],
dellall:"请添加学生信息",
flag=true;
text='';
},
methods:{
add:function(){
var name=this.name.trim();
var age=this.age.trim();
if(!name||!age){
alert("姓名和姓名不能为空");
return;
}
var json={"name":name,"age":age};
this.jsonArr.push(json);
this.name='';
this.age='';
},
delAll(){
this.jsonArr=[];
},
del(index,name){
//根据索引来删除 splice() 删除1个元素,并向数组添加新元素。
this.jsonArr.splice(index,1)
},
//修改
update1(index,text){
this.flag=false;
this.jsonArr.index.name=text;
},
//修改
update2(index,age){
//弹窗
this.jsonArr.index.age=age;
}
}
})
</script>
搜索排序的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box" align="center">
<input type="text" v-model="content" />
<ul>
<li v-for="(ele,index) in newArry" :key="index">
{{index+1}}--{{ele.name}}---{{ele.age}}--{{ele.sex}}
</li>
</ul>
<button type="button" @click="sortAge(1)">年龄升序</button>
<button type="button" @click="sortAge(2)">年龄降序</button>
<button type="button" @click="sortAge(3)">默认顺序</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
content: '',
jsonArray: [{
'name': 'zhangsan',
'age': 230,
'sex': '男'
}, {
'name': 'lisi',
'age': 24,
'sex': '男'
}, {
'name': 'wangwu',
'age': 25,
'sex': '男'
}, {
'name': 'zhaoliu',
'age': 26,
'sex': '男'
}]
},
computed: {
newArry: function() {
//console.log("newArry 调用了")
//this 代表的是vue对象。
var v = this.content.trim();
//alert(this); this 指向的是vue对象
//根据用户的输入,从jsonArray过滤出符合条件的元素,把他返回。
//filter() 检测数值元素,并返回符合条件所有元素的数组。
var arr = this.jsonArray.filter(function(ele) {
/* if(ele.name.indexOf(v)!=-1){
return true;
}else{
return false;
} */
//alert(this); 这里的this,不是vue对象。
return ele.name.indexOf(v) != -1
})
//如果你使用箭头函数 那么这个this 指向的是vue对象。
//var arr=this.jsonArray.filter((ele)=>ele.name.indexOf(this.content)!=-1)
return arr;
}
},
methods:{
sortAge(num){
if(num==1){
//升序排列
this.jsonArray.sort(function(a,b){
return a.age-b.age;
});
}else if(num==2){
//降序排列
this.jsonArray.sort(function(a,b){
return -(a.age-b.age);
});
}else{
//默认顺序 作业你来实现
}
}
}
})
</script>
Vue发送Ajax请求
jsonp使用vue-resource库发送ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 使用vue-resource来发送Ajax请求 -->
<script src="js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<button type="button" @click="sendAjax()">get异步请求</button>
<button type="button" @click="sendAjaxPost()">post异步请求</button>
<button type="button" @click="sendJSONP()">jsonp异步请求</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods: {
sendAjax() {
//发送get请求
/* this.$http.get('https://autumnfish.cn/api/joke/list?num=1').then(function(res) {
document.write(res.body); //res.body 获取后台返回的JSON数据
document.write(res.body.msg);
}, function() {
console.log('请求失败处理');
}); */
this.$http.get('https://autumnfish.cn/api/joke/list', {
params: {
num: 1
}
}).then(function(res) {
document.write(res.body); //res.body 获取后台返回的JSON数据
document.write(res.body.msg);
}, function(res) {
console.log(res.status);
});
},
sendAjaxPost() {
this.$http.post('http://localhost:8080/login', {
username: "zhangsanwoaini",
password: "http://www.runoob.com"
}, {
emulateJSON: true //声明后台返回的是json类型
}).then(function(res) {
//document.write(JSON.parse());
var jsonObj = res.body;
alert(jsonObj.username);
alert(jsonObj.password);
}, function(res) {
console.log(res.status);
});
},
sendJSONP() {
this.$http.jsonp('https://tcc.taobao.com/cc/json/mobile_tel_segment.htm', {
params: {
tel:'13995865654'
},
jsonp: 'callback' //jsonp默认是callback,百度缩写成了cb,所以需要指定下 }
}).then(res => {
alert(res.status);
alert(res.body);
alert(res.body.catName);
});
}
}
})
</script>
推荐使用qs库 qs库不可以发送jsonp请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- vue2.0 以后 推荐使用 axios 他 来发生Ajax
axios 他 不支持jsonp
-->
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/qs.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<button type="button" @click="sendAjax()">get异步请求</button>
<button type="button" @click="sendAjaxPost()">post异步请求</button>
</div>
</body>
</html>
<script type="text/javascript">
var qs=Qs;
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods: {
sendAjax() {
axios.get('http://wthrcdn.etouch.cn/weather_mini', {
params: {
city: '西安'
}
}).then(function(res) {
//请求成功的处理
var jsonObj = res.data; //取出后台返回的json数据
alert(jsonObj.desc);
}).catch(function(error) { // 请求失败处理
console.log(error);
});
},
sendAjaxPost() {
//使用 axios 进行post请求,如果是跨域请求,后台也设置了response.setHeader("Access-Control-Allow-Origin", "*"); 运行跨域,我们如果没有给后台传递参数,那跨域请求没有问题,但是 如果我们传递参数,
//用{ username: 'zhangsan',password: '654321'}形式来传递,又不行了。
//怎么解决,可以这么来传递参数,使用FormData来传递参数。
/* var formData = new FormData();
formData.append('username', 'zhaoliu');
formData.append('password', '654321'); */
//username=zhaoliu&password=654321
var s = qs.stringify({
"username": "lisi",
"password": "88888"
})
axios.post('http://localhost:8080/login',s,{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(res) {
//console.log(response);
var jsonObj = res.data; //取出后台返回的json数据
alert(jsonObj.username);
alert(jsonObj.password);
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
Vue的生命周期函数(面试)
mounted(一进入页面要做的事情)与beforeDestory常用(销毁前要做的事情)
数据更新才会调用updated 与 beforeupdated
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box" style="color: aqua;">
<h1 v-show="flag">一闪一闪亮晶晶</h1>
<button type="button" @click="stop()">停止闪烁</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
flag: true,
timeID:0
},
mounted: function() {
//alert("mounted生命周期函数调用了")
this.timeID=setInterval(() => {
console.log("定时器在执行");
this.flag = !this.flag
}, 1000)
},
beforeDestroy:function(){
//alert("vue销毁之前调用beforeDestroy")
//那这个生命周期方法里面可以做一些善后收尾的工作。
//善后工作,应该把定时器也停了
clearInterval(this.timeID);
},
methods: {
stop() {
//停止闪烁,销毁Vue
this.$destroy();
//善后工作,应该把定时器也停了。
}
}
})
</script>
过滤器
复杂逻辑写到过滤器中 对展示的结果做处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
{{msg|change|reverse}}
<h1>{{time|formatTime}}</h1>
<h1>{{time|formatTime('YYYY-MM-DD HH:mm:ss')}}</h1>
<h1>{{time|formatTime('YYYY-MM-DD')}}</h1>
<h1>{{time|formatTime('HH:mm:ss')}}</h1>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'heLLO',
time:new Date()
},
//定义过滤器
filters:{
change(v){
var one=v.substring(0,1).toUpperCase();
var two=v.substring(1).toLowerCase();
//alert(two);
return one+two;
},
reverse(v){
return v.split('').reverse().join('');
},
//e6的语法:形参默认值
formatTime(time,str='YYYY-MM-DD HH:mm:ss'){
var dateStr2=moment(time).format(str);
return dateStr2;
}
}
})
</script>