vue 模板语法学习笔记

在vue当中，模板语法起到了及其重要的作用。下面我来简单介绍两种最为普遍的模板语法。

1.模板容器

            <h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr />
            <h1>指令语法</h1>
            <!-- v-bind  ====> 可以简写为 : -->
            <a v-bind:href="url">点我去尚硅谷1</a>
            <a v-bind:href="url">点我去尚硅谷1</a>
        </div>

2. 状态值

Vue.config.productionTip = false; //阻止 Vue 在启动时生成生产提示  全局控制

            el: "#root", //el用于指定当前Vue 实例为那个容器服务，值通常为css选择器
            data: {
                name: "尚硅谷",
                url: "https://www.baidu.com/",
            },
        });

总结

1.插值语法：

1. 功能：用于解析标签内容
2. 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性

2. 指令语法

1. 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。。）
2. 举例：v-bind：href = "xxx" 或 简写为 :href = "xxx", xxx同样要写js表达式且可以直接读取到data中所有属性
3. 备注：Vue中有很多的指令，且形式都是：v-????, 此处我只是拿v-bind举例 -->