1. 概述

老话说的好：干一行，爱一行，踏实工作才是真正快乐的源泉。

言归正传，今天继续聊 VUE3 的话题，今天聊聊 template 语法。

闲话不多说，直接上代码。

2. template 语法

2.1 与数据绑定

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.  
  8.     const app = Vue.createApp({     // 创建一个vue应用实例
  9.         data() {
  10.             return {
  11.                 message : "hello"
  12.             }
  13.         },
  14.  
  15.         template : "<div>{{message}}</div>"     // 插值表达式
  16.  
  17.     });
  18.  
  19.     // vm 就是vue应用的根组件
  20.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

template 中使用 {{message}} ，则 VUE 会使用 data 中的 message 的值去替换 template 中 {{message}} 的值。

但如果 data 中的 message 含有标签，则会直接显示出来，而不是当标签来用。

2.2 数据中含有标签

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.  
  8.     const app = Vue.createApp({     // 创建一个vue应用实例
  9.         data() {
  10.             return {
　　　　　　　　　　message : "<h3>hello</h3>"
  1.             }
  2.         },
  3.  
  4.         template : '<div v-html="message"></div>'
  5.     });
  6.  
  7.     // vm 就是vue应用的根组件
  8.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

template 中使用 v-html="message" 的写法，就可以将 data 中 message 中的标签识别出来

2.3 数据与 title 属性绑定

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.  
  8.     const app = Vue.createApp({     // 创建一个vue应用实例
  9.         data() {
  10.             return {
  11. 　　　　　　　　　　message : "hello",
　　　　　　　　　　　title : "myTitle"
  1.             }
  2.         },
　　　　　　template : '<div v-bind:title="title">{{message}}</div>'
  1.     });
  2.  
  3.     // vm 就是vue应用的根组件
  4.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

使用 v-bind:title="title"  将 data 中的 title 变量 与 template 中的 title 属性绑定

2.4 数据控制 input 元素是否禁止编辑

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.  
  8.     const app = Vue.createApp({     // 创建一个vue应用实例
  9.         data() {
  10.             return {
  11. 　　　　　　　　　　myDisabled : true
  12.             }
  13.         },
  14. 　　　　　template : '<input v-bind:disabled = "myDisabled">'
  15.     });
  16.  
  17.     // vm 就是vue应用的根组件
  18.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

v-bind:disabled = "myDisabled"，数据绑定 disabled 属性

2.5 只取第一次的数据

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.     const app = Vue.createApp({     // 创建一个vue应用实例
  8.         data() {
  9.             return {
  10. 　　　　　　　　　　message : "hello"
  11.             }
  12.         },
  13. 　　　　　template : "<div v-once>{{message}}</div>"
  14.     });
  15.  
  16.     // vm 就是vue应用的根组件
  17.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
  18.     vm.$data.message = "hello world";

使用 v-once 修饰后，message 只取 data 中 message 的第一次赋值，这里显示 hello，而不是 hello world

2.6 数据控制元素是否显示

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.     const app = Vue.createApp({     // 创建一个vue应用实例
  8.         data() {
  9.             return {
  10. 　　　　　　　　　　message : "hello",
  11.                  show : true
  12.             }
  13.         },
  14. 　　　　　template : '<div v-if="show">{{message}}</div>'
  15.     });
  16.  
  17.     // vm 就是vue应用的根组件
  18.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

使用 v-if="show"，绑定 data 中的 show 变量，true 显示，false 不显示。

2.7 为元素添加事件

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.     const app = Vue.createApp({     // 创建一个vue应用实例
  8.         data() {
  9.             return {
  10. 　　　　　　　　　　message : "hello"
  11.  
  12.             }
  13.         },
  14. 　　　　　methods: {
  15.             myClick() {
  16.                 alert('点击我了')
  17.             }
  18.  
  19.         },
  20. 　　　　　template : '<div v-on:click="myClick">{{message}}</div>'
  21.     });
  22.  
  23.     // vm 就是vue应用的根组件
  24.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

