二、模板语法

 

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 @ 2022-07-21 21:07  WaterGe  阅读(25)  评论(0)  编辑  收藏  举报