真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

export default {
  name: 'Image',
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s)
    }
  }
};

  
    
    Click me
  

  
    Do something a little different here
  

watch {
  '$route.query.id'() {
    // ...
  }
}

const $slots = {
  default: ,
  icon: ,
  button: ,
};

$slots = { second:  }

  
This is a pretty great component, amirite?
  
    
  
  Click me!

export default {
  mounted() {
    // 當(dāng)有變化時調(diào)用`update`
    const observer = new MutationObserver(this.update);

    // 監(jiān)聽此組件的變化
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

  .component {
    background: green;
  }

  /* 在該組件內(nèi)有效 */
  .component {
    background: green;
  }

.my-component >>> .child-component {
  font-size: 24px;
}

  Mustard
  Ketchup
  
    Relish
  

2） Configuration

有時，一個組件的行為需要根據(jù)應(yīng)用程序的其他部分的情況來改變。這通常是為了自動處理邊緣情況，否則處理起來會很煩人。

一個 Popup  或 Tooltip 應(yīng)該重新定位，以便它不會溢出頁面。但是，如果該組件是在一個modal 內(nèi)，它應(yīng)該重新定位，以便它不會溢出 modal。

如果Tooltip知道它是在一個模態(tài)里面，這可以自動完成。

3）樣式

創(chuàng)建了 context-aware的CSS，根據(jù)父級或同級元素的情況應(yīng)用不同的樣式。

.statistic {
  color: black;
  font-size: 24px;
  font-weight: bold;
}

.statistic + .statistic {
  margin-left: 10px;
}

CSS變量讓我們更進(jìn)一步，允許我們在一個頁面的不同部分設(shè)置不同的值。

11、如何在Vue之外創(chuàng)建一個具有響應(yīng)性的變量(Vue2和3)

如果你從Vue之外得到一個變量，讓它具有反應(yīng)性是很好的。

這樣，我們就可以在computed props、watch和其他任何地方使用它，它的工作方式就像Vue中的任何其他狀態(tài)一樣。

如果我們使用的選項API，需要的只是將其放在組件的數(shù)據(jù)部分中：

const externalVariable = getValue();

export default {
  data() {
    return {
      reactiveVariable: externalVariable,
    };
  }
};

如果使用Vue3的組合API，可以直接使用ref或reactive。

import { ref } from 'vue';

// 可以完全在Vue組件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable);

console.log(reactiveVariable.value);

使用 reactive 代替：

import { reactive } from 'vue';

//  可以完全在Vue組件之外完成
const externalVariable = getValue();
// reactive 只對對象和數(shù)組起作用
const anotherReactiveVariable = reactive(externalVariable);

// Access directly
console.log(anotherReactiveVariable);

如果你還在使用 Vue2，你可以使用observable而不是reactive來實現(xiàn)完全相同的結(jié)果。

12、v-for 中的解構(gòu)

你知道可以在-vfor中使用解構(gòu)嗎？

  {{ name }}

更廣為人知的是，可以通過使用這樣的元組從v-for中取出索引。

  {{ index + 1 }} - {{ movie }}

當(dāng)使用一個對象時，可以這樣使用 key：

  {{ key }}: {{ value }}

也可以將這兩種方法結(jié)合起來，獲取key以及屬性的 index。

  #{{ index + 1 }}. {{ key }}: {{ value }}

13、在指定范圍內(nèi)循環(huán)

v-for指令允許我們遍歷數(shù)組，但它也允許我們遍歷一個范圍

渲染結(jié)果：

Item #1
Item #2
Item #3
Item #4
Item #5

當(dāng)我們使用帶范圍的v-for時，它將從1開始，以我們指定的數(shù)字結(jié)束。

14、監(jiān)聽你的組件中的任何東西

export default {
  computed: {
    someComputedProperty() {
      // Update the computed prop
    },
  },
  watch: {
    someComputedProperty() {
      // Do something when the computed prop is updated
    }
  }
};

我們可以監(jiān)聽：

• 計算屬性

• props

• 嵌套值

如果你使用組合API，任何值都可以被監(jiān)視，只要它是一個ref或reactive對象。

15、竊取 prop 類型

我從一個子組件中復(fù)制 prop 類型，只是為了在一個父組件中使用它們。但我發(fā)現(xiàn)，偷取這些 prop 類型要比僅僅復(fù)制它們好得多。

例如，我們在這個組件中使用了一個Icon組件。

為了讓它工作，我們需要添加正確的 prop 類型，從``Icon`組件復(fù)制。

import Icon from './Icon';
export default {
  components: { Icon },
  props: {
    iconType: {
      type: String,
      required: true,
    },
    iconSize: {
      type: String,
      default: 'medium',
      validator: size => [
        'small',
        'medium',
        'large',
        'x-large'
      ].includes(size),
    },
    iconColour: {
      type: String,
      default: 'black',
    },
    heading: {
      type: String,
      required: true,
    },
  },
};

多么痛苦啊。

當(dāng) Icon 組件的 prop類型被更新時，我們肯定會忘記返回這個組件并更新它們。隨著時間的推移，當(dāng)該組件的 prop類型開始偏離Icon組件中的 prop 類型時，就會引入錯誤。

因此，這就是為什么我們要竊取組件的 prop 類型：

import Icon from './Icon';
export default {
  components: { Icon },
  props: {
    ...Icon.props,
    heading: {
      type: String,
      required: true,
    },
  },
};

不需要再復(fù)雜了。

除了在我們的例子中，我們把 icon 加在每個 prop 名稱的開頭。所以我們必須做一些額外的工作來實現(xiàn)這一點。

import Icon from './Icon';

const iconProps = {};

Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key.toUpperCase()}`] = val;
});

