• 響應式：數(shù)據(jù)改變時會觸發(fā)其他聯(lián)動。例如：模板中的數(shù)據(jù)綁定；計算屬性的重新計算；

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

vm.$parent

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

vm.$root

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

vm.$children

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

vm.$refs

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

vm.$slots

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

vm.$scopedSlots

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

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

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

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

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。