Vue實例的對象參數(shù)options的幾個常用選項詳解

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

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

一. 新建一個Vue實例可以有下列兩種方式：

1.new一個實例

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

export default app // 默認輸出，可在其他組件引用

2. 直接

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

二. Vue實例，我參數(shù)options。它是一個對象。可以選擇如下選項：

data函數(shù)成員

methods對象成員

模板template

掛載元素el

生命周期鉤子

props屬性聲明

computed計算成員

watch監(jiān)視成員

選項：watch監(jiān)視

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

1.回調函數(shù)，

2.值也可以是方法名，

3.或者包含選項的對象。

ps:表達式暫時可以理解為一個可以得到值的式子

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

如：

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

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

則上面的形式可以改為：

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

Ⅲ包含選項的對象

如：上面兩種就等同于

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

選項：computed計算成員

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

{{‘￥'+money}}

可以，但不推薦。這種情形應盡量用計算成員：

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

實現(xiàn)RMB前加上美元符號

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

引入了計算成員RMB來做長表達式的計算，而在HTML內保持清晰的字段引用即可。這樣做依然可以享有響應式編程的好處：當money值改變時，引用RMB的標簽值也會被自動更新。

以上這篇Vue實例的對象參數(shù)options的幾個常用選項詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: