VUE3 之 template 语法

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

posted @ 2021-12-15 22:23 追风人聊Java 阅读(3443) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· Blazor Hybrid适配到HarmonyOS系统
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· 解决跨域问题的这6种方案，真香！
· 分享4款.NET开源、免费、实用的商城系统
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库

公告

昵称：追风人聊Java
园龄： 3年6个月
粉丝： 32
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

追风人聊Java

VUE3 之 template 语法

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论