Vue2隨筆-251027
一. Vue開發模式
1. html腳本導入vue.js核心包，局部模塊改造。
樣例：
<body>
<div id="app">
{{ msg }}
<div v-html="inerH"></div>
</div>
</body>
<script src=".\vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "Hello World",
inerH: "<a href='' >百度</a>"
}
})
</script>
2. 核心包 & vue插件 工程化開發，項目化開發
vuex狀態管理、vueRouter路由、webpack/vite項目構建。
二. Vue指令
| 指令 | 概括 |
|---|---|
{{ msg }} |
插值語法，動態渲染自定義屬性值到頁面。注意，無法渲染到標簽屬性 |
v-html |
直接將HTML代碼插入到頁面中渲染。注意：如果數據中包含惡意腳本或標簽，可能會導致XSS（跨站腳本攻擊）漏洞。因此，確保數據的來源是可信任的，避免使用用戶提交的內容。 |
v-if、 v-else、v-else-if |
三個指令通常結合使用，根據if指令對應表達式的值，有條件的渲染DOM對象。 |
v-show |
根據表達式的值，有條件地通過css屬的display:none顯示和隱藏DOM對象。 |
v-on |
綁定標簽事件。語法糖是@，如v-on:click="fn"=@click="fn"，通過Vue實例的methods的自定義方法，完成事件處理。 |
v-bind |
綁定標簽屬性。語法糖是:，如v-bind:src="imgUrl"=:src="imgUrl"，通過Vue實例的data自定義屬性，完成標簽屬性的綁定。 |
v-for |
根據自定義集合等可遍歷屬性，對標簽進行動態渲染，如"v-for=(item,index) in arr" :key="item.id"。其中index可省略，則遍歷元素。:key唯一標識渲染對象，對DOM進行刪除時，如果未標識:key，則不是進行定點刪除，而是從底部減少項后，重新渲染剩余元素到頁面。 |
v-model |
綁定表單標簽，接受自定義屬性名，雙向綁定表單框內容和自定義屬性內容。 |
methods中，訪問自定義屬性需要使用this.prop或<Vue實例名>.prop，模板語句可以直接訪問自定義屬性上下文
浙公網安備 33010602011771號