Vue学习记录 模板语法

2022.07.16 DAY2

1. 模板语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8" />
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script typr="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            Vue模板语法有2大类：
            1. 插值语法
                功能：用于解析标签体内容。
                写法：{{}}. xxx是js表达式，且可以直接读取到data中的所有属性。
            2. 指令语法
                功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）。
                举例：v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写成js表达式，
                    且可以直接读取到data中的所有属性。
                备注：Vue中有很多指令，且形式都是: v-????,此处我们只是拿到v-bind举个例子。
        -->

        <!-- 准备好一个容器 -->
        <div id="root">
            <h1>插值语法</h1>
            <h3>你好,{{name}}</h3>
            <hr/>
            <h1>指令语法</h1>
            <!-- 加 V-bind: url就当表达式使用 -->
            <a v-bind:href="url1">点我去B站学习[doge]</a>
            <hr/>
            <!-- V-bind: 简写成 : -->
            <a :href="url2">点我去优快云学习[doge]</a>
            <hr/>
            <a :href="school.url">点我去查看{{school.name}}官网</a> 
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 Vue 在启动时生成生产提示。

        new Vue({
            el:'#root',
            data:{
                name:'XX',
                url1:'https://www.bilibili.com/',
                url2:'https://blog.youkuaiyun.com/Code_peasant?spm=1011.2480.3001.5343',
                // 多级结构
                school:{
                    name:'清华大学',
                    url:'https://www.tsinghua.edu.cn/'
                }
            }
        })

    </script>
</html>