使用 v-on:click="myClick"，将 methods 中的 myClick 方法绑定为点击事件。

2.8 为元素添加事件简便写法

template : '<div @click="myClick">{{message}}</div>'

将 v-on:click 改为 @click

2.9 数据与title属性绑定简便写法

template : '<div :title="title">{{message}}</div>'

将 v-bind:title 改为 :title 即可

2.10 动态属性

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.     const app = Vue.createApp({     // 创建一个vue应用实例
  8.         data() {
  9.             return {
  10. 　　　　　　　　　　message : "hello",
  11. 　　　　　　　　　　attribute: "title",
  12. 　　　　　　　　　　title : "myTitle"
  13.  
  14.             }
  15.         },
  16. 　　　　　
  17. 　　　　　template : '<div :[attribute]="title">{{message}}</div>'
  18.     });
  19.  
  20.     // vm 就是vue应用的根组件
  21.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

:[attribute]="title"，属性也与数据关联

2.11 动态事件

  1.     <script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.     const app = Vue.createApp({     // 创建一个vue应用实例
  8.         data() {
  9.             return {
  10. 　　　　　　　　　　message : "hello",
  11.                  event: "click"
  12.  
  13.             }
  14.         },
  15. 　　　　　methods: {
  16.             myClick() {
  17.                 alert('点击我了')
  18.             }
  19.         },
  20. 　　　　　template : '<div @[event]="myClick">{{message}}</div>'
  21.     });
  22.  
  23.     // vm 就是vue应用的根组件
  24.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

@[event]="myClick"，具体绑定哪个事件，由 data 中的 event 数据决定

2.12 阻止form表单submit

  1. 　　<script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.     const app = Vue.createApp({     // 创建一个vue应用实例
  8.         data() {
  9.             return {
  10. 　　　　　　　　　　
  11.  
  12.             }
  13.         },
  14. 　　　　　methods: {
  15.             submitClick(e) {
  16.                 e.preventDefault();
  17.                 alert('点击我了')
  18.             }
  19.         },
  20. 　　　　　template : `
  21.                         <form action="https://www.zhuifengren.cn" @click="submitClick">
  22.                             <button type="submit">提交</button>
  23.                         </form>
  24.                     `
  25.     });
  26.  
  27.     // vm 就是vue应用的根组件
  28.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

在方法中使用 e.preventDefault(); 代码阻止 submit 提交。

2.13 阻止form表单submit 的另一种方式

  1. 　　<script src="../vue.global.js"></script>
  2. </head>
  3. <body>
  4.     <div id="myDiv"></div>
  5. </body>
  6. <script>
  7.     const app = Vue.createApp({     // 创建一个vue应用实例
  8.         data() {
  9.             return {
  10.  
  11.             }
  12.         },
  13. 　　　　　methods: {
  14.            myClick() {
  15.                 alert('点击我了')
  16.             }
  17.         },
  18. 　　　　　template : `
  19.                         <form action="https://www.zhuifengren.cn" @click.prevent="myClick">
  20.                             <button type="submit">提交</button>
  21.                         </form>
  22.                     `
  23.     });
  24.  
  25.     // vm 就是vue应用的根组件
  26.     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

@click.prevent 也可阻止submit

3. 综述

今天聊了一下 VUE3 的 template 语法，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，每天更新Java干货。

4. 个人公众号

追风人聊Java，欢迎大家关注