export default {
  components: { Icon },
  props: {
    ...iconProps,
    heading: {
      type: String,
      required: true,
    },
  },
};

現(xiàn)在，如果Icon組件中的 prop 類型被修改，我們的組件將保持最新狀態(tài)。

但是，如果一個 prop 類型從 Icon 組件中被添加或刪除了呢？為了應(yīng)對這些情況，我們可以使用v-bind和一個計算的 prop 來保持動態(tài)。

16、檢測元素外部(或內(nèi)部)的單擊

有時我需要檢測一個點擊是發(fā)生在一個特定元素el的內(nèi)部還是外部。這就是我通常使用的方法。

window.addEventListener('mousedown', e => {
  // 獲取被點擊的元素
  const clickedEl = e.target;
  
  if (el.contains(clickedEl)) {
   //在 "el "里面點擊了
  } else {
   //在 "el "外點擊了
  }
});

17、遞歸插槽

有一次，我決定看看我是否可以只用模板來做一個v-for組件。在這個過程中，我也發(fā)現(xiàn)了如何遞歸地使用槽。

如果你想用作用域插槽來做這件事，只是需要一些調(diào)整

下面是這個組件的使用方法。

18、組件元數(shù)據(jù)

并不是添加到一個組件的每一點信息都是狀態(tài)。有時我們需要添加一些元數(shù)據(jù)，給其他組件提供更多信息。

例如，如果正在為谷歌 analytics這樣的分析儀表：

如果你想讓布局知道每個小組件應(yīng)該占多少列，你可以直接在組件上添加元數(shù)據(jù)。

export default {
  name: 'LiveUsersWidget',
  // ? 只需將其作為一個額外的屬性添加
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};

export default {
  name: 'LiveUsersWidget',
  // ?  只需將其作為一個額外的屬性添加
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};

你會發(fā)現(xiàn)這個元數(shù)據(jù)是組件上的一個屬性。

import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;

我們也可以通過特殊的$options屬性從組件內(nèi)部訪問元數(shù)據(jù)。

export default {
  name: 'LiveUsersWidget',
  columns: 3,
  created() {
    // ? `$options` contains all the metadata for a component
    console.log(`Using ${this.$options.metadata} columns`);
  },
};

只要記住，這個元數(shù)據(jù)對組件的每個實例都是一樣的，而且不是響應(yīng)式的。

這方面的其他用途包括（但不限于）：

• 保持單個組件的版本號

• 用于構(gòu)建工具的自定義標(biāo)志，以區(qū)別對待組件

• 在計算屬性、數(shù)據(jù)、watch 等之外為組件添加自定義功能

• 其它

19、多文件單文件組件

這是**SFC(單文件組件)**的一點已知功能。

可以像常規(guī)HTML文件一樣導(dǎo)入文件：

如果你需要分享樣式、文件或其他任何東西，這可能會非常方便。

20、可重復(fù)使用的組件并不是你所想的那樣

可重復(fù)使用的組件不一定是大的或復(fù)雜的東西。

我經(jīng)常讓小的和短的組件可以重復(fù)使用。

因為我沒有到處重寫這段代碼，所以更新它變得更加容易，而且我可以確保每個OverflowMenu的外觀和工作方式都完全一樣--因為它們是一樣的！"。

在這里，我們采用了一個菜單組件，但在觸發(fā)它的按鈕上添加了一個 ellipsis 圖標(biāo)。(省略號)的圖標(biāo)來觸發(fā)它的打開。

這似乎不值得把它做成一個可重復(fù)使用的組件，因為它只有幾行。難道我們就不能在每次要使用這樣的菜單時添加圖標(biāo)嗎？

但是這個OverflowMenu將被使用幾十次，現(xiàn)在如果我們想更新圖標(biāo)或它的行為，我們可以非常容易地做到。而且，使用它也更簡單了。

