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

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

2022-09-26 138
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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
蜡笔小心_
目录
相关文章
刘大猫.
|
2天前
|
缓存 JavaScript 前端开发
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
刘大猫.
11 3
chnjames
|
4天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南：in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令，但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似，但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异，你将能够编写更加高效、简洁的 Vue.js 代码，灵活应对各种数据结构的遍历需求。
chnjames
40 6
mao29955
|
2天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项，它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别，可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中，要根据具体情况灵活选择使用，以满足不同的需求。
mao29955
5 2
大树营养快线
|
2天前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具，使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令，可以提高开发效率，增强应用的功能和用户体验。
大树营养快线
7 1
dufadayang
|
3天前
|
JavaScript
vue生命周期钩子函数的执行顺序是怎样的？
【10月更文挑战第14天】
dufadayang
8 2
chnjames
|
4天前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表，支持用户动态添加设备部位和任务，并提供相应的表单验证规则。
chnjames
23 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
刘大猫.
|
5天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习：求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习：求和案例_纯vue版代码
刘大猫.
11 1
刘大猫.
|
23小时前
|
JavaScript 前端开发 Java
vue2知识点：Vue封装的过度与动画
vue2知识点：Vue封装的过度与动画
刘大猫.
7 0
大树营养快线
|
2天前
|
JavaScript UED
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令，可以为 Vue 应用带来更多的灵活性和扩展性，提高开发效率和用户体验。
大树营养快线
7 0
游客zi3qmblbcdexu
|
3天前
|
JavaScript 前端开发 容器
vue的哈希模式下乾坤微应用的使用
vue的哈希模式下乾坤微应用的使用
游客zi3qmblbcdexu
6 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    使用vue-demi来开发一个vue2和vue3组件
  • 3
    OSS对象存储后端实现+Vue实现图片上传【基于若依管理系统开发】
  • 4
    docker nginx 部署 vue项目
  • 5
    vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
  • 6
    浅尝Vue最新状态管理工具Pinia(实战使用Pinia管理登录状态)
  • 7
    VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
  • 8
    vue2 el-select 改造成下拉树，支持数据回显
  • 9
    解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
  • 10
    手撸vue3核心源码——响应式原理(ref)
  • 1
    搞懂Vue一篇文章就够了
    37
  • 2
    Vue3的 组件事件
    52
  • 3
    Vue 异步组件
    31
  • 4
    Vue自定义指令的三个方法
    31
  • 5
    vue3组件之间传值通讯
    48
  • 6
    vue引入vuex
    53
  • 7
    vue怎么自定义底部导航
    58
  • 8
    vue3引入element-plus完整步骤
    646
  • 9
    vue3引入vant完整步骤
    410
  • 10
    vue3实现文字垂直滚动
    176

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片