【HAVENT原創】VUE2 經驗問題彙總

 

新建一個 Vue 實例能夠有下列兩種方式：

1. new 一個實例

var app= new Vue({
  el:'#todo-app', // 掛載元素
  data:{ // 在.vue組件中data是一個函數，要寫成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函數成員
  watch: {}, // watch監視成員
  computed: {}， // computed計算成員
  created: function () {},
  methods: {}, // methods對象成員
  actions: {}
}

 

 

在同一個組件內，methods 中的一個方法調用另一個方法

能夠在調用的時候 this.$options.methods.test2();

new Vue({
    el: '#app',
    methods: {
        test1: function () {
            alert(1)
        },
        test2: function () {
            alert(2)
        },
        test3: function () {
            // 在 test3 中調用 test2 的方法
            this.$options.methods.test2();
        }
    }
})

 

 

選項：computed 計算成員

最簡單的增長貨幣符號方法:

{{‘￥’+money}}

在 vue 中推薦使用計算成員來實現 RMB 前加上貨幣符號:

<template>
    <input v-model="money"> // 響應式的
    <span>{{RMB}}</span> // {{}}中能夠是變量，也能夠是方法名
</template>

<script>
    data () {
        rerurn {}
    },
    computed: {
        RMB: function () {
            return '￥'+ this.money
        }
    }
</script>