Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

MrZWH commented 6 years ago

小提示：默认情况下 import vue 都是 vue.runtime.xxx.js 的版本，开发环境一般是vue.runtime.esm.js，正式环境下一般是 vue.runtime.min.js,版本中是否有runtime 区别在于是否可以在 vue 对象里面写 template

MrZWH commented 6 years ago

vue 实例

vue 实例的创建和作用
vue 实例的属性
vue 实例的方法

const app = new Vue({
  // el: '#root',
  template: '<div>{{text}}</div>',
  data: {
    text: 0
  },
  watch: {
    text (newText, oldText) {
      //  ...
    }
  }
})

app.$mount('#root')
// app.$data 是data 中的数据
// app.$props 是上面传递的属性
// app.$options 是传递给new Vue的参数对象
// app.$options.render = (h) => {
//   return h('div', {}, 'test')
// }
// app.$root 根节点
// app.$children
// app.$slots
// app.$scopedSlots
// app.$refs
// app.$isServer
const unWatch = app.$watch('text', (newText, oldText) => {
// ...监听属性触发事件
})
// unWatch() 需要手动触发注销监听事件
// app.$on 监听事件 app.$emit 触发事件 app.$once 只监听一次事件
// app.$forceUpdate() 强制组件更新
// app.$set() 给对象的新属性赋值 app.$delete 删除
// app.$nextTick([callback])

MrZWH commented 6 years ago

vue 组件生命周期

有哪些生命周期方法
生命周期方法的调用顺序
生命周期中 VUE 实例有哪些区别 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestory destoryed 总共10个生命周期在beforeMount 获取 this.$el 获得的是挂载的父节点，在mounted之后获取的是创建的组件节点 beforeCreate、created、beforeMount、mounted之调用一次，beforeMount、mounted服务端渲染的时候不会调用 renderError(h, err) 和 errorCaptured 都是可以捕获错误的组件方法，前者是在开发环境下用于捕获本组件的错误，而后者是可用在线上环境该组件包含下的所有会向上冒泡的错误。

vue 数据绑定

// eslint-disable-line

在代码后面写上这句话可以屏蔽 eslint 的检查。 v-html 指令可用于显示一段 html 标签。 :class 做动态 class 类名时，可在属性中传入对象 {} 或者 [],对象的 key 为类名根据 val 的值的 boolean 判断是否有该类名，也可以 [{}]，混合写法。 :style 属性的设置可以传入一个对象也可以是数组，数组中包含一个个对象。

computed 和 watch

computed 的值是有缓存的，所以性能方面会比较好。 watch 中的属性，handler 是监听函数，immediate 是用于初始化是否执行监听函数，deep 是是否深入监听当监听的属性是一个对象的时候。watch 监听的属性还可以写成字符串。

vue 原生指令

v-text v-html v-show v-if 为 false 时，节点不存在于文档流中 v-else-if 当上一个条件不成立时，可判断该节点条件是否成立 v-else 之前的条件不符合则显示该节点 v-for 还可以用于遍历对象（val，key，index）in obj v-on v-model 有修饰符 .number .trim .lazy v-pre 标签内的表达式不回去解析 v-cloak v-once 数据绑定的内容只执行一次

vue 组件

定义组件

const component = {
  props: {
    active: {
      type: Boolean,
      // require: true,
      default: true,
      validator (value) {
        // 在这里更严格的判断传入值是否符合你的要求
      }
    },
    propOne: String
  },// 指定组件可配置的行为
  template: `
    <div>{{text}}</div>
    <span v-show="active">see me if</span>
  `,
  data () {
    return {
      text: 123
    }
  },
  methods: {
     handleChange() {
       this.$emit('change')
     }
  }
}

// Vue.component('CompOne', component) // 全局注册 vue 组件

new Vue({
  components: {
    CompOne: component
  },
  data: {
    prop1: 'text1'
  },
  methods: {
    handleChange () {
      this.prop1 += 1
    }
  },
  mounted () {
    console.log(this.$refs.comp1) // 拿到一个 vue 实例
  }
  el: '#root',
  template: `
    <comp-one ref="comp1" :active="true" :prop-one="prop1" @change="handleChange">123</comp-one>
    <comp-one :active="fasle" propOne="text2">123</comp-one>
  `
})

vue 组件继承extend

const component = {
  props: {
    active: Boolean,
    propOne: String
  },// 指定组件可配置的行为
  template: `
    <div>{{text}}</div>
    <span v-show="active">see me if</span>
  `,
  data () {
    return {
      text: 123
    }
  },
  methods: {
     handleChange() {
       this.$emit('change')
     }
  }
}

const CompVue = Vue.extend(component)

new CompVue({
  el: '#root',
  propsData: {
    propsOne: 'xxx'
  },
  data: {
    text: '123'
  }
})

const component2 = {
  extends: component,
  data () {
    return {
      text: 1
    }
  }
}

// $parent 获取父组件实例

自定义组件实现 v-model 双向绑定

vue 组件高级属性

插槽

const component = {
  template: `
    <div :style="style">
      <div class="header"><slot name="header"></slot></div>
      <div class="footer"><slot name="footer"></slot></div>
    </div>
  `,
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #fff'
      }
    }
  }
}

new Vue({
  components: {
    ComOne: compnent
  },
  el: '#root',
  data: {
    value: '123'
  },
  template: `
    <div>
      <comp-one>
        <span slot="header">this is content</span>
        <span slot="footer">this is content</span>
      </comp-one>
    </div>
  `
})

scoped slot 作用域插槽：


const ChildComponent = {
  template: '<div>child component{{data.value}}</div>',
  inject: ['yeye', 'data'],
  mounted () {
    console.log(this.$parent.$options.name)
  }
}

const component = {
  name: 'comp',
  components: {
    ChildComponent
  },
  template: `
    <div :style="style">
      <slot value="345" aaa="eee"></slot>
      <child-component/>
    </div>
  `,
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #fff'
      }
    }
  }
}

new Vue({
  components: {
    ComOne: compnent
  },
  provide () {
    const data = {}

    Object.defineProperty(data, 'value', {
      get: () => this.value,
      enumberable: true
    })
    return {
      yeye: this,
      value: data
    }
  },
  el: '#root',
  data: {
    value: '123'
  },
  template: `
    <div>
      <comp-one>
        <span slot-scope="props">{{props.value}}{{props.aaa}}</span>
      </comp-one>
    </div>
  `
})

MrZWH / MrZWHblog