VUE3 之 template 语法的更多相关文章

  1. Vue3中setup语法糖学习

    目录 1,前言 2,基本语法 2,响应式 3,组件使用 3.1,动态组件 3.2,递归组件 4,自定义指令 5,props 5.1,TypeScript支持 6,emit 6.1,TypeScript ...

  2. C++(VS2015)模板显式特化之template语法深入理解

    首先说下遇到的情况: 这里在vc++6.0上建立了一个自定义模板类,再去覆盖这个类,分别使用部分覆盖,整体覆盖 但在vs2015上去整体覆盖类会报错. 错误如下: 错误原因:个人感觉是新版本的vs更接 ...

  3. 基于SqlSugar的开发框架循序渐进介绍（11）-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

    随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS ...

  4. Django Template语法中 OneToOne、ForeignKey 外键查询

    主表的Models的结构 class A(models.Model): username = models.CharField(max_length=32, verbose_name='用户名称') ...

  5. Vue3 Composition API写烦了，试试新语法糖吧—setup script

    前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...

  6. vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽

    刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本. 在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验 ...

  7. 通过10个实例小练习，快速熟练 Vue3.0 核心新特性

    Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...

  8. vue3 script setup 定稿

    vue script setup 已经官宣定稿.本文主要翻译了来自 0040-script-setup 的内容. 摘要 在单文件组件(SFC)中引入一个新的 <script> 类型 set ...

  9. Vue3 中有哪些值得深究的知识点？

    众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...

随机推荐

  1. 关于新手使用mpb开发代码的一些小知识

    mac 前端端口占用解决   1.查看8080端口,复制进程PID  lsof -i :8080 2.杀死进程 kill -9 「进程PID」   如果你的mac不能使用sudo解决办法   错误提示 ...

  2. [cf1444D]Rectangular Polyline

    由于两种线段要交替出现,有解的必要条件即为$h=v$(以下均记为$n$) 进一步的,再假设两种线段依次对应于向量$(a_{i},0)$和$(0,b_{i})$,根据题意要求向量长度为给定值且和为0,那 ...

  3. [hdu7076]ZYB's kingdom

    不难发现,操作1可以看作如下操作:对于删去$a_{1},a_{2},...,a_{k}$后的每一个连通块(的点集)$V$,令$\forall x\in V,x$的收益加上$s$(其中$s=\sum_{ ...

  4. maven私服-配置本地私服环境之jar包下载环境搭建

    我们前面已经搭建好环境了,就是maven里没有代码,如何导入jar包管理jar包 maven-public仓库组:已有 maven-central代理仓库:从直接代理maven中央仓库,修改为代理阿里 ...

  5. ThinkPad笔记本外放没声音解决办法（不是驱动的原因）

    本人的本子是T480,自从装完Ubuntu系统之后W10系统就没有外放声音了,卸载Ubuntu之后还是没有声音,重装声卡驱动.重装系统之后依然无效. 我的解决办法是升级主板Bois,具体如下: 进入官 ...

  6. 力扣 - 剑指 Offer 10- I. 斐波那契数列

    题目 剑指 Offer 10- I. 斐波那契数列 思路1(递归 / 自顶向下) 这题是很常见的一道入门递归题,可以采用自顶向下的递归方法,比如我们要求第n个位置的值,根据斐波那契数列的定义fib(n ...

  7. C/C++ Qt Tree与Tab组件实现分页菜单

    虽然TreeWidget组件可以实现多节点的增删改查,但多节点操作显然很麻烦,在一般的应用场景中基本上只使用一层结构即可解决大部分开发问题,TreeWidget组件通常可配合TabWidget组件,实 ...

  8. Atcoder Grand Contest 023 E - Inversions（线段树+扫描线）

    洛谷题面传送门 & Atcoder 题面传送门 毒瘤 jxd 作业-- 首先我们不能直接对所有排列计算贡献对吧,这样复杂度肯定吃不消,因此我们考虑对每两个位置 \(x,y(x<y)\), ...

  9. O(1)判断两点之间是否有边

    O(1)判断两点之间是否有边 问题描述 给定一张 \(n\) 个点,\(m\) 条边的有向图. 多次询问,要求每次 \(\mathcal{O}(1)\) 判断两点之间是否有边(你可以忽略输入.输出等问 ...

  10. R包customLayout比例拼图

    一个简单的需求: 拼接两个图,一行两列,但不要一样大,让主图占的比例大些(如2/3),另一个图小一些(如1/3) 如上,我想突出曼哈顿图. R相关的拼图函数及包: 基础函数如par(mar =c(3, ...