VUE中模板语法

VUE中模板语法，类似node中的EJS，让页面动态

包括：
1.大括号表达式，指令V-
（可以自己定义全局指令和局部指令）
2.双大括号表达式，必须有结果，内容

data(){
return{
num:‘like like’
}
}

    <div>{{num}}</div>

3.强制数据绑定
标签与标签用{{}}，
但a标签不能直接使用还是用{{}}绑定，要用v-bind强制数据绑定 v-bind等同于在a标签加上 ：

4.绑定事件监听v-on:click 等价于@click

5.input 建议使用v-model，实现数据的双向绑定

<template>
    <div>
        <h3>双括号</h3>
        <div>{{num}}</div>
        <div>{{num.toUpperCase()}}</div>

        <h3>强制数据绑定</h3>
        //这里第一个链接跳转不到，第二三个可以跳转。  v-bind:  =  :
        <a href="site">学习</a>
        <br>
        <a v-bind:href="site">学习2</a>
        <br>
        <a :href="site">学习3</a>

        <br>
        <h3>绑定事件监听</h3>
        <p><button v-on:click="study()">学习</button></p>
        <p><button @click="study()">学习</button></p>
        <p><button @click="study('hello')">学习</button></p>

    </div>
</template>

<script>
    export default {
        name: "Template",
        data(){
            return{
                num:'like like',
                site:'http://www.baidu.com'
            }
        },
        methods:{
            study(name){
                alert(`${name},aaaa`);
            }
        }
    }
</script>

<style scoped>

</style>