1.Vue的模板语法（插值语法，指令语法）

最新推荐文章于 2025-07-31 16:12:34 发布

爱打羽毛球的程序员

最新推荐文章于 2025-07-31 16:12:34 发布

阅读量322

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端知识文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46637351/article/details/125649089

Web前端知识专栏收录该内容

5 篇文章

订阅专栏

博客介绍了Vue模板语法的两大类。插值语法用于解析标签体内容，写法为{{xxx}}，xxx是可读取data属性的js表达式；指令语法用于解析标签属性等，如v-bind:href或简写:href，xxx也是js表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue模板语法有两大类:

1.插值语法:

功能:用于解析标签体的内容

写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

2.指令语法:

功能:用于解析标签属性(包括:标签属性,标签体内容,绑定事件)

举例:v-bind:href = "xxx" or 简写为 :href = "xxx",xxx同样为js表达式


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>

<body>
   
    <div id="root">
        <h1>插值语法</h1>
        <h3>Hello,{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">百度</a>
        <a :href="url">{{school.name}}</a>
        <!--v-bind:可以简写成 : -->
    </div>
    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                name: 'Jack',
                url: 'http://www.baidu.com',
                school: {
                    name: 'henu'
                }
            }

        })

    </script>
</body>

</html>

效果图如下：