【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>