Vue本地应用
Vue本地应用
通过Vue实现常见的网页效果，学习Vue指令，以案例巩固知识点，Vue指令指的是，以v-开头的一组特殊语法。
（一）Vue指令
1、内容绑定、事件绑定（v-text、v-html、v-on）
v-text
<div id="app">
<h2 v-text="message">深圳</h2>
<h2>深圳{{message+"!"}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!",
}
})
</script>
</body>
使用v-text会替换标签内部的所有内容，如果要在中间插入内容，则可以使用{{message}}的形式，这称之为差值表达式。可以使用“+”进行字符串的连接。
v-text指令的作用是：设置标签的内容（textContent），默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容，内部支持写表达式。
v-html
<div id="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>hihihi!</a>"
}
})
</script>
v-html指令的作用是：设置元素的innerHtml，内容中有html结构会被解析为标签，v-text指令无论内容是什么，只会解析为文本，解析文本使用v-text，需要解析html结构使用v-html。
v-on
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="事件绑定" v-on:mouseenter="doIt">
<input type="button" value="v-on简写" @dblclick="doIt">
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
alert("做It");
}
}
})
</script>
v-on指令的作用是：为元素绑定事件，事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据
2、显示切换、属性绑定（v-show）
v-show
<div id="app">
<input type="button" @click="changeIsShow" value="切换">
<input type="button" @click="addAge" value="添加年龄">
<img src="./img/test1.jpg" alt="" v-show="true">
<img src="./img/test1.jpg" alt="" v-show="isShow">
<img src="./img/test1.jpg" alt="" v-show="age>=18">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
age:16
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
v-show指令的作用是：根据真假切换元素的显示状态；原理是修改元素的display，实现显示隐藏；指令后面的内容，最终都会解析为布尔值；值为true元素显示，值为false元素隐藏；数据改变之后，对应元素的显示状态会同步更新。
v-if
<div id="app">
<input type="button" value="切换" @click="toggleIsShow">
<p v-if="true">我是一个P标签</p>
<p v-if="isShow">我是一个P标签</p>
<p v-show="isShow">我是一个P标签 v-show</p>
<h2 v-if="temperature>=35">热死了</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
temperature:20
},
methods:{
toggleIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
v-if指令的作用是：根据表达式的真假切换元素的显示状态；本质是通过操作dom元素来切换显示状态；表达式的值为true，元素存在于dom树中，为false，从dom树中移除；频繁的切换使用v-show，反之使用v-if，前者的切换消耗小。
v-bind
<div id="app">
<img v-bind:src="imgSrc">
<img :src="imgSrc" alt="" :tittle="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
<img :src="imgSrc" alt="" :tittle="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"./img/test1.jpg",
imgTitle:"TTG",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive=!this.isActive;
}
}
})
</script>
v-bind指令的作用是：为元素绑定属性；完整的写法是v-bind：属性名；简写的话可以直接省略v-bind，只保留：属性名；需要动态的增删class建议使用对象的方式。
图片切换案例
列表数据使用数组保存；v-bind指令可以设置元素属性，比如src；v-show和v-if都可以切换元素的显示状态，频繁切换使用v-show。
<div id="app">
<a href="javascript:void(0)" v-show="index!=0" @click="prev">上一张</a>
<img v-bind:src="imgArr[index]">
<a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next">下一张</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgArr:[
"./img/test1.jpg",
"./img/test2.jpg",
"./img/test3.jpg",
"./img/test4.jpg",
"./img/test5.jpg",
],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
3、列表循环、表单元素绑定
v-for
指令作用：根据数据生成列表结构；
数组经常和v-for结合使用；
语法是（item，index）in 数据；
item和index可以结合其他指令一起使用；
数组长度的更新会同步到页面上，是响应式的。
<div id="app">
<input type="button" @click="add" value="添加">
<input type="button" @click="remove" value="移除">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ index }} {{item}}
</li>
<li v-for="(item,index) in objArr">
{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4],
objArr:[
{name:"jack"},
{name:"rose"}
]
},
methods:{
add:function(){
this.objArr.push({name:"tom"})
},
remove:function(){
this.objArr.shift();
}
}
})
</script>
v-on
事件绑定的方法写成函数调用的形式，可以传入自定义参数；
定义方法时需要定义形参来接受传入的实参；
事件的后面跟上.修饰符可以对事件进行限制；
.enter可以限制触发的按键为回车；事件修饰符有多种。
文档传送门： https://cn.vue.js.org/v2/api/#v-on
<div id="app">
<input type="button" value="doit" @click="doit(666)">
<input type="text" @keyup.enter="sayhi">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
},
methods:{
doit:function(p1){
console.log("doit");
console.log(p1);
},
sayhi:function(){
alert("hi")
}
}
})
</script>
v-model
指令的作用是便捷的获取和设置表单元素的值（双向数据绑定）；
绑定的数据会和表单元素值相关联；
绑定的数据<------>表单元素的值。
<div id="app">
<input type="button" value="setM" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h3 v-text="message"></h3>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"huohuo"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="haha";
}
}
})
</script>
（二）项目实战-----记事本
列表数据通过v-for指令结合数据生成；
v-on结合事件修饰符可以对事件进行限制，比如.enter；
v-on在绑定事件时可以传递自定义参数；
通过v-model可以快速的设置和获取表单元素的值；
通过v-show进行元素的显示和隐藏；
基于数据的开发方式。
<div id="app">
<div id="header">
<h2>记事本</h2>
</div>
<div id="section">
<input type="text" @keyup.enter="addMessage" v-model="txt">
<div>
<p v-for="(item,index) in message">{{index+1}}{{item.msg}}<span @click="deletMessage(index)">X</span></p>
</div>
</div>
<div id="footer">
<span v-show="message.length!=0">{{message.length}}条记录</span>
<span v-show="message.length!=0" @click="clear">clear</span>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
txt:"",
message:[
{msg:"吃饭"},
{msg:"睡觉"}
]
},
methods:{
addMessage:function(){
this.message.push({msg:this.txt});
this.txt="";
},
deletMessage:function(index){
this.message.splice(index,1);
},
clear:function(){
this.message=[];
}
}
})
</script>
浙公网安备 33010602011771号