题目：做一个计数器在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>
?