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)
