绑定事件
<!-- 调用方法时传如果没有参数就把事件对象当成参数传入 -->
<button @click='r1'>返回事件对象</button>
<!-- 调用方法时传的是什么参数接的就是什么参数 -->
<button @click='r2(123)'>传入参数</button>
<!-- 调用发法时传入$event参数，该参数就是事件对象 -->
<button @click='r3(123,$event)'>传入参数和事件对象</button>
<!-- 当前事件处理比较简单时，可以写在行内 只能操作Vue管理的数据-->
<button @click='r++'>年龄++</button>
<!-- e.preventDefault(); -->
<!-- 事件修饰符.prevent阻止默认事件 -->
<div class="b1" @contextmenu.prevent='b1'></div>
<!-- 事件修饰符.once用于只绑定一次事件方法 -->
<div class="b3" @click.once='b3'></div>
<!-- 事件修饰符.self只能在自身元素上触发，不能在子元素上触发 -->
<div class="b4" @click.self='b4'>
<div class="c4" @click='c4'></div>
</div>
深度响应式
new Vue({
el: '#app',
data() {
return {
xs: {
name: '张三',
age: 17
},
sz: [11, 22, 33, 44]
// obj对象里面的每一个属性，都会采用object.defineProperty去封装，实现响应式所谓响应式，指的是，数据发生变化后，页面自动更新。
// 给对象后添加的数据不会采用Object.defineProperty去封装，所以，就失去了响应式。
// vue通过$delete方法，删除对象的属性，并触发响应式
// vue通过$set方法，给对象添加响应式属性
}
},
methods: {
add() {
this.$set(this.xs, 'sex', '男')
// this.$set(需要添加属性的对象,需要添加的属性名,需要添加的属性值)
},
del() {
this.$delete(this.xs, 'sex')
// this.$delete(需要删除属性的对象,需要删除的属性名)
},
add1() {
// 在Vue中操作数组，并触发页面更新的只能使用数组的方法
// push,shift,shift,pop,splice,sort,reseolve
// 如果想通过下标操作数组也必须使用$set和$delete
this.$set(this.sz, 4, 66)
// this.$set(需要添加数据的数组,需要添加的位置(下标),需要添加的数据)
},
del1() {
this.$delete(this.sz, 1)
// this.$delete(需要删除数据的数组,需要删除的位置(下标))
}
},
})
v-model详细用法
<body>
<div id='app'>
<div>
<!-- v-model绑定单个文本框 默认绑定的是input事件-->
<!-- 添加.lazy修饰符，失去焦点时触发 把input事件转换成change事件 -->
<!-- .trim修饰符会清除两端空格 -->
<input type="text" v-model:value.lazy.trim='r1'>
<p style='color:red'>{{r1}}</p>
</div>
<!-- .number修饰符会把输入的值转为number -->
<div>
<!-- v-model绑定多行文本框 -->
<textarea v-model:value='r2' name="" id="" cols="30" rows="10"></textarea>
<p style='color:red'>{{r2}}</p>
</div>
<div>
<!-- v-model绑定一组单选框 每个单选框指定相同的属性 -->
<input type="radio" name="sex" value="男" v-model='r3'>
<input type="radio" name="sex" value="女" v-model='r3'>
<p style='color:red'>{{r3}}</p>
</div>
<div>
<!-- v-model绑定单个复选框 绑定一个boolean值 -->
<input type="checkbox" v-model='r4'>
<p style='color:red'>{{r4}}</p>
</div>
<div>
<!-- v-model绑定多个复选框 绑定同一个数组 -->
<input type="checkbox" v-model='r5' value="洗澡">洗澡
<input type="checkbox" v-model='r5' value="吹头发">吹头发
<input type="checkbox" v-model='r5' value="刷牙">刷牙
<input type="checkbox" v-model='r5' value="洗脸">洗脸
<p style='color:red'>{{r5}}</p>
</div>
<!-- 绑定一个属性 -->
<select name="" id="" v-model='r6'>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="西安">西安</option>
<option value="滁州">滁州</option>
</select>
<div><p style='color:red'>{{r6}}</p></div>
<div>
<!-- 绑定一个数组 -->
<select multiple name="" id="" v-model='r7'>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="西安">西安</option>
<option value="滁州">滁州</option>
</select>
<p style='color:red'>{{r7}}</p>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
r1: '张三',
r2: '123144214141245125215',
r3: '男',
r4: false,
r5: [],
r6: '上海',
r7: []
}
},
})
</script>
</body>
