vue总结2018

A,vue生命周期

1.creat->beforeCreat（创建完成之前）

2.mounted->beforeMount （挂载之前）

3.updated->beforeUpdate（更新数据之前）

4.destroy->beforeDestroy（销毁之前）

 

B,vue函数

1.data（初始化数据）

data () {
    return {
      title: 'pageA'
    }
  }

　　

2.computed（计算属性）

computed: {
    titleSet () {
      return this.title + '2222'
    }
  }

3.watch（监控数据）

4.props（组件传值）

5.methods（自定义函数方法）

6.template（无定义标识，鲜染时不加载）

7.components（插入组件）

// 全局注册
  Vue.component('golbal-component', {
     template: '<div>this is golbal-component</div>'
  });

  // 局部注册
  const localComponent = {
    template: '<div>this is localComponent</div>'
  };


  // 创建实例
  new Vue({
     el: '#app',
     components: {
        localComponent, // 局部注册，写在模板中可以是 小写 + ‘-’ 的格式 <local-component />
        // golbal-component // 全局注册不用引入
     } 
  });

8.mixins （公用方法集）

const mixin1 = {
  created () {
    console.log('mixin created')
  },
  methods: {
    change () {
      console.log('mixin change')
    },
    log () {
      console.log('mixin1 log')
    }
  }
}

export default {
  name: 'page',
  mixins: [mixin1],
  data () {
    return {
      title: 'pageA'
    }
  },
  mounted () {
    this.log()
  }
}

9. v-once （只渲染一次）

 

C,vue-cli配置

1.Vue.config.silent = false; Vue.config.productionTip = false 取消 Vue 所有的日志与警告

D,vue插件

1.vue-router

2.axios

3.vuex