vue总结

生命周期实例

首先创建一个实例new Vue();

然后是beforeCreate(){}

在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

created(){} 

在created阶段，vue实例的数据对象data有了，$el还没有。

beforeMount(){}

在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。

mounted(){}

在mounted阶段，vue实例挂载完成，data.message成功渲染。

beforeUpdate(){},updated(){}

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

这个时候如果数据是多个的话，建议用nextTick(()=>{})来逐个根据数据变化来更新dom。如果用updated的话，多个数值变化可能导致死循环。

beforeDestroy(){},destroyed(){}

在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

 

接下来是传值方式:

父子传值：

父传子，在父组件引入子组件。

       引入方式

import Son from './Son.vue'
export default {
    components: {
        Son
    },
}

然后传值：在body下运用Son标签

    <Son :value="123456" title="hello" :inputVal="val" 
         @sendData="testAction">
    </Son>

然后子组件接收值在export default里用props

export default {
    props: {
        value: Number,
        title: String,
        inputVal: String
    },
}

这样父传子完成了。接下来是子传父

一般形式是通过子组件的一个按钮触发事件然后在事件里写

this.$emit('sendData',value);    这样就存好了 (个人理解：因为是父子组件，所以用的是同一个prototype下的，所以不需要在下面再定义一个变量来存，而非父子间传值则需要）

然后在父组件取值：在上面父传子的时候son标签有个 @sendData = testAction  通过testAction来调用

也就是methods下的testAction(value){} 接收到value。

非父子间传值

通常在main.js下建立一个  Vue.prototype.$center = new Vue();   //$center任意取名

把实例vue赋给$center

然后在需要传值的地方写  this.$center.$emit('send_data',value);  第一个是取值调用的函数，第二个是值

接下来是取值  this.$center.$on('send_data',(result)=>{ })  取完值后 不要忘了在beforeDestroy(){}里调用一手 

this.$center.$off('send_data',(result)=>{ })  随手关门是个好习惯

 

Filter过滤器

 

 

Vue自定义属性

 

 

 

//引入vue
import Vue from 'vue'
//引入App主页vue
import App from './App'
//引入路由
import router from './router'
//引入vuex
import store from './store/index.js'

Vue.prototype.$center = new Vue()

//声明page为全局组件,这里
import Page from './components/common/Page.vue'
Vue.component('Page',Page)

//首先创建一个实例
const vm = new Vue({
//	这里参数分别是根元素,路由引入,vuex引入,子组件引入,模板编译
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})