• 響應式：數據改變時會觸發其他聯動。例如：模板中的數據綁定；計算屬性的重新計算；

————————————————————————————————————————————————————

vm.$parent

• $parent 屬性可以用來從一個子組件訪問父組件的實例

vm.$root

• 在每個 new Vue 實例的子組件中，其根實例可以通過 $root 屬性進行訪問。子組件通過this.$root訪問根組件及包含的data等。
• 如果當前實例沒有父實例，此實例將會是其自己。

vm.$children

• 當前實例的直接子組件。需要注意 $children 并不保證順序，也不是響應式的。如果你發現自己正在嘗試使用 $children 來進行數據綁定，考慮使用一個數組配合 v-for 來生成子組件，并且使用 Array 作為真正的來源。
• 只包含組件，包括傳入插槽的組件。不包括dom元素

vm.$refs

• $refs 只會在組件渲染完成之后生效，并且它們不是響應式的。你應該避免在模板或計算屬性中訪問 $refs。
• refs引用，在v-for循環中返回的是組件數組，即使只有一個匹配的ref名，依然返回數組
• ref有多個相同名時，返回最后一個對象（需驗證）

vm.$slots

• 用來訪問被插槽分發的內容（用來獲取插入插槽的組件或元素）。每個具名插槽 有其相應的屬性 (例如：slot="foo" 中的內容將會在 vm.$slots.foo 中被找到)。default 屬性包括了所有沒有被包含在具名插槽中的節點（數組）

vm.$scopedSlots

• 用來訪問作用域插槽（用來獲取插入作用域插槽的組件或元素，返回的是生成這個組件或元素的函數）。對于包括 默認 slot 在內的每一個插槽，該對象都包含一個返回相應 VNode 的函數。

props: ['message'], render: function (createElement) {// `<div><slot :text="message"></slot></div>`return createElement('div', [this.$scopedSlots.default({ // default作用域插槽也可以具名text: this.message})]) }

————————————————————————————————————————————————————

全局Vue.directive / 局部directives

• 有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
• update、componentUpdated是指指令綁定的當前組件發生改變，例如：在組件my-vue引用時綁定指令，該組件內部發生變化是不會觸發事件的。
• 一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
  • bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
  • inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
  • update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。（更新是指綁定的數據更新而不是指界面渲染變化）
  • componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。（更新是指綁定的數據更新而不是指界面渲染變化）
  • unbind：只調用一次，指令與元素解綁時調用。
• 鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)
  • el：指令所綁定的元素，可以用來直接操作 DOM 。除了 el 之外，其它參數都應該是只讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset（元素自定義特性，以data-開頭） 來進行。
  • binding：一個對象，包含以下屬性：
    • name：指令名，不包括 v- 前綴。
    • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。（綁定vue實例下的數據）
    • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
    • expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
    • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。（傳入固定值）
    • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
  • vnode：Vue 編譯生成的虛擬節點。（vnode并不是vue實例，而是vue實例中渲染函數render執行后生成的結果）
  • oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')} })

• 在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子。

Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value })

轉載于:https://www.cnblogs.com/qq3279338858/p/10283954.html

總結

以上是生活随笔為你收集整理的操作 实例 / dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。