【从零开始学Vue】快速上手开发课设事件绑定实现简单计数器【图文详细】

最新推荐文章于 2024-11-02 08:58:20 发布

2301_82243710

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量290

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_82243710/article/details/139786847

版权

【从零开始学Vue】快速上手开发课设事件绑定实现简单计数器【图文详细】

内容绑定,事件绑定
- 1. v-text
- 2. v-html
- 3. v-on
- 4. 计数器
- - 4.1 设计思路
  - 4.2 代码展示
  - 4.3 效果演示
下期预告【从零开始学Vue】快速上手开发课设实现简单图片切换器【图文详细】

内容绑定,事件绑定

============================================================================

1. v-text

设置标签的文本值(textContent)

v-text指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

内部支持写表达式


<h2 v-text="msg+'!'"></h2>  <!--默认写法-->

<h2>{{msg}}!</h2>           <!--插值表达式-->

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>

3. v-on

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>


### React

*   介绍一下react

*   React单项数据流

*   react生命周期函数和react组件的生命周期

*   react和Vue的原理，区别，亮点，作用

*   reactJs的组件交流

*   有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

*   项目里用到了react，为什么要选择react，react有哪些好处

*   怎么获取真正的dom

*   选择react的原因

*   react的生命周期函数

*   setState之后的流程

*   react高阶组件知道吗？

*   React的jsx，函数式编程

*   react的组件是通过什么去判断是否刷新的

*   如何配置React-Router

*   路由的动态加载模块

*   Redux中间件是什么东西，接受几个参数

*   redux请求中间件如何处理并发



![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)