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

最新推荐文章于 2024-07-23 21:45:00 发布

2401_85158779

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量366

点赞数 3

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_85158779/article/details/140383421

版权

程序员专栏收录该内容

3 篇文章 0 订阅

订阅专栏

内容绑定,事件绑定
- 1. v-text
- 2. v-html
- 3. v-on
- 4. 计数器
- - 4.1 设计思路
  - 4.2 代码展示
  - [4.3 效果演示](about:blank#43__139

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

)

下期预告【从零开始学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">
### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

2401_85158779

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
『从零开始学Vue』快速上手开发课设事件绑定实现简单计数器【图文详细】

4.3 效果演示](about:blank#43__139内容绑定,事件绑定1. v-text设置标签的文本值(textContent)2. v-html3. v-on4. 计数器。
复制链接

扫一扫