vue-模板语法

1 插值语法用例

    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示

        new Vue({
            el:'#root',
            data:{
                name:'jack'
            }
        })
    </script>

但是如果是url再继续用插值语法，会有用吗？

 右键打开发现报错：

 大致意思为：属性内的插值已被删除。改用v-bind或冒号速记

 2指令语法用例

右键打开点击可正常跳转。v-bind:可以简写为: 

总结：

Vue模板有两大类：

        1插值语法

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

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

        2 指令语法

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

                举例：v-bind:href='xxx'可以简写为:href='xxx',xxx是js表达式，且可以直接读取到data中的所有属性

vue中有很多指令，且形势都是：v-xxx的形式