1. 概述

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

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

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

2. template 语法

2.1 与数据绑定

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

                message : "hello"

            }

        },

        template : "<div>{{message}}</div>"     // 插值表达式

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

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

2.2 数据中含有标签

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {
　　　　　　　　　　message : "<h3>hello</h3>"
            }

        },

        template : '<div v-html="message"></div>'

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

2.3 数据与 title 属性绑定

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　message : "hello",
　　　　　　　　　　　title : "myTitle"
            }

        },
　　　　　　template : '<div v-bind:title="title">{{message}}</div>'
    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

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

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　myDisabled : true

            }

        },

　　　　　template : '<input v-bind:disabled = "myDisabled">'

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

2.5 只取第一次的数据

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　message : "hello"

            }

        },

　　　　　template : "<div v-once>{{message}}</div>"

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

    vm.$data.message = "hello world";

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

2.6 数据控制元素是否显示

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　message : "hello",

                 show : true

            }

        },

　　　　　template : '<div v-if="show">{{message}}</div>'

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

2.7 为元素添加事件

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　message : "hello"

            }

        },

　　　　　methods: {

            myClick() {

                alert('点击我了')

            }

        },

　　　　　template : '<div v-on:click="myClick">{{message}}</div>'

    });

    // vm 就是vue应用的根组件

    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 动态属性

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　message : "hello",

　　　　　　　　　　attribute: "title",

　　　　　　　　　　title : "myTitle"

            }

        },

　　　　　

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

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

2.11 动态事件

    <script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　message : "hello",

                 event: "click"

            }

        },

　　　　　methods: {

            myClick() {

                alert('点击我了')

            }

        },

　　　　　template : '<div @[event]="myClick">{{message}}</div>'

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

2.12 阻止form表单submit

　　<script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

　　　　　　　　　　

            }

        },

　　　　　methods: {

            submitClick(e) {

                e.preventDefault();

                alert('点击我了')

            }

        },

　　　　　template : `

                        <form action="https://www.zhuifengren.cn" @click="submitClick">

                            <button type="submit">提交</button>

                        </form>

                    `

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

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

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

　　<script src="../vue.global.js"></script>

</head>

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

            }

        },

　　　　　methods: {

           myClick() {

                alert('点击我了')

            }

        },

　　　　　template : `

                        <form action="https://www.zhuifengren.cn" @click.prevent="myClick">

                            <button type="submit">提交</button>

                        </form>

                    `

    });

    // vm 就是vue应用的根组件

    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. 记一次 IIS 站点配置文件备份和还原，物理路径文件批量备份

    前言 上一篇文章实现了数据库的批量备份和还原,当然部署在服务器中的IIS站点备份也是一个十分繁琐的事,三四个数量不多的还好,像有一些服务器用了许久,承载几十个站点甚至更多,一个一个备份,再一个一个还原 ...

  2. [luogu4484]最长上升子序列

    标算是状压dp+打表,前者时间复杂度为$o(n^{2}2^{n})$,并通过打表做到$o(1)$ 参考loj2265中关于杨表的相关知识,不难发现答案即$\frac{\sum_{a\vdash n}a ...

  3. SpringCloud升级之路2020.0.x版-41. SpringCloudGateway 基本流程讲解(3)

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 我们继续分析上一节提到的 WebHandler.加入 Spring Cloud Sleut ...

  4. selenium定位元素方法汇总

    #打开网页前三步 from selenium import webdriver driver=webidriver.Chrome() driver.get("https://www.baid ...

  5. Codeforces 1466G - Song of the Sirens（哈希）

    Codeforces 题面传送门 & 洛谷题面传送门 事实证明,有的难度评分不算很高.涉及的知识点不算很难的题目也能出得非常神仙 首先考虑如何暴力求答案.注意到一个文本串 \(T\) 在 \( ...

  6. Kubernetes：Pod 升级、回滚

    本篇主要讨论如何实现滚动更新和回滚,任意更换版本并且回滚以前的版本(版本更新),而下一章会讨论到 Pod 缩放,根据机器资源自动拓展和收缩应用(自动扩容实例). 本文为作者的 Kubernetes 系 ...

  7. R shinydashboard——3.外观

    目录 1.皮肤 2.注销面板 3.CSS 4. 标题延长 5.侧边栏宽度 6.图标 7.状态和颜色 1.皮肤 shinydashboard有很多颜色主题和外观的设置.默认为蓝色,可指定黑丝.紫色.绿色 ...

  8. 到底什么是自动化优先思维?与RPA有什么关系?

    基于RPA的自动化优先,正在成为广大组织的主流管理思维 到底什么是自动化优先思维?与RPA有什么关系? 如何用RPA简单快速的打造一个自动化优先的组织? 文/王吉伟 在IT运维项目中,组织经常会遇到先 ...

  9. Go语言核心36讲（Go语言实战与应用二十三）--学习笔记

    45 | 使用os包中的API (下) 我们在上一篇文章中.从"os.File类型都实现了哪些io包中的接口"这一问题出发,介绍了一系列的相关内容.今天我们继续围绕这一知识点进行扩 ...

  10. Flink(四)【IDEA执行查看Web UI】

    1.导入依赖 <!-- flink Web UI --> <dependency> <groupId>org.apache.flink</groupId> ...