# vue教程

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

props: {
  title: String,
  contactsPromise: Promise // or any other constructor
}

props: {
  propA: Number, // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
  propB: [String, Number], // 多个可能的类型
  propC: {  type: String, required: true }, // 必填的字符串
  propD: { type: Number, default: 100 }, // 带有默认值的数字
  propE: { // 带有默认值的对象
    type: Object,
    // 对象或数组默认值必须从一个工厂函数获取
    default: function () { return { message: 'hello' } }
  },
  propF: { // 自定义验证函数
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

post: { id: 1, title: 'My Journey with Vue' }

Vue.component('my-component', {
  inheritAttrs: false,
})

// 使用过滤器时需要添加管道符号（ | ）作为分隔，管道符 | 右边是过滤器名称，即文本的功能函数

<!-- 在双花括号中 -->
{{ message | 过滤器名称 }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="id | 过滤器名称"></div>

data () {
    return {
        msg: 'hello world'
    }
},
//定义私用局部过滤器。只能在当前 vue 对象中使用
filters: {
    dataFormat: (msg, a) => { // msg表示要过滤的数据，a表示传入的参数
        return msg + a;
    }
}

<p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!

// filter/dict.js 文件
import Dict from '../constants/dictionary'

export const genderMenu = {
    func: value => {
        const target = Dict.GENDER_MENU.filter(item => {
            return item.code = value;
        })
        return target.length ? target[0].label : value;
    }
}

export const commonMenu = {
    func: value => {
        const target = Dict.COMMON_MENU.filter(item => {
            return item.code = value;
        })
        return target.length ? target[0].label : value;
    }
}

// filter/index.js 文件
import * as filters from './dict' // 导入过滤函数

const Install = Vue => {
    // 导入的 filters 是一个对象，使用Object.keys()方法，得到一个由key组成的数组，遍历数据，让key作为全局过滤器的名字，后边的是key对应的处理函数，这样在任何一个组件中都可以使用全局过滤器了
    Object.keys(filters).forEach(key => {
        Vue.filter(key, filters[key].func)
    })
    /*
    for(const _filter in filters) {
        Vue.filter(`${_filter}`, filters[_filter].func)
    } */
}

export default Install

// main.js 文件

import filters from  './filter/index'
Vue.use(filters)

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input type="checkbox"
			v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document';
export default {
  model: {
    prop: 'fatherData',// 指定v-model属性接受数值
    event: 'changeData'// 指定事件回送数据给父组件
  },
  props: { fatherData: {  type: String, default: '' }, },
  data() { return { data: '', editor: null, } }
  mounted() { this.initCKEditor(); },
  methods: {
    initCKEditor() {
      CKEditor.create(editorDom, config).then(editor => {
        this.editor = editor;
        editor.model.document.on('change:data', () => {
          this.data = editor.getData();
          // 把富文本编辑器获取到的内容传给父组件
          this.$emit('changeData', this.data);
        });
      }
    }
  },
  watch: {
    // 监听prop传的value，如果父级有变化了，将子组件的value也跟着变，达到父变子变的效果
    fatherData(newVal) {
      if (this.editor && this.data !== newVal) {
        // 设置内容
        this.editor.setData(newVal);
      }
    },
  }
}

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  },
  template: '<div id="example">{{message}}</div>'
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

this.$nextTick(function () {
  console.log(this.$el.textContent) // => '已更新'
})

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}