🌵Vue本地应用(内容绑定,事件绑定)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 🌵Vue本地应用(内容绑定,事件绑定)

1.v-text指令


  • v-text这个指令的作用:设置标签的内容(textContent)
  • 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。
  • 内部支持写表达式


image.png

2.v-html指令


  • v-html指令的作用是设置元素的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么,只会解析为文本
  • 解析文本使用v-text,需要解析html结构使用v-html


image.png


3.v-on指令


  • v-on指令的作用是:为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法的内部通过this关键字可以访问定义在data中数据


image.png


4.计数器案例


// 由于这里主要学习Vue的知识,CSS代码就不放进来了
<body>
    <div id="app">
        <button class="left" @click="sub">-</button>
        <span>{{ num }}</span>
        <button class="right" @click="add">+</button>
    </div>
    <script>
        var app = 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>


5ff32b2c64a04ad1a3152be541dde21c_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif


总结:


  • 创建Vue实例时:el设置的是挂载点,data设置的是数据,method设置的是方法
  • v-on指令的作用是绑定事件,简写为@
  • 方法的内部通过this关键字获取data中的数据
  • v-html指令的作用是:设置元素的innerHTML
目录
打赏
0
0
9
0
66
分享
相关文章
|
27天前
|
vue使用iconfont图标
vue使用iconfont图标
127 1
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
37 11
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
31 8
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
71 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
41 1
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
39 8
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
初识 Vue(11)---(Vue 中的事件绑定)
Vue 中的事件绑定 案例:点击 Hello World ,从黑变红,再次点击,从红变黑... 通过 class 来实现 页面效果的变更 方法一:(通过对象)对象绑定 ​​ Vue 中的事件绑定 .
1173 0
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
106 58
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
61 1
vue学习第一章
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等