vue.js之v-on与v-bind

v-on 指令

<div id="app">    <button v-on:click="say">点击</button>    <!--简写:<button @click="say">点击</button>--></div><script>    let vm = new Vue({        el: "#app",        data: {            name: 'Hellow Vue.js'        },        methods: {            // `event` 是原生 DOM 事件              say: function(event) {                // 方法内 `this` 指向 vm                  console.log(this.name + '!');                // 当前标签名                console.log(event.target.tagName);                // 当前元素                console.log(event.currentTarget);            }        }    });</script>

<!-- 方法处理器 --><button v-on:click="doThis"></button><!-- 对象语法 (2.4.0+) --><button v-on="{ mousedown: doThis, mouseup: doThat }"></button><!-- 内联语句 --><button v-on:click="doThat('hello', $event)"></button><!-- 缩写 --><button @click="doThis"></button><!-- 停止冒泡 --><button @click.stop="doThis"></button><!-- 阻止默认行为 --><button @click.prevent="doThis"></button><!-- 阻止默认行为，没有表达式 --><form @submit.prevent></form><!--  串联修饰符 --><button @click.stop.prevent="doThis"></button><!-- 键修饰符，键别名 --><input @keyup.enter="onEnter"><!-- 键修饰符，键代码 --><input @keyup.13="onEnter"><!-- 点击回调只会触发一次 --><button v-on:click.once="doThis"></button>

---

---

v-bind 指令

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

<div id="app">    <a v-bind:href="link">百度</a><br>    <a :href="link">简写</a></div><script>    let vm = new Vue({        el: "#app",        data: {            link: 'https://www.baidu.com/'        }    });</script>

---

class对象语法

<!--方法一--><div id="app">    <div class="static"         v-bind:class="{ 'age-statis': age_statis, 'edu-statis': edu_statis }">    </div></div><script>    let vm = new Vue({        el: "#app",        data: {            age_statis:true,            edu_statis:false        }    });</script>

<!--方法二--><div id="app">    <div class="static" v-bind:class="classObj"></div></div><script>    let vm = new Vue({        el: "#app",        data: {            classObj:{                'age-statis':true,                'edu-statis':false            }                           }    });</script>

以上两种方法结果都一样，如下图：

如果 edu_statis 的值为 true，class 列表将变为 “static age_statis edu_statis”。

---

class数组语法

<div id="app">    <div class="static" v-bind:class="[age,edu]"></div></div><script>    let vm = new Vue({        el: "#app",        data: {            age: 'age-statis',            edu: 'edu-statis'        }    });</script>