vue 进阶系列之全局API

2019-10-22
继vue 进阶系列之指令后，再写 vue 进阶系列之全局 API
基于一个简单的TodoList来演示全局API的使用, 在使用到全局API的地方会有注释标明
请仔细阅读注释处所涉及到的api的使用方法
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> vue 进阶系列之全局 API 的使用</title>
  <style>
    .todo-list {
      margin: 100px auto;
      width: 500px;
      text-align: center;
      font-family: '微软雅黑';
    }

    .display-item li{
      text-align: left;
      padding-left: 1rem;
      color: #bbbbbb;
    }

    .input-todo-item>input {
      width: 300px;
      height: 35px;
      border: 1px solid #bbb;
      border-radius: 4px;
      padding: 0 1rem;
    }

    .input-todo-item>input:focus {
      border-radius: 4px;
    }

    .input-todo-item>button {
      line-height: 35px;
      color: #ffffff;
      background-color: red;
      outline: none;
      opacity: .6;
      border-radius: 4px;
      border: none;
      padding: 0 1rem;
      cursor: pointer;
    }

    .input-todo-item>button:hover {
      opacity: 1;
    }

    .disableBtn {
      background-color: #bbb !important;
      opacity: 1 !important;
    }

    .samll-widget {
      display: inline-block;
      height: 20px;
      width: 30px;
      line-height: 20px;
      text-align: center;
      color: #ffffff;
      transition: all 1s;
      /* border: 1px solid #eee; */
      border-radius: 2px;
      margin-left: 1rem;
      opacity: .5;
      cursor: pointer;
    }

    .samll-widget:hover {
      opacity: 1;
    }

  </style>
</head>

