Day194，原理+实战讲解

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.【v-show】【 v-if】 【v-bind】

---

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”>

---

6.【v-for】的使用

---

v-for: 作用就是用来对对象进行【遍历】的(数组也是对象的一种)

{{user.name}} , {{user.age}}

{{index}} : {{key}} : {{value}}

• {{index}} {{a}}

• {{index}}={{user.id}}={{user.name}}===={{user.age}}

  

  总结

  1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

  ---

  7 .v-model 双向绑定

  ---

  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”>

  

  ---

  8. 事件修饰符

  ---

  修饰符可以串联

  修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

  1.常用的事件修饰符

  .stop

  .prevent

  .capture

  .self

  .once

  .passive

  8.1 stop事件修饰符

  用来阻止事件冒泡

  <input type=“button” value=“按钮” @click.stop=“btnClick”>

  <input type=“button” value=“按钮” @click.stop=“btnClick”>