vue 进阶系列之实例属性

John Doe
2019-10-22

vue 进阶系列之实例属性, 沿用进阶系列之全局 API 的实例

vue 进阶系列之实例属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!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;
    }

    .display-item {
      text-align: left;
    }

    .input-todo-item>input {
      width: 300px;
      height: 35px;
      border: 1px solid #bbb;
      border-radius: 4px;
      padding-left: 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;
    }

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

    .disableBtn {
      background-color: #bbb !important;
      opacity: 1 !important;
    }
  </style>
</head>

<body>
  <div id="mount-point">
    <div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        const inputTpl =
          `<div class="input-todo-item">
            <input type="text" v-model="inputValue"/>
            <button
              ref="addbtn"
              @click="addClick"
              :disabled="disableAddBtn"
              :class="{disableBtn: disableAddBtn}">
              add
            </button>
          </div>
          `
        const disTpl =
          `<div class="display-item">
            <ul>
              <li
                v-for="(item, index) in disList"
                :key="index"
                :style="{textDecorationLine: item.isCompleted ? 'line-through' : 'none'}"
                @click="deleteItem">
                {{item.text}}
              </li>
            </ul>
          </div>`
        const tpl =
          `<div class="todo-list">
            <input-item @onAddItem="addItemToList"/>
            <display-item :disList="todoLists"/>
          </div>`
        const DisplayItem = Vue.extend({
          template: disTpl,
          props: {
            disList: {
              type: Array
            }
          },
          methods: {
            deleteItem() { }
          }
        })
        Vue.component('display-item', DisplayItem)
        Vue.component('input-item', {
          template: inputTpl,
          data() {
            return {
              inputValue: ''
            }
          },
          computed: {
            disableAddBtn() {
              return !this.inputValue
            }
          },
          methods: {
            addClick() {
              console.log(this.disableAddBtn)
              if (this.disableAddBtn) return
              this.$emit('onAddItem', this.inputValue) // 实例方法/事件
            }
          }
        })
        const TodoList = new Vue({
          template: tpl,
          props: {
            data: {
              type: Object
            }
          },
          data() {
            return {
              todoLists: [
                {
                  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')

        // 此处列举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(vm.$isServer)
        // => 当前 Vue 实例是否运行于服务器
      </script>
</body>

</html>
 上一页

vue