vue模板语法

vue模板有两大类：

1.插值语法

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

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

2.指令语法

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

写法：v-bind:href=“xxx” 或简写为 :href=“xxx” ,xxx时js表达式，且可以直接读取到data中的全部属性

注意：vue有很多指令，且都是v-xxx，这里用v-bind举例

<!-- 准备一个容器 -->
    <div class="root">
        <h1>插值语法</h1>

        <h3>你好，{{name}}</h3>
        <h3>你好，{{school.name}}</h3>
        <!-- 当使用两个相同名字的可以这样写 -->
        <hr/>

        <h1>指令语法</h1>

        <!-- v-bind能给标签里的任意属性动态绑定值，使属性值成为js表达式，当成js表达式来执行 -->
        <a v-bind:href="url" v-bind:x="hello">点我去csdn学习</a>
        <!-- v-bind可以简写为: -->
        <a :href="url">点我去csdn学习2</a>
    </div>
    <script>
        Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

        new Vue({
            el: '.root',
            data: {
                name: 'jack',
                url: 'https://www.csdn.net/?utm_source=gold_browser_extension',
                hello: '你好啊',
                school: {
                    name: '尚硅谷'
                }
            }
        })
    </script>