007_模板语法 - vuejs从入门到精通学习笔记

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            Vue模板语法有2大类：
                1.插值语法：
                        功能：用于解析 标签体(起始标签和结束标签中间所夹着的内容) 内容。
                        写法：{{xxx}}，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>
            <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
            <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>

            <br/>
            <!-- //2025-10-18
                v- 是 Vue指令的前缀. 例如: v-if v-model 
                v-bind 后面的字符串内容会被作为 表达式 来执行。 
                v-bind 可以直接缩写为 :
            -->
            <a v-bind:href="eurl">我是一个链接</a>
        </div>
    </body>

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

        new Vue({
            el:'#root',
            data:{
                name:'jack',

                //为了规避相同属性名带来的冲突，可以将冲突的其中一个封装为一个对象作为data的一个属性使用。
                school:{
                    name:'尚硅谷',
                    url:'http://www.atguigu.com',
                },

                //2025-10-18
                eurl:'https://www.softool.cn'
            }
        })
    </script>
</html>