Apakah API yang biasa digunakan dalam Vue?-Soal Jawab bahagian hadapan-php.cn

API Vue termasuk: 1. nextTick; 3. “$forceUpdate”; el"; 9. "$data"; 10. "$props", dsb.

Apakah API yang biasa digunakan dalam Vue?

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

nextTick

Fungsi: Tambahkan panggilan balik tertunda selepas kitaran kemas kini Dom seterusnya tamat Selepas mengubah suai data, anda boleh mendapatkan Dom yang dikemas kini.
Penggunaan:

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )
// 用法2
// 作为一个 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

Salin selepas log masuk

Penerangan:

panggilan balik: fungsi panggil balik tertunda
konteks: Objek pilihan

ps: Baharu sejak 2.1.0: Jika tiada panggilan balik disediakan dan dalam persekitaran yang menyokong Promise, Promise dikembalikan. Sila ambil perhatian bahawa Vue tidak disertakan dengan polyfill Promise, jadi jika penyemak imbas sasaran anda tidak menyokong Promise secara asli (IE: mengapa anda melihat saya), anda perlu menyediakan polyfill itu sendiri.

Sambungan: Berkenaan mekanisme pelaksanaan dan senario penggunaan nextTick, kita juga mesti menguasai Permintaan serupaAnimationFrame() dan process.nextTick() yang pertama ialah pendengar penyemak imbas sendiri (sebelum lukisan semula seterusnya). ), yang terakhir dilaksanakan pada titik masa pengundian acara seterusnya dalam persekitaran nod.

mixin

Fungsi: Daftar mixin yang mempengaruhi setiap kejadian Vue yang dibuat selepas pendaftaran. Pengarang pemalam boleh menggunakan campuran untuk menyuntik gelagat tersuai ke dalam komponen.
Penggunaan:

// 为自定义的选项 &#39;myOption&#39; 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: &#39;hello!&#39;
})
// => "hello!"

Salin selepas log masuk

Penerangan:

objek: atribut atau kaedah vm

ps: Sila gunakan campuran global dengan berhati-hati kerana ia akan menjejaskan setiap contoh Vue yang dibuat secara individu (termasuk komponen pihak ketiga). Dalam kebanyakan kes, ini hanya boleh digunakan pada pilihan tersuai, seperti contoh di atas. Adalah disyorkan untuk menerbitkannya sebagai pemalam untuk mengelakkan campuran aplikasi berulang.

$forceUpdate

Fungsi: Paksa contoh Vue untuk dipaparkan semula.
Penggunaan:

vm.$forceUpdate()

Salin selepas log masuk

Penerangan: Ambil perhatian bahawa ia hanya mempengaruhi kejadian itu sendiri dan komponen kanak-kanak yang dimasukkan ke dalam kandungan slot, bukan semua komponen kanak-kanak .

tetapkan, padam

Fungsi: Tetapkan dan padam sifat data responsif dan cetuskan kemas kini paparan pada masa yang sama.
Penggunaan:

// 用法1
Vue.set( target, key, value )
Vue.delete( target, key )
// 用法2
vm.$set( target, key, value )
vm.$delete( target, key )

Salin selepas log masuk

Penerangan:

sasaran: objek sasaran
kunci: ke be Added nama atribut
nilai: Nilai atribut untuk ditambah

ps: Senario penggunaan utama, yang boleh mengelakkan pengehadan bahawa Vue tidak dapat mengesan pemadaman harta

penapis

Fungsi: digunakan untuk beberapa pemformatan teks biasa dan beberapa pemetaan data kanonik.
Penggunaan:

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Salin selepas log masuk