21、從組件外部調(diào)用一個方法

我們可以從一個組件的外部通過給它一個 ref 用來調(diào)用一個方法。

// Somewhere in Parent.vue
this.$refs.child.method();

再解釋一下這個問題。

有時候，“最佳實踐”并不適用于你正在做的事情，你需要一個像這樣的逃生口。

通常情況下，我們使用 props  和 events 在組件之間進(jìn)行交流。props 被下發(fā)到子組件中，而events 被上發(fā)到父組件中。

// Child.vue
export default {
  props: ['trigger'],
  watch: {
    shouldCallMethod(newVal) {
      if (newVal) {
        // Call the method when the trigger is set to `true`
        this.method();
      }
    }
  }
}

這可以正常工作，但只能在第一次調(diào)用時使用。如果您需要多次觸發(fā)此操作，則必須進(jìn)行清理并重置狀態(tài)。邏輯是這樣的

• 父組件將 true 傳遞給觸發(fā)器 prop

• Watch 被觸發(fā)，然后 Child 組件調(diào)用該方法

• 子組件發(fā)出一個事件，告訴父組件該方法已被成功觸發(fā)

• Parent組件將 trigger 重置為 false，所以我們可以從頭再來一次

相反，如果我們在子組件上設(shè)置一個 ref，我們可以直接調(diào)用該方法:

// Somewhere in Parent.vue
this.$refs.child.method();

是的，我們打破了 “props down, events up"” 的規(guī)則，我們打破了封裝，但是這樣做更清晰，更容易理解，所以是值得的

有時，"最好的 "解決方案最終會成為最糟糕的解決方案。

22、監(jiān)聽數(shù)組和對象

使用 watcher 最棘手的部分是，有時它似乎不能正確觸發(fā)。

通常，這是因為我們試圖監(jiān)聽數(shù)組或?qū)ο?，但沒有將deep設(shè)置為true

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    // 使用對象語法，而不僅僅是方法
    colours: {
      // 這將讓Vue知道要在數(shù)組內(nèi)部尋找
      deep: true,

      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

使用Vue 3的API會是這樣的:

watch(
  colours,
  () => {
    console.log('The list of colours has changed!');
  },
  {
    deep: true,
  }
);

23、用Vue Router進(jìn)行深度鏈接

我們可以在URL中存儲（一點）狀態(tài)，允許我們直接跳到頁面上的一個特定狀態(tài)。

例如，你加載一個已經(jīng)選擇了日期范圍過濾器的頁面：

someurl.com/edit?date-range=last-week

這對于應(yīng)用中用戶可能共享大量鏈接的部分來說是非常棒的，對于服務(wù)器渲染的應(yīng)用，或者在兩個獨立的應(yīng)用之間通信的信息比普通鏈接通常提供的更多。

我們可以存儲過濾器、搜索值、模態(tài)框是打開還是關(guān)閉，或者在列表的哪個位置滾動以完美地實現(xiàn)無限分頁。

使用 vue-router 獲取查詢參數(shù)是這樣工作的(這也適用于大多數(shù)Vue框架，如Nuxt和Vuepress)：

const dateRange = this.$route.query.dateRange;

為了改變它，我們使用 RouterLink 組件并更新 query。

24、template 標(biāo)簽的另一個用途

template 標(biāo)簽可以在模板中的任何地方使用，以更好地組織代碼。

我喜歡用它來簡化v-if邏輯，有時也用v-for。

在這個例子中，我們有幾個元素都使用同一個v-if條件。

這有點笨拙，而且一開始并不明顯，一堆這樣的元素被顯示和隱藏在一起。在一個更大、更復(fù)雜的組件上，這可能是一個更糟糕的情況

但我們能優(yōu)化它。

我們可以使用 template 標(biāo)簽來分組這些元素，并將 v-if 提升到模板 template  本身。

現(xiàn)在看起來就更容易理解，而且它在做什么，一目了然。

25、處理錯誤（和警告）的更好方法

我們可以為Vue中的錯誤和警告提供一個自定義處理程序。

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};

像 Bugsnag 和 Rollbar 這樣的錯誤跟蹤服務(wù)，可以鉤住這些處理程序來記錄錯誤，但你也可以用它們來更優(yōu)雅地處理錯誤，以獲得更好的用戶體驗。

例如，如果一個錯誤未被處理，應(yīng)用程序不會直接崩潰，你可以顯示一個完整的錯誤屏幕，讓用戶刷新或嘗試其他東西。

在 Vue3 中，錯誤處理程序只能處理 template 和 watcher 錯誤，但是 Vue2的錯誤處理程序可以捕獲幾乎所有錯誤。這兩個版本中的警告處理程序只在開發(fā)階段有效。

關(guān)于“Vue使用的技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。