Vue模板语法

插值语法

1. 用于解析标签体内容
2. 写法： {{xxx}}, xxx是js表达式，且可以直接读取到data中的所有属性，包含计算属性，监听属性

<h4>当前的数字是：{{counter}}</h4>


script>
    new Vue({
        el: '#app',
        data() {
            return {
                counter: 0,
            }
        },
    })
</script>

指令语法

1. 用于解析变迁（包括标签属性，标签体内容，绑定事件...）
2. 语法规范为：v-??? ，当然我们可以采用简写形式，例如v-bind可以简写为:,v-on可以简写为@

<div>
姓名： <input type="text" placeholder="请输入姓名" v-model="name" />
</div>

<!--展开写法： <button v-on:click="add"></button> -->
<button @click="addSex">添加</button>