1.条件渲染
1. 前言
- 条件渲染指令
v-if
v-else
v-show - 比较v-if与v-show
如果频繁切换使用 v-show较好
v-if:隐藏效果:去掉失效的标签
v-show隐藏效果:采用样式隐藏失效标签
2.代码
- 前端代码
<div id="app">
<p v-if="ok">if成功了</p>
<p v-else>if失败了</p>
<!--先获取ok的值,在取反返回-->
<button @click="ok=!ok">if更新</button>
<p v-show="ok2">show成功了</p>
<p v-show="!ok2">show失败了</p>
<button @click="ok2=!ok2">show更新</button>
</div>
- js代码
const vm= new Vue({
el:"#app",
data:{
ok:false,
ok2:false
}
})
- 展示代码
2.列表渲染
1. 前言
- 列表显示
数组:v-for/index
对象:v-for/key - 列表的更新展示
删除item
替换:item
2.代码
- 页面
<div id="app">
<h2> v-for 遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" v-bind:key="index">
{{index+1}}--{{p.name}}---{{p.seq}}
---<button @click="deleteP(index)">delete</button>
---<button @click="updateP(index,{name:'jQ',seq:11})">update</button>
</li>
</ul>
<h2> v-for 遍历对象</h2>
<ul>
<li v-for="(value,key) in persons[1]" v-bind:key="key">
{{value}}--{{key}}
</li>
</ul>
</div>
- JS
new Vue({
el:"#app",
data:{
persons:[//vue本身只监视了persons的改变,但是没有监听数组内部数据的改变
{'name':'vue','seq':16},
{'name':'java','seq':15},
{'name':'php','seq':13},
{'name':'layUI','seq':12}
]
},
methods:{
//vue重新了数组中的一系列改变数组内部数据的方法(先调用原生,单更新界面)
deleteP(index){//vue的数组更新检测
//删除persons中指定的index
this.persons.splice(index,1);
},
updateP(index,newP){
//修改persons内部数据,但是没有调用的vue的监听,所以没有发生变化
// this.persons[index]=newP;
this.persons.splice(index,1,newP);//先删除index位置的数据,的第1顺位,并新增一个newP
//同样新增的话,将中间的1变为0
}
}
})
- 页面展示
3.列表的搜索和排序
- js
const vm = new Vue({
el:"#app",
data:{
persons:[
{'name':'java','seq':19},
{'name':'python','seq':14},
{'name':'js','seq':15},
{'name':'golang','seq':10},
{'name':'php','seq':9},
{'name':'vue','seq':17},
{'name':'c','seq':12}
],
searchName:'',
orderType:"by",//by代表原有顺序,asc 代表 正序, desc 代表倒序
},
computed:{
filterPersons(){
//取出相关的数据
const{searchName,persons,orderType}=this;
//最终需要显示的数组
let fPersons;
//对persons进行过滤
//str.indexOf(s) 判断s在str的下标,如果不为-1则代表包含s串
fPersons =persons.filter(p => p.name.indexOf(searchName)!==-1);
//排序
//by代表原有顺序,asc 代表 正序, desc 代表倒序
if(orderType!=='by'){
fPersons.sort(function(p1,p2){//如果返回负数p1在前,如果返回正数p2在前
if(orderType === 'desc'){
return p2.seq-p1.seq;//倒叙
}else{
return p1.seq-p2.seq;//正序
}
})
}
return fPersons;
}
},
methods:{
seqBy(orderType){
this.orderType=orderType;
}
}
})
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="searchName"/>
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{{index+1}}---{{p.name}}---{{p.seq}}
</li>
</ul>
<button type="button" @click="seqBy('asc')">顺序正序</button>
<button type="button" @click="seqBy('desc')">顺序倒序</button>
<button type="button" @click="seqBy('by')">原本顺序</button>
</div>
</body>
<script src="../vue/vue.js"></script>
<script src="day53.js"></script>
</html>
3.页面显示
4.事件监听
- html
<div id="app">
<h2>动态监听</h2>
<button type="button" @click="test1">动态监听1</button>
<button type="button" @click="test2('vue')">动态监听2</button>
<!--$event代表事件对象 不传也是存在的-->
<button type="button" @click="test3">动态监听3</button>
<button type="button" @click="test4('aaa',$event)">动态监听4</button>
<h2>事件修饰符</h2>
<div style="width: 200px;height: 200px;background-color: #FF0000;" @click="test5">
<!--@click.stop 停止冒泡-->
<div style="width: 50px;height: 50px;background-color: #0000FF;" @click.stop="test6"></div>
</div>
<!--@click.prevent 阻止时间默认行为-->
<a href="https://www.baidu.com" @click.prevent="test7">跳转到百度</a>
<h2>按键修饰符</h2>
<!-- keyup 按键弹起来时调用-->
<input type="text" @keyup="test8"/>
<!-- keyup.enter enter键 按键弹起来时调用-->
<input type="text" @keyup.enter="test9"/>
</div>
- js
const vm=new Vue({
el:"#app",
data:{
},
methods:{
test1(){
alert("test1");
},
test2(msg){
alert(msg);
},
test3(event){
alert(event.target.innerText);
},
test4(str,event){
alert(str+"<--->"+event.target.innerText);
},
test5(){
alert("out");
},
test6(event){
// event.stopPropagation();
alert("inner");
},
test7(event){
// event.preventDefault();
alert("好哒");
},
test8(event){
if(event.keyCode===13){
alert(event.target.value);
}
},
test9(event){
alert(event.target.value);
}
}
})
- 页面
5.表单数据的自动收集
使用v-model(双向数据绑定)自动收集数据
text/textarea (文本编辑框)
checkbox(复选框)
radio(单选框)
select(下拉选择框)
- js代码
const vm=new Vue({
el:"#app",
data:{
userName:'',
pwd:'',
sex:'boy',
likes:['java'],
allcity:[
{id:1,name:'北京'},
{id:2,name:'上海'},
{id:3,name:'广州'},
{id:4,name:'深圳'}
],
cityId:"",
desc:"",
},
methods:{
handsubmit(){
console.log('用户名:--->'+this.userName);
console.log('密码:--->'+this.pwd);
console.log('性别:--->'+this.sex);
console.log('爱好:--->'+this.likes);
console.log('城市ID:--->'+this.cityId);
console.log('个人介绍:--->'+this.desc);
}
}
})
- html页面
<div id="app">
<!--@submit.prevent 阻止表单提交-->
<form action="/xxx" method="post" @submit.prevent="handsubmit">
<span>用户名:</span><br />
<input type="text" v-model="userName" />
<br />
<span>密码:</span><br />
<input type="password" v-model="pwd" />
<br />
<span>性别:</span><br />
<input type="radio" id="female" value="girl" v-model="sex"/>
<label for="female">女</label>
<input type="radio" id="male" value="boy" v-model="sex"/>
<label for="male">男</label>
<br />
<span>爱好:</span><br />
<input type="checkbox" id="vue" value="vue" v-model="likes"/>
<label>vue</label><br />
<input type="checkbox" id="java" value="java" v-model="likes"/>
<label>java</label><br />
<input type="checkbox" id="php" value="php" v-model="likes"/>
<label>php</label><br />
<span>城市</span><br />
<select name="城市" v-model="cityId"><br />
<option value="">未选择</option>
<option :value="city.id" v-for="(city,index) in allcity" :key="index">
{{city.name}}
</option>
</select>
<br />
<span>个人介绍</span><br />
<textarea rows="10" cols="" v-model="desc"></textarea>
<br />
<input type="submit" name="" value="提交" />
</form>
</div>
- 前端页面
6.生命周期
三个阶段:初始化,更新,死亡
减少更新次数.先把数据在内存中更新,再一次性进行更新要页面
常用方法
- 初始化显示
beforeCreate:创建之前
created:创建
beforeMount:初始化之前
mounted:初始化(加载ajax请求,定时器等)
2.更新显示
beforeUpdate:更新之前
updated:更新
3.vue实例销毁阶段 $destroy
beforeDestroy:死亡之前
destroyed:死亡
代码
- js
new Vue({
el:"#app",
data:{
isShow:true
},
//创建之前
beforeCreate(){
console.log("beforeCreate");
},
//创建
created() {
console.log("created");
},
//初始化之前
beforeMount() {
console.log("beforeMount");
},
//初始化
mounted() {//初始化显示之后,立即调用一次
this.intervalId=setInterval(()=>{//所有回调函数没有自己的this,所以要使用箭头函数来之前外面的this
this.isShow=!this.isShow;
},1000)
console.log("mounted");
},
//分界线,以上 初始化阶段
//更新前
beforeUpdate(){
console.log("beforeUpdate");
},
//更新
updated(){
console.log("updated");
},
//分界线,以上 更新阶段
//死亡之前
beforeDestroy(){//VM死亡之前会调用一次
//清除定时器
clearInterval(this.intervalId);
console.log("beforeDestroy");
},
//死亡
destroyed(){
console.log("destroyed");
},
methods:{
dieVm(){//vm死亡
this.$destroy()
//死亡后,会失去数据绑定的权限,会有内存泄露.
//内存泄露原因是,每次启动程序,都会分配一定的内存
}
}
})
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button type="button" @click="dieVm">RainButton</button>
<p v-show="isShow">Rain</p>
</div>
</body>
<script src="../vue/vue.js"></script>
<script src="day56.js"></script>
</html>
- 前端页面展示
- console
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
