(二)用Vue开发网页效果
1.内容绑定,事件绑定
v-text:
设置标签的文本值(textContent)
直接上代码,具体内容都在代码注释中。
<div id="app">
<!-- v-text 指令会覆盖h2标签中的任何内容,如第一个h2标签里的“小红”,就会被message所带的内容“小明所代替。” -->
<h2 v-text="message">小红</h2>
<!-- 这样写可以将message中的内容与h2标签中的内容拼接起来 -->
<h2>{{message}}深圳</h2>
<!-- v-text后边拼接表达式时,这么用 -->
<h2 v-text="message+'!'"></h2>
<h2>深圳{{message + "!"}}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"小明",
info:"前端与移动教研"
}
})
</script>
页面显示:
v-html:
设置标签的innerHTML
首先根据下边这段代码的页面效果看一下v-html和v-text的区别:
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
// content:"小明"
content:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
页面效果:
可以看出,当content的内容是一个链接时,二者的效果是完全不同的。点击页面效果中的 “百度”也会跳转到相应的链接。
tips
内容中有html结构会被解析为标签,而v-text指令无论内容是什么,只会解析为文本。解析文本使用v-text,解析html使用v-html。
v-on:
为元素绑定事件。
- v-on:click:鼠标点击事件
- v-on:mouseenter:鼠标悬停事件
- v-on:dbclick:鼠标双击事件
- 上述三种v-on指令都可以用 @ 来替换 “v-on:”
代码:
<div id="app">
<!-- 此处定义的是点击事件,用v-on:click实现 -->
<input type="button" value="v-on指令" v-on:click="doIt" />
<!-- 此处定义的是点击事件,用v-on的简写 @click 实现 -->
<input type="button" value="v-on简写" @click="doIt" />
<!-- 此处定义的是双击事件,用@dbclick实现 -->
<input type="button" value="双击事件" @dblclick="doIt" />
<!-- 每点击一次,就会调用一次changeFood,相应的,每次“西兰花”后边都会多一个“好好吃!!!” -->
<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与data是平级的
methods:{
//定义一个方法 doIt
doIt:function(){
//定义一个弹出框,内容为 “做IT”
alert("做IT");
}
changeFood:function(){
this.food+="好好吃!!!"//得到data中的food关键字
},
},
})
</script>
页面效果:
这是点击三次 “西兰花” 之后的效果:
tips:
1.v-on指令的作用是:为元素绑定事件
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中
5.方法内部通过this关键字可以访问定义在data中的数据
## 计数器案例
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200905165513294.png#pic_center
计数器案例
- data中定义数据,如:num=1
- methods中添加两个方法:add(递增),sub(递减)
- 使用v-text将num设置给span标签
- 使用v-on将add,sub分别绑定给+,-按钮
- 累加的逻辑:小于10累加,否则提示
- 递减的逻辑:大于0递减,否则提示
代码如下:
<div id="app">
<!-- 计数器功能区域 -->
<div class="input-num">
<button @click="sub">
-
</button>
<span>{{ num }}</span>
<button @click="add">
+
</button>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建Vue实例
var app = new Vue({
el:"#app",
data:{
num:1
},
//methods与data是平级的
methods:{
add:function(){
// console.log('add');
if(this.num < 10){
this.num++;
}
else{
alert('别点啦,已经最大啦!');
}
},
sub:function(){
// console.log('sub');
if(this.num > 0){
this.num--;
}
else{
alert('别点啦,已经最小啦!');
}
},
},
})
</script>
页面显示:
小于0时:
大于0时: