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

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

2022-09-26 141
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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
关键词：
vue3 vue VUE.js
vue3语法VUE.js
语法VUE.js
vue模板语法VUE.js
模板语法VUE.js
蜡笔小心_
目录
相关文章
我是快乐的嘟嘟
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
75 26
html的七十二变
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
22 7
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
17 3
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
14 2
cheunglydia
|
JavaScript UED 前端开发
Vue1.0常用语法
var vm = new Vue({ 　　el: "选择器", 挂载到页面的那个元素里，即确定vue的作用范围 外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作 　　a: '', //自定义属性 外部可通过vm.$options访问 　　data: {
cheunglydia
3568 0
html的七十二变
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
27 8
html的七十二变
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
25 5
html的七十二变
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
26 5
html的七十二变
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
20 4
游客zi3qmblbcdexu
|
14天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
36 6

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 5
    自制简单的range（Vue）
  • 6
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 7
    vite原理之解析.vue文件
  • 8
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 9
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 10
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 1
    vue(1)，小白看完都会了
    43
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    147
  • 3
    Vue中避免滥用this去读取data中数据
    43
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    120
  • 5
    vue中使用pinia及持久化
    60
  • 6
    Vue3与Vue2：对比分析与迁移指南
    394
  • 7
    双向数据绑定：Vue.js的魔法背后
    56
  • 8
    Vue class和style绑定：动态美化你的组件
    82
  • 9
    Vue 监听器：让你的应用实时响应变化
    199
  • 10
    vue3封装面包屑
    146

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问