Vue预习课07：vue必会API盘点 (1).pdf

数据相关

Vue.set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

对于没有响应式的数据，进行数据的双向绑定。例如：没有在data中初始化声明的数据，后期添加的数据，就不是响应式的数据

使用方法：Vue.set(target, propertyName/index, value)
vm.$set(target, propertyName/index, value)

  1.  <!-- input中会以字符串的形式，传输到数据中，这里需要加修饰符.number，将来这个值会转换成数字-->
  2. <p><input type="text" v-model.number="price"><button @click="batchPrice">批量更新价格</button></p>
  4. <div>
  5.   <p v-if="courses.length == 0">暂无课程数据</p>
  6.   <ul v-else>
  7.     <li v-for="item in courses" :key="item.name" :class="{active: item.name === selectedCourse}" @click="selectedCourse = item.name">{{item.name}} -- ￥{{item.price}}</li>
  8.   </ul>
  9. </div>
  11. // 将vue绑定到宿主元素中
  12.     // 1.创建vue实例
  13.     const app = new Vue({
  14.       el: '#app',
  15.       data: {
  16.         courses: [{name: '大数据'}, {name: ' web'}]
  17.         price: 0
  18.       },
  19.       created () {
  20.         this.batchPrice();
  21.       },
  22.       methods: {
  23.         // 批量更新价格
  24.         batchPrice () {
  25.           this.courses.forEach(item => {
  26.             // 使用下面的写法价格不会被批量更新，因为price不是响应式的数据
  27.             // item.price = this.price;
  28.                         // 两种方式调用
  29.             this.$set(item, 'price', this.price)
  30.             // Vue.set(item, 'price', this.price)
  31.                         // this.$set是Vue.set的别名
  32.           })
  33.         }
  34.       }
  35.     })

Vue.delete

删除响应式的数据。如果使用delete 属性的方式来删除响应式的数据的话，页面是不会被重新渲染的（即监听不到数据的删除）
有两种使用方式

  1. Vue.delete(target, propertyName/index)
  3. this.$delete(target, propertyName/index)
  5. // vm.$delete是Vue.delete的别名

事件相关的API

vm.$on

vm表示vue的实例，或者是组件的实例
事件监听
这个如果是写在模板中的话，则会写成@名称="函数/表达式"

  1. // 如果写在模板中，则写成
  2. // @test="callback"
  4. // 编程的方式来写
  5. vm.$on('test', (msg) => {
  6.     console.log(msg)
  7. })

事件的派发者和监听者是同一个实例

vm.$emit

派发事件

  1. this.$emit('test', 'param')

vm.$once

事件只监听一次
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除

  1. vm.$once('test', (msg) => {
  2.     console.log(msg)
  3. })

vm.$off

移出事件监听

  1. this.$off() // 移除当前实例所有的监听
  2. this.$off('test') // 移除该事件的所有监听
  3. this.$off('test', callback) // 移除该事件的回调的监听

典型的应用：事件总线的案例

事件的监听者和派发者必须是同一个组件

  1. <!-- 提示 -->
  2.     <!-- 默认插槽 -->
  3.     <message :show="show" @close="show = $event">新增成功</message>
  5.     <!-- 修饰符sync的使用 -->
  6.     <message2 :show2="show2" @update:show2="show2 = $event">新增成功</message2>
  8.         // 派发事件总线
  9.     <button @click="$bus.$emit('clear')">清除全部的提示</button>
  11.         // 设置事件总线，为了在任意组件中可以访问到$bus
  12.         Vue.prototype.$bus = new Vue();
  14.         // 提示框  --- 默认插槽
  15.     Vue.component('message', {
  16.       props: ['show'],
  17.       mounted () {
  18.                 // 监听事件总线
  19.         this.$bus.$on('clear', () => {
  20.           this.$emit('close', false);
  21.         })
  22.       },
  23.       template: `
  24.         <div v-if="show">
  25.           <slot>默认提示</slot>
  26.           <span @click="$emit('close', false)">×</span>
  27.         </div>
  28.       `
  29.     })
  31.     // 提示框  --- 默认插槽 -- 修饰符sync的使用
  32.     Vue.component('message2', {
  33.       props: ['show2'],
  34.       mounted () {
  35.                 // 监听事件总线
  36.         this.$bus.$on('clear', () => {
  37.           this.$emit('update:show2', false);
  38.         })
  39.       },
  40.       template: `
  41.         <div v-if="show2">
  42.           <slot>默认提示</slot>
  43.           <span @click="$emit('update:show2', false)">×</span>
  44.         </div>
  45.       `
  46.     })
  48. const app = new Vue({
  49.       el: '#app',
  50.       data: {
  51.         title: '购物车',
  52.         list: [{name: '大数据'}, {name: ' web'}],
  53.         course: '',
  54.         price: 0,
  55.         show: false,
  56.         show2: false
  57.       },
  58.       created () {
  59.         this.batchPrice();
  60.       },
  61.       methods: {
  62.         addCourse () {
  63.           this.list.push({name: this.course});
  64.           this.course = '';
  65.           this.show = true;
  66.           this.show2 = true;
  67.         }
  68.       }
  69.     })

节点引用的API

组件或元素引用（使用ref和vm.$refs）

例如获取焦点事件

  1. <input type="text" ref="inp" />
  3. mounted () {
  4.     // mounted之后才能访问到ref
  5.     this.$refs.inp.focus()
  6. }

如果ref写在普通的DOM元素上，获取的是DOM元素。ref写在组件（包括子组件）上，获取的是组件的实例

ref放在组件上的实例

  1. <!-- 默认插槽 -->
  2.     <message ref="message">新增成功</message>
  5. // 提示框  --- 默认插槽
  6.     Vue.component('message', {
  7.       data () {
  8.         return {
  9.           show: false
  10.         }
  11.       },
  12.       methods: {
  13.         toggle () {
  14.           this.show = !this.show
  15.         }
  16.       },
  17.       template: `
  18.         <div v-if="show">
  19.           <slot>默认提示</slot>
  20.         </div>
  21.       `
  22.     })
  24. // 将vue绑定到宿主元素中
  25.     // 1.创建vue实例
  26.     const app = new Vue({
  27.       el: '#app',
  28.       data: {
  29.         title: '购物车',
  30.         list: [{name: '大数据'}, {name: ' web'}],
  31.         course: ''
  32.       }
  33.       mounted: {
  34.                 this.$refs.message.toggle();
  35.       }
  36.     })
  • ref是作为渲染结果被创建的，则在初始渲染的时候是不能访问他们的，则至少在mounted中访问（在created和beforecreated中无法访问）
  • $refs不是响应式的，不要试图用他在模板中做数据绑定
  • 当v-for用于元素或组件时，引用信息将时包含DOM节点或数组实例的数组。 ```javascript
    • {{item}}

mounted() { console.log(this.$refs.li) } ```