【从零开始学Vue】快速上手开发课设 事件绑定实现简单计数器【图文详细】
========================================================================
设置标签的文本值(textContent)
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
- 内部支持写表达式
<h2 v-text="msg+'!'"></h2> <!--默认写法-->
<h2>{{msg}}!</h2> <!--插值表达式-->
- 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>
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
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>
#### 总结
=============================================================
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
* 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
* 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
