day29-Vue.js

day29-Vue.js

---

一、Vue基础

---

1.Vue

• Vue是用js封装的一个库，为网页内容提供数据的(不需要节点操作)。

---

2.创建Vue对象

• var 变量名 = new Vue({
   el:选择器,
   data:数据对象,
   methods:方法对象
  })
  

---

3.Vue相关指令

• 1)设置标签内容：{{Vue中data属性}}
• 2)设置标签的属性值：v-bind:标签属性 = Vue中data属性
• 3)if语句：v-if='Vue中data属性'
  • 判断Vue中data属性的值是否为true，如果是当前标签就显示，否则就隐藏
• for循环结构：v-for='变量 in Vue中data属性'

---

二、事件绑定

---

1.绑定事件

• v-on:事件名="事件驱动程序"
  • 事件驱动程序：1)可以是操作语句2)Vue中methods中的属性3)Vue中methods中的函数调用表达式
  • el：绑定标签
  • data：通过属性提供数据
  • methods：通过属性提供方法
• 单项绑定：在js中改变Vue对象属性的值，跟它关联的标签的内容也会发生改变

---

2.事件修饰符

• v-on:事件名.事件修饰符="事件驱动程序"
• 常用修饰符：
  • stop：捕获事件，阻止事件传递给父标签
  • prevent：覆盖标签自带事件
  • once：事件只响应一次

---

3.双向绑定

• v-model='Vue中data属性'

---