Vue快速入门（2）
程序员文章站
2022-06-04 23:36:31
...
v-text
- 作用：设置标签的文本值
- 程序例子：
<div id="app" >
<h3>{{message}} </h3>
<!-- 双引号拼接字符串-->
<h3>{{message+"用双引号"}} </h3>
<!-- 单引号拼接字符串-->
<h3>{{message+'用单引号'}} </h3>
<h2 v-text="message"></h2>
<!-- v-text 指令只能用单引号拼接-->
<h2 v-text="message+'vtext'"></h2>
<!--标签内的数据
插值表达式显示
vtext指令不显示
-->
<h2 >{{aaa}} bbb</h2>
<h2 v-text="aaa">bbb</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"this is a messages:",
aaa:"this is aaa"
}
})
</script>
运行结果
v-html
- 作用：设置元素的innerHTML，含有html结构会被解析为标签，而v-text只会解析为文本
- 程序例子：
<div id="app" >
<!--对比v-text和v-html-->
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>点击百度</a>"
}
})
</script>
运行结果
v-on
- 作用：为元素绑定事件
-
v-on可以简写为@ - 绑定的方法定义在methods中
程序例子：
<div id="app">
<!--v-on 添加绑定事件-->
<input type="button" value="click单击事件绑定" v-on:click="doIt">
<input type="button" value="mouseenter鼠标引入事件绑定" v-on:mouseenter="doIt">
<input type="button" value="dbclick双击事件绑定" v-on:dblclick="doIt">
<!--v-on 可以替换成@ ，一样可以添加绑定事件（效果相同）-->
<input type="button" value="事件绑定" @dblclick="doIt">
<!-- 利用事件改变文本-->
<h2 @click="changeFood">{{food}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "蛋炒饭"
},
methods: {
doIt: function () {
alert("做it");
},
changeFood: function () {
this.food+="，加个蛋"
console.log(this.food);
}
}
})
</script>
点击蛋炒饭后，会变为“蛋炒饭，加个蛋”
设计一个计数器
- 利用上面学习的知识，设计一个计数器
- 程序例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue指令</title>
<style>
div{
text-align: center;
}
span{
font-size:30px;
display: inline-block;
vertical-align: middle;
color: brown;
line-height: 80px;
width: 80px;
height: 80px;
}
button{
background-color:rgb(110, 121, 141);/*按钮背景颜色*/
border-radius: 8px;/*让按钮变得圆滑一点*/
font-size:30px;
text-align: center;
vertical-align: middle;
color: brown;
width: 100px;
height: 80px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
num:5,
addEnther:false
},
methods:{
sub:function(){
if(this.num<=0){
alert("别点了，到底了");
this.num=0;
}else{
this.num--;
}
},
add:function(){
if(this.num>=10){
alert("别点了，到顶了");
this.num=10;
}else{
this.num++;
}
}
}
})
</script>
</body>
</html>
运行效果：