data:{
count:“1”
},
methods:{
//定义changeageCount与参数传递
changeageCount(count,name){
this.count = count;
alert(name);
}
}
});
总结:
1.在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数
4.5 Vue事件案例
要求
1、页面中有两个按钮 一个-,一个+
2、一个随着按钮的点击h2标签的值会变化
3、
按钮-,按了减1(要求不能小于1),否则弹出"不能再少了";
按钮+,按了加1(上限为10),到达上线弹出"不能再多了"
<input type=“button” value=“-” @click=“sub”>
{{count}}
<input type=“button” value=“+” @click=“add”>
5.1 v-show
v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅,但有更高的初始渲染开销。
v-show
:用来控制页面中某个标签元素是否展示 底层使用控制是 display 属性
阿昌学vue
阿昌学vue,这是vue中定义变量true!
<input type=“button” value=“展示标签” @click=“showmsg”>
阿昌gogogoog
<input type=“button” @click=“changeageAge” value=“通过修改age值控制标签展示”>
总结
1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
2.在v-show中可以通过boolean表达式控制标签的展示和隐藏
5.2 v-if
v-if判断是否加载,可以减轻服务器的压力
v-if
: 用来控制页面元素是否展示 底层控制是DOM元素 操作DOM
百知教育
百知教育欢迎你的加入
5.3 v-bind
v-bind
: 用来绑定标签的属性从而通过vue动态修改标签的属性
【v-bind:要绑定的属性=“引用data里面的变量”】,就可以通过vue动态修改标签属性
<input type=“button” value=“动态控制标签加入样式” @click=“addCss”>
<input type=“button” value=“改变图片” @click=“changeageSrc”>
5.4 v-bind 简化写法
vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如
v-bind:属性名
简化之后:属性名
<input type=“button” value=“动态控制标签加入样式” @click=“addCss”>
<input type=“button” value=“改变图片” @click=“changeageSrc”>
v-for
: 作用就是用来对对象进行【遍历】的(数组也是对象的一种)
{{user.name}} , {{user.age}}
{{index}} : {{key}} : {{value}}
- {{index}} {{a}}
{{index}}={{user.id}}={{user.name}}===={{user.age}}
总结
1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key
v-model
: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制{{message}}
<input type=“button” value=“改变Data值” @click=“changeValue”>
总结
1.使用v-model指令可以实现【数据的双向绑定 】
2.所谓双向绑定
表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定
MVVM架构 双向绑定机制
Model: 数据 Vue实例中绑定数据
VM: ViewModel 监听器
View: 页面 页面展示的数据
<input type=“button” value=“添加到记事本” @click=“add”>
{{index+1}}.{{item}}<a href=“javascript:;” @click=“delRow(index)” >删除
总数量:共 {{lists.length}} 记录
<input type=“button” v-show=“this.lists.length != 0” value=“删除所有” @click=“delAll”>
修饰符可以串联
修饰符
: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制1.常用的事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
8.1 stop事件修饰符
用来阻止事件冒泡
01-Vue事件修饰符使用 <input type=“button” value=“按钮” @click.stop=“btnClick”>
<input type=“button” value=“按钮” @click.stop=“btnClick”>