// 注册
filters: {
  capitalize: function (value) {
    if (!value) return &#39;&#39;
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Salin selepas log masuk

// 全局注册
Vue.filter(&#39;capitalize&#39;, function (value) {
  if (!value) return &#39;&#39;
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

Salin selepas log masuk

Penerangan:

Fungsi penapis sentiasa menerima ungkapan Nilai (hasil daripada rantaian operasi sebelumnya) sebagai parameter pertama.
Penapis hendaklah ditambahkan pada penghujung ungkapan JavaScript, yang ditunjukkan oleh simbol "paip".

ps: Penapis boleh menerima berbilang parameter, seperti {{ message | filterA('arg1', arg2) }}, di sini, filterA ditakrifkan sebagai penapis yang menerima tiga parameter peranti fungsi. Nilai mesej digunakan sebagai parameter pertama, rentetan biasa 'arg1' digunakan sebagai parameter kedua, dan nilai ungkapan arg2 digunakan sebagai parameter ketiga.

arahan

Fungsi: digunakan untuk mendaftar arahan tersuai.
Penggunaan:

<!-- 当页面加载时，该元素将获得焦点 --> 
<input v-focus>

Salin selepas log masuk

// 注册一个全局自定义指令 `v-focus`
Vue.directive(&#39;focus&#39;, {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

Salin selepas log masuk

// 注册局部指令，组件中也接受一个 directives 的选项
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

Salin selepas log masuk

Penjelasan:

dimasukkan hanyalah salah satu daripada pendaftaran arahan Fungsi interpolasi, atribut pendaftaran lengkap juga boleh termasuk:
- bind: hanya dipanggil sekali, dipanggil apabila arahan terikat pada elemen untuk kali pertama, di mana tetapan permulaan sekali boleh dilakukan.
- dimasukkan: Dipanggil apabila elemen terikat dimasukkan ke dalam nod induk (hanya nod induk dijamin wujud, tetapi tidak semestinya dimasukkan ke dalam dokumen).
- kemas kini: Dipanggil apabila VNode komponen dikemas kini, tetapi mungkin berlaku sebelum VNode anaknya dikemas kini. Nilai arahan mungkin telah berubah atau mungkin tidak, tetapi kemas kini templat yang tidak perlu boleh diabaikan dengan membandingkan nilai sebelum dan selepas kemas kini.
- componentUpdated: Dipanggil selepas semua VNode komponen di mana arahan terletak dan sub-VNodnya telah dikemas kini.
- buka ikatan: Dipanggil sekali sahaja, apabila arahan tidak terikat daripada elemen.

Vue.directive(&#39;my-directive&#39;, {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

Salin selepas log masuk

gula sintaks model v

model v sering digunakan untuk pengikatan dua hala data pada elemen bentuk, seperti sebagai < input>. Selain unsur asli, ia juga boleh digunakan dalam komponen tersuai.

v-model ialah gula sintaks yang boleh diuraikan kepada prop: nilai dan peristiwa: input. Maksudnya, komponen mesti menyediakan nilai prop bernama dan input acara tersuai Jika kedua-dua syarat ini dipenuhi, pengguna boleh menggunakan v-model pada komponen tersuai. Contohnya, contoh berikut melaksanakan pemilih nombor:

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      value: {
        type: Number
      }
    },
    data () {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit(&#39;input&#39;, this.currentValue);
      }
    }
  }
</script>

Salin selepas log masuk

props 一般不能在组件内修改，它是通过父级修改的，因此实现 v-model 一般都会有一个 currentValue 的内部 data，初始时从 value 获取一次值，当 value 修改时，也通过 watch 监听到及时更新；组件不会修改 value 的值，而是修改 currentValue，同时将修改的值通过自定义事件 input 派发给父组件，父组件接收到后，由父组件修改 value。所以，上面的数字选择器组件可以有下面两种使用方式：

<template>
  <InputNumber v-model="value" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

Salin selepas log masuk

或：

<template>
  <InputNumber :value="value" @input="handleChange" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>

Salin selepas log masuk

如果你不想用 value 和 input 这两个名字，从 Vue.js 2.2.0 版本开始，提供了一个 model 的选项，可以指定它们的名字，所以数字选择器组件也可以这样写：

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      number: {
        type: Number
      }
    },
    model: {
      prop: &#39;number&#39;,
      event: &#39;change&#39;
    },
    data () {
      return {
        currentValue: this.number
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit(&#39;number&#39;, this.currentValue);
      }
    }
  }
</script>

Salin selepas log masuk

在 model 选项里，就可以指定 prop 和 event 的名字了，而不一定非要用 value 和 input，因为这两个名字在一些原生表单元素里，有其它用处。

.sync 修饰符

如果你使用过 Vue.js 1.x，一定对 .sync 不陌生。在 1.x 里，可以使用 .sync 双向绑定数据，也就是父组件或子组件都能修改这个数据，是双向响应的。在 Vue.js 2.x 里废弃了这种用法，目的是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。

不过在 Vue.js 2.3.0 版本，又增加了 .sync 修饰符，但它的用法与 1.x 的不完全相同。2.x 的 .sync 不是真正的双向绑定，而是一个语法糖，修改数据还是在父组件完成的，并非在子组件。

仍然是数字选择器的示例，这次不用 v-model，而是用 .sync，可以这样改写：

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ value }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      value: {
        type: Number
      }
    },
    methods: {
      increase (val) {
        this.$emit(&#39;update:value&#39;, this.value + val);
      }
    }
  }
</script>

Salin selepas log masuk

用例：

<template>
  <InputNumber :value.sync="value" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

Salin selepas log masuk

看起来要比 v-model 的实现简单多，实现的效果是一样的。v-model 在一个组件中只能有一个，但 .sync 可以设置很多个。.sync 虽好，但也有限制，比如：

不能和表达式一起使用（如 v-bind:title.sync="doc.title + '!'" 是无效的）；
不能用在字面量对象上（如 v-bind.sync="{ title: doc.title }" 是无法正常工作的）。

其它简单的常用属性和方法

// console.log(vm.$root); 
vm.$root    //实例对象

vm.$el  //根元素（真实的DOM元素）
// console.log(vm.$el);

vm.$el.innerHTML    //得到根元素（真实的DOM元素）中的内容
// console.log(vm.$el.innerHTML);

vm.$data    //实例下的data对象
// console.log(vm.$data);

vm.$options     //实例下的挂载项
// console.log(vm.$options);

vm.$props   //组件之间通信的数据
// console.log(vm.$props);

vm.$parent      //在组件中，指父元素
// console.log(vm.$parent);

vm.$children    //在组件中，指子代元素
// console.log(vm.$children);

vm.$attrs   //用来获取父组件传递过来的所有属性
// console.log(vm.$attrs);

vm.$listeners   //用来获取父组件传递过来的所有方法
// console.log(vm.$listeners);

vm.$slots   //组件中的插槽
// console.log(vm.$slots);

vm.$scopedSlots     //用来访问作用域插槽
// console.log(vm.$scopedSlots);

vm.$refs    //用来定位DOM元素（使用ref进行追踪）
// console.log(vm.$refs);

vm.$watch   //用于监听数据（在vue文件中使用后会自动销毁）
// console.log(vm.$watch);

vm.$emit    //用于派发事件（常用于数据通信）
// console.log(vm.$emit);

vm.$on  //用于监听事件的派发
// console.log(vm.$on);

vm.$once    //只监听事件一次（之后不监听）
// console.log(vm.$once);

//生命周期
beforeCreate() {
}
created() {
}
beforeMount() {
}
mounted() {
}
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
}
destroyed() {
}

Salin selepas log masuk

（学习视频分享：vuejs教程、web前端）

Atas ialah kandungan terperinci Apakah API yang biasa digunakan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!