Vue的模板语法

最新推荐文章于 2025-03-14 18:56:56 发布

原创最新推荐文章于 2025-03-14 18:56:56 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了 Vue 模板语法中的指令语法，特别是 v-bind 指令的使用。通过 v-bind，我们可以将 JavaScript 表达式与 HTML 标签属性绑定，使得属性值动态化。示例中展示了如何使用 v-bind 指令设置超链接的 href 属性，并简写为 :href 的形式。同时，文中提供了完整的 Vue 示例代码，包括插值语法和 v-bind 指令的实践。

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

02 模板语法之指令语法 v-bind

已经学过的：插值语法，即{{xxx}}将相应的数据插入容器。

插值语法一般用于标签体中

要学的：指令语法。v-bind：指令的使用可以简写为:

指令语法一般是用于标签属性中

使用了v-bind:后会将引号里的url当做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>模板语法</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <!-- 使用了v-bind:后会将引号里的url当做js表达式执行 -->
        <a v-bind:href="url">点我去哔哩哔哩学习</a>
        <br/>
        <!-- v-bind: 可以简写为:-->
        <a :href="url">{{msg}}</a>
    </div>

    <script type="text/javascript">
        /* 开发环境提示关闭 */
        Vue.config.productionTip = false

        /* new一个Vue */
        new Vue({
            //容器
            /* el用于指定当前实例为那个容器服务，值通常为css选择器字符串 */
            el: '#root',
            //数据,提供给el对应的容器去使用
            data: {
                 name:'jack',
                 url:'https://www.bilibili.com/',
                 msg:'点我去哔哩哔哩娱乐'
            }
        })
    </script>
</body>
</html>