<body>
  <div id="mount-point">
    <div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        // 定义 <input-item/>组件 html 片段
        const inputTpl =
          `<div class="input-todo-item">
            <input v-focus type="text" v-model="inputValue"/>
            <button
              ref="addbtn"
              @click="addClick"
              :disabled="disableAddBtn"
              :class="{disableBtn: disableAddBtn}">
              {{ add | capitalize}}
            </button>
          </div>
          `
        // 定义 <display-item>组件 html 片段
        const disTpl =
          `<div class="display-item">
            <ul>
              <li
                v-for="(item, index) in disList"
                :key="index"
                :style="{textDecorationLine: item.isCompleted ? 'line-through' : 'none'}">
                {{item.text}}
                <small-widget type="delete" index="index" @onClickWidget="deleteItem(index)">
                  <template v-slot:widget>x</template>
                </small-widget>
                <small-widget type="finished" index="index">
                  <template v-slot:widget>o</template>
                </small-widget>
              </li>
            </ul>
          </div>`
        // 定义 TodoList html 片段
        const tpl =
          `<div class="todo-list">
            <input-item @onAddItem="addItemToList"/>
            <display-item :disList="todoLists"/>
          </div>`
        /** global API
         * @Vue.compile(template)
         * 功能： 在 render 函数中编译模板字符串
         * params:
         */
        const widget = Vue.compile(`<span ref="small-widget" class="samll-widget" @click="handleClick"><slot name="widget"></slot></span>`)
        Vue.component('small-widget', {
          props: {
            type: {
              type: String
            },
            index: {
              type: String
            }
          },
          computed: {
            color () {
              if (this.type === 'delete') {
                return 'red'
              } else if (this.type === 'remind') {
                return 'yellow'
              } else {
                return 'green'
              }
            }
          },
          mounted () {
            this.$refs['small-widget'].style.backgroundColor = this.color
          },
          methods: {
            handleClick () {
              this.$emit('onClickWidget')
              // console.log('fsafasfsafsafa' ,this.$parent.$parent.$data)
            }
          },
          render: widget.render
        })
        /** global API
         * @Vue.extend(options)
         * 功能： 使用基础 Vue 构造器，创建一个“子类”
         * params:  一个包含组件选项的对象。
         */
        const DisplayItem = Vue.extend({
          template: disTpl,
          props: {
            disList: {
              type: Array
            }
          },
          methods: {
            deleteItem(index) {
              this.$emit('onDeleteItem', index)
            }
          }
        })
        /** global API
         * @Vue.component(id, [definition])
         * 功能： 注册或获取全局组件
         * params:  {string} id, {Function | Object} [definition]
         */
        // 使用构造器创建组件
        Vue.component('display-item', DisplayItem)
        // 使用模板选项创建组件
        Vue.component('input-item', {
          template: inputTpl,
          data() {
            return {
              inputValue: '',
              add: 'add'
            }
          },
          computed: {
            disableAddBtn() {
              return !this.inputValue
            }
          },
          methods: {
            addClick() {
              console.log(this.disableAddBtn)
              if (this.disableAddBtn) return
              this.$emit('onAddItem', this.inputValue) // 实例方法/事件
            }
          }
        })
        // 使用render函数创建组件
        Vue.component('todo-list', {
          render: function (createElement) {
            return createElement('div', {'class': {'todo-list': true}}, [
              createElement('input-item', {
                on: {
                  onAddItem: this.$parent.addItemToList
                },
              }, this.$slots.default),
              createElement('display-item', {
                props: {
                  disList: this.$parent.$data.todoLists
                },
                on: {
                  onDeleteItem: this.$parent.deleteItemFromList
                },
              }, this.$slots.default),
            ])
          }
        })
        const TodoList = new Vue({
          props: {
            data: {
              type: Object
            }
          },
          data() {
            return {
              todoLists: [
                {
                  text: '这个周末去song'
                }
              ]
            }
          },
          methods: {
            deleteItemFromList (index) {
              this.todoLists.splice(index, 1)
            }
          },
          render: function (createElement) {
            return createElement('todo-list')
          }
        })
        /** global API
        * @Vue.mixin(id, [definition])
        * 功能： 定义一个全局混入
        * params:  {string} id {Function | Object} [definition]
        */
        Vue.mixin({
          created: function () {
            var myOption = this.$options.myOption
            console.log('[myOption]', myOption)
          }
        })
        /** global API
        * @Vue.directive(id, [definition])
        * 功能： 注册或获取一个全局指令
        * params:  {string} id {Function | Object} [definition]
        */
        Vue.directive('focus', {
          inserted (el, binding, vNode) {
            el.focus()
          }
        })
        /** global API
        * @Vue.vue(plugin)
        * 功能： 安装 Vue.js 插件
        * params:  {Object | Function} plugin
        */
        Vue.use({
          install(Vue) {
            let message = (context, options) => {
              let res = Vue.compile('<div>{{options.text}}</div>')
              let Message = Vue.extend({
                render: res.render
              })
              new Message().$mount(context)
            }
            Vue.prototype.$message = message
          }
        })
        /** global API
        * @Vue.filter(id, [definition])
        * 功能： 注册或获取全局过滤器。
        * params:  {string} id {Function | Object} [definition]
        */
        Vue.filter('capitalize', function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        })
        /** global API
        * @Vue.set(target, propertyName/index, value )
        * 功能： 向响应式对象中添加一个属性
        * params:  一个包含组件选项的对象。
        */
        Vue.set(TodoList, 'key', {
          text: '这个周末去song'
        })
        let list = TodoList.$data.todoLists
        list = list.map(item => {
          TodoList.$set(item, 'isCompleted', true)
          return item
        })
        TodoList.addItemToList = value => {
          list.push({
            isCompleted: false,
            text: value
          })
          TodoList.$data.todoLists = list
        }
        TodoList.$mount('#mount-point')
      </script>
</body>

</html>
vue 进阶系列之全局API

上一页

vue 进阶系列之实例方法

vue

下一页

vue 进阶系列之实例属性

vue
