VUE3 之 template 语法

最新推荐文章于 2024-07-31 18:30:30 发布
最新推荐文章于 2024-07-31 18:30:30 发布
阅读量6.8k 收藏 6
点赞数
分类专栏： 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011181989/article/details/121958489
版权

目录

1. 概述

2. template 语法

3. 综述

4. 个人公众号

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，欢迎大家关注

追风人聊Java
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3学习之路-＜template＞标签
Celester_best的博客
11-03 5339
标签在vue2和vue3中的使用
vue3的template
过客如期的博客
09-02 3017
没有顶层元素，在引用这个组件时绑定了自定义事件，会出现警告。大致意思就是由于无根节点，无法自动继承。1.需要注意的是，在单文件组件中，如果。模块也是一样，可以不需要顶层元素，
Vue3的template与Vue3编译时的静态提升
m0_64062932的博客
06-25 837
在vue3中，template中的类似于html的语言最终会被编译为我们所熟知的虚拟dom，然后这个新的虚拟dom就会与旧的虚拟dom相比较，通过里面的算法，最终操作使用最小变化树的思想对真实dom进行操作。第一步，Vue3会对template里面的代码进行语法树的转换，会对里面的代码进行单词拆分，词法分析，最终会生成一颗原始的抽象语法树。这是第二步，里面的大致的过程就是将这颗原始的抽象语法树转换为一颗可以被处理的抽象语法树，并且会在里面做一些对抽象语法树的转化。
vue3语法模板template
Linlietao0587的博客
12-16 809
vue3语法模板template。
vue3 template
淡淡的芦苇的博客
11-19 3418
template 使用情况 1. 根据某个状态渲染多个模板的 v-if v-else 2. 插槽的场景 插槽： 子组件写法：name="title" <slot name="title" v-bind="{ row: typeItem, index: index }"> <div class="menuItemBox">{{ typeItem.name }}</div> </slot> 父组件调用写法：<template #tit
vue3-template:这是版本3的Vue模板
04-22
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持 由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码： 如果使用手掌 运行Volar: Switch TS Plug
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在Vue3中，开发人员可以利用TypeScript(简称ts)的强类型特性和新的`setup`语法糖来构建更加安全和高效的应用。本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解...
vite-vue3-template
03-25
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC...
vue-admin-template-4.4.0.zip
03-01
3. **ECMAScript**：ECMAScript（通常简称ES）是JavaScript的标准化规范，它的新特性如箭头函数、类、Promise、async/await等在Vue.js中被广泛使用，增强了代码的可读性和简洁性。 4. **Vue-admin-template**：这个...
vue 模板解析成html,vue分析之template模板解析AST
weixin_36481760的博客
06-19 3150
通过查看vue源码，可以知道Vue源码中使用了虚拟DOM(Virtual Dom)，虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点) 。本文通过对Vue源码中的AST转化部分进行简单提取，返回静态的AST结构(不考虑兼容性及属性的具体解析)。并最终根据一个实例的template转化为最终的A...
Vue 3第三章：模板语法及指令介绍
to_the_Future的博客
02-26 2840
vue3模板语法及常用指令使用场景的介绍
jquery template 语法总结
10-16
自己整理的jquery template语法，很实用，对初学者有帮助，例子官网下载即可
【vue3】template标签的一些理解（提了一嘴component标签）
最新发布
weixin_57208584的博客
07-31 627
所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在引用组件的时候，在该组件的子元素里面定制template内容，导入到指定slot插槽内。它属于占位符，其本身不作为节点挂入DOM树，但是可以将包裹着的子元素展示，形成一虚拟DOM。利用这一特点，我们平常写vue3的时候可以用它来作为父元素，从而提升渲染性能，比如在写。，并结合响应式的数据和状态，以最优化最少的次数操作、更新真实DOM。这时候，使用template包裹，就可以实现只重复渲染子元素。
Vue3 中的模板语法
weixin_62897746的博客
03-05 3288
我们可以把 Vue.js 的模板语法，直接理解为 HTML 语法的一种扩展，它所有的模板节点声明、属性设置和事件注册等都是按照 HTML 的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析”。 Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上
VUE3(template使用)
影子
08-17 5276
模板template就是定义vue时指定页面的结构构成 默认使用mount('选择器')指定挂在元素的内容来构建页面模板 可以使用template独立的来定义页面模板，此时挂在元素的内容将被忽略 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"><...
「Vue3系列」Vue3 模板语法
日常笔记/总结/系列知识梳理
03-03 1136
在 Vue 3 中，表达式是模板语法中的一个重要概念，它允许你在模板中嵌入 JavaScript 代码来动态地渲染内容、计算值或执行方法。在 Vue 3 中，修饰符（Modifiers）是与指令一同使用的特殊标记，用于修改指令的默认行为。可以在模板中插入 JavaScript 表达式，表达式的值会被计算并插入到 HTML 中。，它用于在监听滚动或触摸事件时优化性能，因为它告诉浏览器你不想阻止这些事件的默认行为。来包裹表达式，这些表达式会在 Vue 实例的数据或方法发生变化时自动更新。
Vue3 语法
weixin_45137240的博客
06-05 1349
Vue3 中，和 Vue2 一样，也是通过自定义事件来实现子组件给父组件传值。< template > < button @ click = "toFather" > 按钮 < / button > < / template > < script setup lang = "ts" > const emit = defineEmits([ 'getData' ]) const toFather =() => {// 调用自定义事件，并传值 emit('getData' , 100);
vue3模板引用介绍
qq_43628158的博客
03-20 631
vue3模板引用介绍，vue3中直接访问底层DOM元素的方法；vue3中组件使用ref的介绍
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追风人聊Java

您的鼓励将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值