Vue指令 第三天
作者：互联网
V-text：
v-text指令的作用是：设置标签的内容
默认写法会替换全部内容，使用差值表达式{{}}
可以替换指定的内容
<body>
<div id="app">
<!-- 这种可以显示 -->
{{ax}}兮兮
<!-- Vue指令：文本指令，内部嵌套的方式，值就会被设置死 兮兮不会显示 -->
<h2 v-text="ax">兮兮</h2>
<h2 v-text="ax+'!'"></h2>
</div>
<script>
var vo=new Vue({
el:"#app",
data:{
ax:"哈哈"
}
})
</script>
</body>
V-html：
v-html指令的作用是：设置元素的innerHtml
内容种有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="a">
{{mes}}
<h2 v-html="mes"></h2>
<h2 v-text="mes"></h2>
<h2 v-html="as"></h2>
<h2 v-text="as"></h2>
</div>
<script>
var app=new Vue({
el:"#a",
data:{
mes:"没有",
// 用这种标签方式最后会被html标签进行解析，其他不行
as:"<a href='#'>点击</a>"
}
})
</script>
</body>
v-on指令：
v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性种
获取data种的属性可以使用this.属性
<body>
<div id="aop">
<!-- v-on:click:点击事件 -->
<input type="submit" value="事件绑定" v-on:click="dolt">
<!-- 简便方式：@clik==v-on:click 相等的 -->
<input type="submit" value="事件绑定" @click="dolt">
<h2 @click="mes">{{foot}}</h2>
</div>
<script>
var aop=new Vue({
el:"#aop",
data:{
foot:"西兰花"
},
// 方法/方法 放入的地方
methods:{
// 第一个方法
dolt:function(){
console.log("1")
},
// 第二个方法
mes:function(){
// 获取data种的foot
console.log(this.foot);
this.foot+="好吃！"
}
}
})
</script>
</body>
计数器：
<body>
<div style="background-color: silver;width: 65px;" id="aop" >
<input style="border-radius: 5px;" type="submit" value="-" @click="j1">
<span style="border: 1px;color: red ;">{{msg}}</span>
<input style="border-radius: 5px;" type="submit" value="+" @click="z1">
</div>
<script>
var aop=new Vue({
el:"#aop",
data:{
//我需要的值
msg:1,
//设置的最大值
max:5,
//这个是最小值
min:0
},
methods:{
j1:function(){
if(this.msg!=this.min){
//如果 我需要的值不等于设置的最小值 那么就减少
this.msg--;
}else{
//如果 我需要的值等于设置的最小值 那么就停止
alert("最小值了！")
}
},
z1:function(){
//如果 我需要的值不等于设置的最大值 那么就增加
if(this.msg!=this.max){
this.msg++;
}else{
//如果 我需要的值等于设置的最大值 那么就停止
alert("最大值了！")
}
}
}
})
</script>
</body>
总结1：
创建Vue示例时：el（挂载点),data（数据),methods(方法)
v-on指令的作用是绑定事件，简写为@方法种通过this,关键字来获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为 {{}}
v-html指令的作用是：设置元素的innerHtml
v-show:
根据表达式的真假，切换元素显示和隐藏
v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，都最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应的元素的显示状态会同步更新
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<!-- v-show:根据true/false 来显示和隐藏 -->
<div style="background-color: red; width: 100px; height: 100px;" v-show="isshow"></div>
<input type="submit" @click="aa" value="显示/隐藏">
</div>
<script>
var a=new Vue({
el:"#app",
data:{
isshow:true
},
methods:{
aa:function(){
//取反 例如 isshow是true=false 是false=true
this.isshow=!this.isshow;
}
}
})
</script>
</body>
v-if：
根据表达式的真假，切换元素的显示和隐藏（操作dom元素）
v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操作dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树种移除
频繁的切换v-show，反之使用v-if,前者的切换消耗小
<body>
<div id="aop">
<p v-if="isshow">隐藏</p>
<p v-if="istrue">显示</p>
<p @click="a">点击我一下</p>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
isshow:true,
istrue:true
},
methods:{
a:function(){
this.isshow=!this.isshow;
this.istrue=!this.istrue;
}
}
})
</script>
</body>
v-bind：
设置元素的属性(比如：src.title.class)
v-bind:属性名=表达式
v-bind指令的作用是：为元素绑定属性
完整的写法是v-bind：属性名
简写的话可以直接省略v-bind，只保留**:属性名**
需要动态的增删class建议使用对象的方式
<body>
<div id="app">
<!-- v-bind:属性名=表达式 -->
<img v-bind:src="ss" v-bind:title="title">
<!-- 简易写法: 三元表达式 如果为true执行第一个 false就执行第二个 -->
<img :src="ss" :class="anctiv?'active':''" @click="a" >
</div>
<script>
var ve=new Vue({
el:"#app",
data:{
ss:"img/aaaa.png",
title:"守望先锋",
anctiv:false
},
methods:{
a:function(){
this.anctiv=!this.anctiv
}
}
})
</script>
</body>
图片切换：
<body>
<div id="aop">
<img :src="arry[index]">
<!-- 如果 数组是为第一张那就不显示上一张 如果 数组是为最后一张那就不显示下一张 -->
<span @click="prev" v-show="index!=0" >上一张</span> <span @click="next" v-show="index<arry.length-1" >下一张</span>
</div>
<script>
var vue=new Vue({
el:"#aop",
data:{
// 把所有的图片存入数组种
arry:["img/aaaa.png","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg"],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++
}
}
})
</script>
</body>
v-for：
根据数据生成列表结构
v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item,index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<!-- v-for:也就是foreach 循环 itme 变量名 index 索引名 in表达式 arry想要遍历的变量名 -->
<p v-for="(itme,index) in arry">{{index+1}}{{itme}}</p>
<h2 v-for="itme in obh" v-bind:title="itme">{{itme.name}}</h2>
<button @click="add">添加</button>
<button @click="remove">移除</button>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:[1,2,3,4,5],
obh:[
{name:"hah"}
]
},
methods:{
add:function(){
// 添加
this.obh.push({name:"292"})
},
remove:function(){
// 默认移除最左边的数据
this.obh.shift()
}
}
})
</script>
</body>
v-on：
传递自定义参数，事件修饰符
事件绑定的方法写成函数调用的形式，可以传入自定义的参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制或者（补充）
.enter 可以限制触发的按键为回车
事件修饰符有很多种
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<!-- @keyup: 键盘事件 后面的enter是回车事件 也是补充的事件 -->
<input type="text" @keyup.enter="sayHi">
<input type="button" @click="h(777,'张飞')" value="提交">
</div>
<script>
var v=new Vue({
el:"#aop",
methods:{
sayHi:function(){
alert(
"吃了没"
)
},
h:function(p1,p2){
console.log(p1)
}
}
})
</script>
</body>
v-model:
获取和设置表单元素的值（双向数据绑定）
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<!-- v-model: 双向绑定 -->
<input type="text" v-model="mas" @keyup.enter="s">
<button @click="set">修改值</button>
{{mas}}
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
mas:"哈哈"
},
methods:{
s:function(){
alert(this.mas)
},
// 可以直接修改值
set:function(){
this.mas="哈哈s"
}
}
})
</script>
</body>
CRUD：
最重要的是掌握方法API
增加：
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<label>{{itme}}</label>
</li>
</ul>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["写代码","吃饭","睡觉"],
msg:""
},
methods:{
// 在数组中存入 值
add:function(){
this.arry.push(this.msg)
}
}
})
</script>
</body>
删除：
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<label @click="remove(index)">{{itme}}</label>
</li>
</ul>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["写代码","吃饭","睡觉"],
msg:""
},
methods:{
// 在数组中存入 值
add:function(){
this.arry.push(this.msg)
},
// splice:删除指定内容 里面的参数是 索引 和 删除的个数（删几个）
remove:function(index){
this.arry.splice(index,1)
}
}
})
</script>
</body>
清空：
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<!-- 通过remove方法传入index索引然后删除元素 -->
<label @click="remove(index)">{{itme}}</label>
</li>
</ul>
<!-- 统计：也是计算好多条数据 -->
<footer style="color: red;">数据为:{{arry.length}}条</footer>
<footer @click="clea">清空</footer>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["写代码","吃饭","睡觉"],
msg:""
},
methods:{
// 在数组中存入 值 也就是所谓的添加
add:function(){
this.arry.push(this.msg)
},
// splice:删除指定内容 里面的参数是 索引 和 删除的个数（删几个）
remove:function(index){
this.arry.splice(index,1)
},
// 清空
clea:function(){
this.arry=[];
}
}
})
</script>
</body>
隐藏：
v-show
完整代码CRUD
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<!-- 通过remove方法传入index索引然后删除元素 -->
<label @click="remove(index)">{{itme}}</label>
</li>
</ul>
<!-- 统计：也是计算好多条数据 如果数组的长度大于0true 小于0为false所以会隐藏-->
<footer style="color: red;" v-show="arry.length>0">数据为:{{arry.length}}条</footer>
<footer @click="clea" v-if="arry.length>0">清空</footer>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["写代码","吃饭","睡觉"],
msg:""
},
methods:{
// 在数组中存入 值 也就是所谓的添加
add:function(){
this.arry.push(this.msg)
},
// splice:删除指定内容 里面的参数是 索引 和 删除的个数（删几个）
remove:function(index){
this.arry.splice(index,1)
},
// 清空
clea:function(){
this.arry=[];
}
}
})
</script>
</body>
标签：function,el,Vue,methods,第三天,指令,data,arry 来源： https://blog.csdn.net/weixin_45554672/article/details/120501385