vue 主要是用來干什么的?
數(shù)據(jù)和視圖的雙向綁定.
vue 全家桶(常用)
- vue.js
- vue-cli 快速構(gòu)建 vue 項(xiàng)目
- vue-devtools 開發(fā)調(diào)試
- vue-router 路由管理
- vuex 狀態(tài)管理
- vue-server-renderer 服務(wù)端渲染
- element-UI UI 庫(kù)
vue 基本使用
// vue 表達(dá)式 {{}}
const vm = new Vue({
el: "#root", // 掛載的元素
data: {
// 數(shù)據(jù)
name: "cherries"
},
methods: {
// 方法
add(n1, n2) {
return n1 + n2;
}
}
});
vue 指令
| 指令名稱 |
用法(簡(jiǎn)寫) |
解釋 |
| v-bind |
v-bind:title(:title) |
單向綁定數(shù)據(jù) 數(shù)據(jù) -> 視圖 |
| v-model |
v-model="name" |
雙向綁定數(shù)據(jù) 數(shù)據(jù) <=> 視圖 |
| v-text |
v-text="name" |
輸出文字 |
| v-html |
v-html="<span>你好</span>" |
輸出 html |
| v-for |
<div v-for="(item, index) in arr" :key="item.id"></div> |
循環(huán)遍歷,遍歷的每個(gè)元素需要添加一個(gè)唯一的 key |
| v-if v-else-if v-else |
v-if="isShow" |
是否渲染 dom 是否渲染 |
| v-show |
v-show="isShow" |
是否顯示 樣式 |
| v-on |
v-on:click="fn"(@click="fn") |
用來調(diào)用方法 |
| v-cloak |
<div v-cloak></div> |
優(yōu)化顯示, 遮蔽 vue 編譯時(shí)的顯示 |
| v-once |
<div v-once></div> |
vue 只編譯一次, 提高性能 |
| v-pre |
<div v-pre></div> |
預(yù)編譯, vue 不編譯里面的內(nèi)容, 提高性能 |
| v-solt |
<template v-solt="header"></template>(#header) |
具名插槽 |
事件修飾符----------給事件添加功能(常用)
- .stop 停止冒泡
- .prevent 阻止默認(rèn)事件
- .self 不接收冒泡事件
- .once 單次事件
視圖不更新的問題----------可使用 vm.$set(obj, key, value) vm.$delete(obj, key)
- 對(duì)象添加、刪除
- 數(shù)組不能通過長(zhǎng)度修改 也不能通過數(shù)組的索引進(jìn)行修改
- Object.assign(obj1, obj2)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
