二、模板语法

 

Vue 模板语法有两大类：

　　1：插值语法：

　　　　功能：用于解析标签体内容

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

　　2：指令语法：

　　　　功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.......）

　　　　举例：v-bind:href="xxx" 或 简写为：:href="xxx" ，xxx同样要写成js表达式，并且可以直接读取data中的所有属性

　　　　备注：Vue中有很多的指令，且形式都是v-???

　　

 

复制代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>

    <!-- 引入VUE -->
    <script src="../js/vue.js"></script>

</head>
<body>

    <div id="root">
        <a v-bind:href="url">点我</a>
        <a :href="url">再点我</a>
    </div>

    <script>
        const x = new Vue({
            el:"#root",
            data:{
                url:'http://www.baidu.com'
            }
        });
    </script>

</body>
</html>
复制代码

 

posted @   WaterGe  阅读(28)  评论(0)  编辑  收藏  举报
相关博文：
· 一、初识VUE
· 四、el和data的两种写法
· Vue的模板语法
· 03-Vue核心-模板语法
· Vue模板语法
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