题目:做一个计数器在0-10之间对数字进行加减操作,超过设定范围弹窗提示
分析:1. data中定义数据:比如num
2. methods中添加两个方法:比如add(递增),sub(递减)
3. 使用v-text将num设置给span标签
4. 使用v-on将add,sub分别绑定给+、- 两按钮
5. 累加的逻辑:在小于10的情况下进行累加,否则提示
6. 递减的逻辑:在大于0的情况下进行递减,否则提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
</head>
<body>
<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@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
sub: function () {
if (this.num > 0) {
this.num--;
} else {
alert("别点了,已经是最小了哎!")
}
},
add: function () {
if (this.num < 10) {
this.num++;
} else {
alert("别点了,已经是最大了哎!")
}
}
},
})
</script>
</body>
</html>
初始状态:
数值小于0状态:
数值大于10状态:
本案例注意事项:
1. 创建Vue示例是:el(挂载点),data(数据),methods(方法)
2. v-on 指令的作用是绑定事件,简写为@
3. 方法中通过this,关键字获取data中的数据
4. v-text 指令的作用是:设置元素的文本值,简写为{{}}
5. v-html 指令的作用是:设置元素的innerHTML
PS:Vue指令:(指 v- 实现的特殊语法; 用来实现常见的网页效果)
以下是案例中涉及到的vue指令:
1. v-text:
设置标签的文本值;
默认写法会替换全部内容,使用差值表达式可以替换部分内容;
内部支持写表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text指令</title>
</head>
<body>
<div id="app">
<h2 v-text="message + '!'">深圳</h2>
<h2 v-text="info + '!'">深圳</h2>
<h2> {{ message + '!' }} 深圳</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "黑马程序员!!!",
info: "前端移动检验部"
}
})
</script>
</body>
</html>
2. v-html:
设置标签的innerHTML;
内容中有html结构会被解析成标签;
v-text无论是什么都会解析成文本;
解析文本内容使用v-text,需要解析html结构使用v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html指令</title>
</head>
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
<p v-html="address"></p>
<p v-text="address"></p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
content: "黑马程序员",
address: "<a href='http://www.itheima.com'>黑马程序员</a>"
}
})
</script>
</body>
</html>
3. v-on基础:
为元素绑定事件;
事件的指令可以简写为@;
绑定的方法定义在methods属性中;
方法内部可以通过关键字this来访问定义在data中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on指令</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{ food }}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "西兰花炒蛋"
},
methods: {
doIt: function () {
alert("执行doIt");
},
changeFood: function () {
this.food += "好好吃!"
}
},
})
</script>
</body>
</html>