2.VUE模板语法

136 阅读1分钟

Vue模板语法:

容器里的代码被称为“Vue模板”

“模板语法”包括两大类“插值语法”和“指令语法”

1.插值语法:

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

写法:{{xxx}}, xxx是js表达式(可以得到值的js代码),且可以直接读取到“data”中的所有属性

2.指令语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)

举例:v-bind:href="xxx" 或简写为 :href="xx", xxx同样要写js表达式,且可以直接读取到data中所有属性

备注:Vue中有很多的指令,且形式都是: v-????, 此处用v-bind举例

<body>
    <!-- 准备好一个容器-->
    <div id = "root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <h1>指令语法</h1>
        <a v-bind:href = "url" x = "hello">链接1</a>
        <a :href = "ur1" :x = "hello">链接2</a>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'jack',
            url: 'www.HeiDu.com',
            hello: '你好'
        }
    })
</script>