快捷導(dǎo)航

Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解

更新時(shí)間：2019年11月08日 09:55:38 作者：加油加油加油啊

今天小編就為大家分享一篇Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

一. 新建一個(gè)Vue實(shí)例可以有下列兩種方式：

1.new一個(gè)實(shí)例

var app= new Vue({
 el:'#todo-app', // 掛載元素
 data:{ // 在.vue組件中data是一個(gè)函數(shù)，要寫成data () {}這種方式
  items:['item 1','item 2','item 3'],
  todo:''
 },
 methods:{ // 方法成員
  rm:function(i){
   this.items.splice(i,1)
  }
 }
})
// 之后再

export default app // 默認(rèn)輸出，可在其他組件引用

2. 直接

export default {
 name: '',
 components: {},
 data: () {}, // data函數(shù)成員
 watch: {}, // watch監(jiān)視成員
 computed: {}， // computed計(jì)算成員
 created: function () {},
 methods: {}, // methods對(duì)象成員
 actions: {}
}

二. Vue實(shí)例，我參數(shù)options。它是一個(gè)對(duì)象?？梢赃x擇如下選項(xiàng)：

data函數(shù)成員

methods對(duì)象成員

模板template

掛載元素el

生命周期鉤子

props屬性聲明

computed計(jì)算成員

watch監(jiān)視成員

選項(xiàng)：watch監(jiān)視

watch監(jiān)視是一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值可以是

1.回調(diào)函數(shù)，

2.值也可以是方法名，

3.或者包含選項(xiàng)的對(duì)象。

ps:表達(dá)式暫時(shí)可以理解為一個(gè)可以得到值的式子

Ⅰ回調(diào)函數(shù)，來監(jiān)視一個(gè)值的變化（監(jiān)視data函數(shù)體的變量）

如：

 data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: function (val, oldVal) {
   console.log('replaceList changed')
  }
 }

Ⅱ第2種形式：”值也可以是方法名“，可以把watch的函數(shù)移到methods內(nèi)。

則上面的形式可以改為：

 data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: 'changed'
 }，
 methods: {
  changed: function (val, oldVal) {
   console.log('replaceList changed')
  }
 }

Ⅲ包含選項(xiàng)的對(duì)象

如：上面兩種就等同于

 data () {
  rerurn {
   replaceList: 1
  }
 },
 mounted: function () {
  this.$watch('replaceList',function(val, oldVal){
    console.log('replaceList changed')
  })
 },
 methods: {
 
 }

選項(xiàng)：computed計(jì)算成員

雖然在Mustache語法內(nèi)可以使用表達(dá)式，即{{}}。比如為數(shù)字前加入￥符號(hào)，可以使用表達(dá)式：

{{‘￥'+money}}

可以，但不推薦。這種情形應(yīng)盡量用計(jì)算成員：

在vue-cli腳手架的.vue組件中

實(shí)現(xiàn)RMB前加上美元符號(hào)

<template>
 <input v-model="money"> // 響應(yīng)式的
 <span>{{RMB}}</span> // {{}}中可以是變量，也可以是方法名
</template>
 
<script>
 data () {
  rerurn {}
 },
 computed: {
  RMB: function () {
   return '￥'+ this.money
  }
 }
</script>

引入了計(jì)算成員RMB來做長(zhǎng)表達(dá)式的計(jì)算，而在HTML內(nèi)保持清晰的字段引用即可。這樣做依然可以享有響應(yīng)式編程的好處：當(dāng)money值改變時(shí)，引用RMB的標(biāo)簽值也會(huì)被自動(dòng)更新。

以上這篇Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: