1、 给标签属性赋Vue变量v-bind
在vue中，v-bind指令可以动态的给标签的属性设置值，
语法：v-bind:属性名="vue变量"简写：:属性名="vue变量"
//完整写法<a v-bind:href="url">我是a标签</a>//简写<img :src="imgSrc"><script>export default {data(){return {url:"",imgSrc:"/czgw/images/logo2.png"}}}</script>
2、给元素绑定事件 v-on
语法
v-on:事件名=“methods中的函数”v-on:事件名=“methods中的函数(实参)”
简写: @事件名=“methods中的函数”
<!-- vue指令: v-on事件绑定--><p>你要买商品的数量: {{count}}</p><button v-on:click="count = count + 1">增加1个</button><button v-on:click="addFn">增加1个</button><button v-on:click="addCountFn(5)">一次加5件</button><button @click="subFn">减少</button><script>export default {// ...其他省略methods: {addFn(){// this代表export default后面的组件对象(下属有data里return出来的属性)this.count++},addCountFn(num){this.count += num},subFn(){this.count--}}}</script>
3、vue事件处理函数中, 拿到事件对象
语法:
无传参, 通过形参直接接收传参, 通过$event指代事件对象传给事件处理函数
<template><div>//不传参写法<a @click="one" href="">阻止百度</a><hr>//传参写法<a @click="two(10, $event)" href="">阻止去百度</a></div></template><script>export default {methods: {one(e){e.preventDefault()},two(num, e){e.preventDefault()}}}</script>
4、v-on事件修饰符
语法:
@事件名.修饰符=“methods里函数” prevent阻止默认事件stop阻止事件冒泡once事件只触发一次capture使用事件的捕获模式,修饰符加在父盒子,先捕获再冒泡self 只有e.target是当前操作的元素时才触发事件passive 事件的默认行为立即执行，不必等待事件回调执行完毕，一般用于移动端,能够提升移动端性能
//CV自Vue.js官网<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。
不要把
.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为
Vue.js：vue指令（给标签属性赋Vue变量v-bind 绑定事件 v-on）vue事件处理函数中 拿到事件对象 6个事件修饰符
