vue

csxiaoyaojianxian · csxiaoyaojianxian · commit 9def4542ea14 · 2018-12-26T01:21:49.000+08:00
diff --git a/12-前端框架/06-vue/24-深入细化学习/01-vue实例.js b/12-前端框架/06-vue/24-深入细化学习/01-vue实例.js
@@ -0,0 +1,69 @@
+import Vue from 'vue'
+
+const app = new Vue({
+  // el: '#root',
+  template: '<div ref="div">{{text}} {{obj.a}}</div>',
+  data: {
+    text: 0,
+    obj: {}
+  }
+  // watch: {
+  //   text (newText, oldText) {
+  //     console.log(`${newText} : ${oldText}`)
+  //   }
+  // }
+})
+
+app.$mount('#root') // 效果和 el:'#root' 相同
+console.log(app.$el)
+
+console.log(app.$data)
+console.log(app.$props)
+console.log(app.$options)
+setInterval(() => {
+    app.$options.data.text += 1 // 不变化
+    app.$data.text += 1 // 变化，app.text代理到app.$data.text
+}, 1000)
+
+app.$options.render = (h) => {
+  return h('div', {}, 'new render function')
+}
+
+console.log(app.$root === app) // true
+console.log(app.$children)
+console.log(app.$slots)
+console.log(app.$scopedSlots)
+console.log(app.$refs)
+console.log(app.$isServer)
+
+// watch及解除
+const unWatch = app.$watch('text', (newText, oldText) => {
+  console.log(`${newText} : ${oldText}`)
+})
+setTimeout(() => {
+  unWatch()
+}, 2000)
+
+// 事件触发
+app.$on('test1', (a, b) => {
+  console.log(`test emited ${a} ${b}`)
+})
+app.$once('test2', (a, b) => {
+  console.log(`test emited ${a} ${b}`)
+})
+setInterval(() => {
+  app.$emit('test1', 1, 2)
+  app.$emit('test2', 1, 2)
+}, 1000)
+
+// forceUpdate & set
+let i = 0
+setInterval(() => {
+  app.obj.a = i++
+  app.$forceUpdate() // 对没有没有初始声明的值强制渲染
+  // app.$set(app.obj, 'a', i) // 补上声明，效果与$forceUpdate()相同
+  // app.$delete ...
+}, 1000)
+
+// nextTick
+// app.$nextTick([callback])
diff --git a/12-前端框架/06-vue/24-深入细化学习/02-生命周期.js b/12-前端框架/06-vue/24-深入细化学习/02-生命周期.js
@@ -0,0 +1,66 @@
+import Vue from 'vue'
+
+const app = new Vue({
+  // el: '#root',
+  // template: '<div>{{text}}</div>',
+  data: {
+    text: 0
+  },
+  beforeCreate () {
+    console.log(this.$el, 'beforeCreate') // undefined
+  },
+  created () {
+    console.log(this.$el, 'created') // undefined
+  },
+  // SSR不存在 ------------------------
+  beforeMount () {
+    console.log(this.$el, 'beforeMount') // 未填充数据的节点
+  },
+  mounted () {
+    console.log(this.$el, 'mounted') // 完成渲染的节点
+  },
+  //----------------------------------
+  beforeUpdate () {
+    console.log(this, 'beforeUpdate')
+  },
+  updated () {
+    console.log(this, 'updated')
+  },
+  // 与keep-alive相关 -----------------
+  activated () {
+    console.log(this, 'activated')
+  },
+  deactivated () {
+    console.log(this, 'deactivated')
+  },
+  //----------------------------------
+  beforeDestroy () {
+    console.log(this, 'beforeDestroy')
+  },
+  destroyed () {
+    console.log(this, 'destroyed')
+  },
+  //////////////////////////////////////////////////
+  // 与使用template相同 在beforeMount和mounted之间执行
+  render (h) {
+    // throw new TypeError('render error') // 主动触发renderError
+    console.log('render function invoked')
+    return h('div', {}, this.text)
+  },
+  renderError (h, err) {
+    return h('div', {}, err.stack)
+  },
+  errorCaptured () {
+    // 会向上冒泡，并且正式环境可以使用
+  }
+})
+
+app.$mount('#root')
+// 触发update系列
+setInterval(() => {
+  app.text = app.text += 1
+}, 1000)
+// 主动销毁，解除事件监听和watch
+setTimeout(() => {
+  app.$destroy()
+}, 1000)
diff --git a/12-前端框架/06-vue/24-深入细化学习/03-数据绑定.js b/12-前端框架/06-vue/24-深入细化学习/03-数据绑定.js
@@ -0,0 +1,44 @@
+import Vue from 'vue'
+
+var globalVar = 'sunshine' // eslint-disable-line
+new Vue({
+  el: '#root',
+  // template: `
+  //   <div >
+  //     <p v-html="html"></p>
+  //   </div>
+  // `,
+  template: `
+    <div
+      v-bind:id="eleId" // :id
+      v-on:click="handleClick" // @click
+      :class="[{ active: isActive }]"
+      :style="[styles, styles2]"
+    >
+      {{globalVar}} // 报错，不能访问外部变量
+      <p v-html="html"></p>
+      <p>{{getJoinedArr(arr)}}</p>
+    </div>
+  `,
+  data: {
+    isActive: false,
+    arr: [1, 2, 3],
+    html: '<span>123</span>',
+    eleId: 'main',
+    styles: {
+      color: 'red',
+      appearance: 'none' // 消除浏览器默认样式，浏览器需要前缀，自动添加前缀
+    },
+    styles2: {
+      color: 'black'
+    }
+  },
+  methods: {
+    handleClick () {
+      alert('clicked') // eslint-disable-line
+    },
+    getJoinedArr (arr) {
+      return arr.join(' ')
+    }
+  }
+})
