从一个todoList来体验vue的神秘感

2019-10-22
从一个 todoList 来体验 vue 的神秘感
请纵情体验使用 vue 来玩 todoList
<!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-tod-item>input {
      width: 300px;
      height: 35px;
      border: 1px solid #bbb;
      border-radius: 4px;
      padding: 0 1rem;
    }

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

    .input-tod-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-tod-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-tod-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
            }
          },
          // watch 监听的属性只有当其发生变化后才触发，因此首次不会触发的
          // watch: {
          //   disableAddBtn (newV, oldV) {
          //     if (newV) {
          //       this.$refs['addbtn'].style.backgroundColor = "#bbb"
          //     } else {
          //       this.$refs['addbtn'].style.backgroundColor = "red"
          //     }
          //   }
          // },
          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'
        })
        // 此处列举vue实例属性
        console.log(TodoList.$data) // rw 代理data对象
        // => {__ob__: Observer}
              // todoLists: (...)
              // __ob__: Observer {value: {…}, dep: Dep, vmCount: 1}
              // get todoLists: ƒ reactiveGetter()
              // set todoLists: ƒ reactiveSetter(newVal)
              // __proto__: Object
        console.log(TodoList.$options) // onlyread
        // => {components: {…}, directives: {…}, filters: {…}, _base: ƒ, template: "<div class="todo-list"><input-item @o…play-item :disList="todoLists"/>↵          </div>", …}
        console.log(TodoList.$el) // onlyread Vue
        // => undefined
        console.log(TodoList.$root)
        // => 当前vue实例
        console.log(TodoList.$props)
        // => {}
          // data: (...)
          // get data: ƒ reactiveGetter()
          // set data: ƒ reactiveSetter(newVal)
          // __proto__: Object
        console.log(TodoList.$parent)  // onlyread
        // => 父实例，如果当前实例有的话
        console.log(TodoList.$children)  // onlyread
        // => 当前实例的直接子组件
          // []
          // 0: VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
          // 1: VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
          // length: 2
          // __proto__: Array(0)
        console.log(TodoList.$refs)  // onlyread
        // => 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。
        console.log(TodoList.$scopedSlots) // onlyread
        // => 用来访问作用域插槽
        console.log(TodoList.$slots)  // onlyread
        // => 用来访问被插槽分发的内容
        console.log(TodoList.$listeners)  // onlyread
        // => 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
        console.log(TodoList.$attrs)  // onlyread
        // => 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)
        console.log(TodoList.$isServer)
        // => 当前 Vue 实例是否运行于服务器
        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
        }
        /** instance API (实例方法)
        * @vm.$mount(id, [definition])
        * 功能： 挂载一个未挂载的实例
        * params:  {Element | string} [elementOrSelector] {boolean} [hydrating]
        */
        TodoList.$mount('#mount-point')
      </script>
</body>

</html>
从一个todoList来体验vue的神秘感

上一页

vue 进阶系列之实例属性

vue

下一页

vue 进阶系列之指令

vue
