Vue学习：第二章模板语法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44481301/article/details/87868894

本文详细介绍了Vue.js中使用的模板语法，包括数据绑定、指令、动态参数和事件监听等核心功能。通过具体示例，展示了如何使用Mustache语法进行文本插值，如何利用v-once、v-html和v-bind指令操作DOM元素，以及如何通过v-on指令响应用户事件。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
         <!--数据绑定：使用双括号Mustache语法进行文本插值-->
         <!--指令 (Directives) 是带有 v- 前缀的特殊特性-->
         <!--使用v-once指令，数据不再更新，其子元素的数据也不再更新-->
        <span v-once>{{a}}
            <span>{{c + 1}}</span>
        </span>
         <span>{{a}}</span>

         <!--使用v-html指令，将数据输出成html文本，容易导致 XSS 攻击。
         请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。-->
         <span v-html="msg"></span>

         <!--使用v-bind指令，绑定HTML特性-->
         <button v-bind:disabled="true">Button</button>
         <button :disabled="true">Button</button>

         <!--v-on 指令，它用于监听 DOM 事件-->
         <button v-on:click="clickButton">click</button>
         <button @click="clickButton">click</button>

         <!--用方括号括起的变量表示指令动态参数-->
         <button :[attr]="true">click</button>
    </div>
    <script>
        let data = {
           a: 3,
           c: 0,
           obj: {
               name: 'Lily',
           },
           msg: '<h1>hello</h1>',
           attr: 'disabled',
        };
        let vm = new Vue({  //创建Vue实例
            el: '#app',
            data,
            methods: {
                clickButton: function () {
                     alert('click button');
                }
            }
        });
        vm.a = 5;
        vm.c = 9;
    </script>
</body>
</html>