👨🎓作者简介：定制开发小程序一位喜欢写作，定制开发小程序计科专业大二菜鸟
🏡个人主页：
🕒首发日期：2022年5月11日星期三
📚订阅专栏：
🌌上期文章：定制开发小程序如果文章有帮到你的话记得点赞👍+收藏💗定制开发小程序支持一下哦
【从零开始学Vue】快速上手开发 事件绑定实现简单计数器【图文详细】
内容绑定,事件绑定
1.
设置标签的文本值(textContent)
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
- 内部支持写表达式
<h2 v-text="msg+'!'"></h2> <!--默认写法--><h2>{{msg}}!</h2> <!--插值表达式-->- 1
- 2
2. v-html
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
<body> <div id="app"> {{msg}} <h2 v-text="msg+'!'"></h2> <!--默认写法--> <h2>{{msg}}!</h2> <!--插值表达式--> <h2 v-html="content"></h2> <!--解析成标签--> <h2 v-text="content"></h2> <!--解析为文本--> </div> <script src="./js/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ msg:"hello vuejs", content:"<a href='https://www.baidu.com/'>百度</a>" } }) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
3.
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
4. 计数器
4.1 设计思路
- data中定义数据:比如num
- methods中添加两个方法:比如add(递增),sub(递减)
- 使用v-text将num设置给span标签
- 使用v-on将add,sub分别绑定给+,-按钮
- 累加的逻辑:小于10累加,否则提示
- 递减的逻辑:大于0递减,否则提示
4.2 代码展示
<!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>Document</title></head><body> <div id="app"> <button @click="sub">-</button> <span>{{num}}</span> <button @click="add">+</button> </div> <script src="./js/vue.js"></script> <script> var vm=new Vue({ el:"#app", data:{ num:1 }, methods:{ add:function(){ if(this.num<10){ this.num++; }else{ alert('别点啦，最大啦!'); } }, sub:function(){ if(this.num>0){ this.num--; }else{ alert('别点啦，最小啦!') } } }, }) </script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
4.3 效果演示
可以看到一个基本的计数器的小功能就实现啦，这个功能在我们网购等页面都是常见的