AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-第二章】2-3 vue模板语法

2022-09-26 147
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-第二章】2-3 vue模板语法

]UWOD(KIB9LJS9~S[T{QHM9.png


前言


在上一篇文章中，讲过了vue的生命周期，今天我们要深入了解一下vue的模板语法。之前的文章中，也大致用过和了解过部分模板语法，通过今天的文章，你将对vue的模板语法有一个更深层次的理解。


v-html


在之前的内容中，我们会在template中用{{}}这样的插值表达式去获取data里面的数据，但是当我们出现下面这种情况的时候，还能不能正常输出我们想要的数据呢？


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: '<strong>Hello World</strong>'
            }
        },
        template: "<div>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


我们在data中给message定义的是一个HTML标签格式化的数据，那么我们输出看一下是什么效果。


6I@FVS591X]%ZT0DOSWF7`L.png


在浏览器中可以看到，template模板将message里面的内容当做一个字符串去输出了，但是想要将message里面的内容正常输出Hello World该怎么办呢？


那就要用到一个vue里面的指令 v-html


template: "<div v-html='message'></div>"
复制代码


将template里面的内容输出改为 v-html 指令的方式，就无需用插值表达式去获取data里面的数据了。


`S2SH7VDP[4[)$T8VHV8VEA.png


通过两次输出的内容进行对比之后，我们发现用 v-html 指令输出的内容会将 HTML 标签进行转义变成我们需要的格式。


定义


v-html：将data里面的数据通过HTML的方式进行展示。


v-bind


在以前的内容中，我们也用过v-bind指令，下面我们就来回顾一下，并且展开来讲一讲。


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        template: "<div title='message'>hello world</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


如果我们要在div标签中的title属性上获取到message内容的话，这样写可以获取到嘛？


E~[9KX)S0ZJVQ}JR64$Z806.png


很显然是获取不到的，在title上显示的就是一个字符串，而这个字符串的内容是message，如果想要获取到data中定义的message的值，我们可以在title属性前加上v-bind指令。


template: "<div v-bind:title='message'>hello world</div>"
复制代码


E~[9KX)S0ZJVQ}JR64$Z806.png


上面这种用法，在以前的文章中已经见过了，下面我们就来拓展一下这种用法。


v-bind指令不仅仅可以用在title属性上，其他属性也是可以的，下面举个栗子看看


<script>
    const app = Vue.createApp({
        data(){
            return {
                disable: false
            }
        },
        template: "<input disabled='disable' />"
    });
    const vm = app.mount('#root');
</script>
复制代码


在很多时候，表单上的input标签会通过不同的权限或者状态来让它禁用或者启用，那么我们这样写了之后，在页面上看到的效果肯定是禁用状态的。


J8KE`4@UC]~ITF0C8K5{5ZY.png


那么我们就可以在disabled属性前面添加v-bind指令，让它可以根据data里面的数据进行改变。


template: "<input v-bind:disabled='disable' />"
复制代码


)930}FI3PWRCO7]HD(1MB88.png


在浏览器控制台中更新data中的数据之后，会明显看到input框禁用和启用的效果了。


上面的用法都是在标签的默认属性上操作的v-bind指令，那可以不可以让属性也变成动态的呢？


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                name: 'title'
            }
        },
        template: "<div v-bind:[name]='message'>hello world</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


通过代码会发现，在v-bind后面跟着的是[name]这样一个属性，name的数据值会在data方法中定义，然后让属性变成一个动态效果。


0QS9C3D5VP67Z0A1~E}0C9C.png


在浏览器控制台中会发现模板标签中出现了title属性，那我们把name的值改变一下，然后在看看对比。


name: 'abc'
复制代码


07%]XD`A[VJ_)F)YJ8611P5.png

定义


v-bind：属性值要去显示data里面的数据变量或者根据data里面的数据进行动态判断就可以用这个指令了。


v-once


通过上面的代码或者以前的代码中会发现，我们在代码中输出数据变量之后，在浏览器控制台改变数据时，页面也会重新渲染并更新页面上的数据。


如果我们只想让页面上的数据一直展示初始化时候的效果，当数据发生变化时，页面不去重新渲染，也不去更新页面上的数据，那我们就可以用到v-once指令了。


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        template: "<div v-once>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


我们只需在template模板中的div标签上加上v-once指令即可，无需携带参数。


FC6}%P%Y}ITPH{N@`Y]RTDN.png


定义


v-once：当指令用在标签上之后，当前标签中引用的数据只会在页面加载完成之后渲染一次，不会随着数据变化而更新DOM。


v-if


<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World',
                show: true
            }
        },
        template: "<div v-if='show'>{{message}}</div>"
    });
    const vm = app.mount('#root');
</script>
复制代码


在template模板中的标签上加上v-if指令，指令中绑定data里面的show变量


_N%NGBB@}O6$V((8(QVR9%R.png


在浏览器页面上好像看不出什么效果，和正常的页面展示没什么区别。但是，当我们把data里面的show改为false之后会是什么效果呢？


const app = Vue.createApp({
    data(){
        return {
            message: 'Hello World',
            show: false
        }
    },
    template: "<div v-if='show'>{{message}}</div>"
});
const vm = app.mount('#root');
复制代码


EO1{F9MGKYHZTT4GKYJ]F@B.png


看到页面上没有任何内容显示，打开浏览器控制台可以看到root下面没有任何DOM被渲染出来，但是会有一个v-if的注释代码显示，这就是v-if指令帮我们做了一个判断，show为false的时候，就表示不显示改元素标签了。


定义


v-if：DOM元素中添加v-if指令之后，会根据v-if绑定的数据变量来判断DOM元素是否显示。


总结


本篇文章中，我们一起学习了vue的模板语法，在之后的文章中，我们会经常用到这些模板语法，希望大家能够熟练使用。

文章标签：
JavaScript
关键词：
vue模板VUE.js
VUE.js vue3
vue3 vue VUE.js
vue3语法VUE.js
语法VUE.js
蜡笔小心_
目录
相关文章
程序员彭于晏
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
35 1
阿里巴巴叫我来巡山
|
7天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
65 17
九月天空
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
31 1
G0518
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
32 1
大树营养快线
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
32 2
程序员彭于晏
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
45 0
程序员彭于晏
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
47 0
凌浩雨
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
凌浩雨
1065 0
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
42 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
30 1

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    vue3使用pinia中的actions，需要调用接口的话
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    Vue3——使用v-if或v-show来实现过渡的动画效果
  • 1
    vue3使用pinia中的actions，需要调用接口的话
    17
  • 2
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
    65
  • 3
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
    30
  • 4
    Vue3中使用provide/inject来避免v-model的循环引用
    38
  • 5
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
    33
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
    129
  • 7
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
    51
  • 8
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
    109
  • 9
    Vue.js 框架下的性能优化策略与实践
    50
  • 10
    Vue.js 3：深入探索组合式API的实践与应用
    41

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • JavaScript入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)