[TOC]
Vue.js 基礎(chǔ)部分包括
- Vue.js的組成 （template, script,style）
- 模板語法（文本屬性）连锯、渲染條件v-if 、列表渲染v-for
- 事件處理v-on (@簡(jiǎn)寫)卷要、計(jì)算屬性computed
Vue.js 核心組件
- 路由組件 vue-router
- 單項(xiàng)數(shù)據(jù)流 狀態(tài)管理Vuex
Vue.js 基礎(chǔ)
模板語法
Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)名段。
結(jié)合響應(yīng)系統(tǒng)先馆，在應(yīng)用狀態(tài)改變時(shí)发框， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。
所有語言的模版語法煤墙，基本上都是在追求：讓你你用個(gè)大括號(hào){{data}}就可以把數(shù)據(jù)展示在頁面上梅惯。
文本插值
<div class="home">{{msg}}</div>
<script>
export default {
name: 'home',
data () {
return {
msg: 'hello world'
}
}
}
</script>
條件語句 v -if
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
<p v-slse>現(xiàn)在你看到我了2</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
這里， v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來決定是否插入 p 元素,
為true時(shí)插入仿野。
可以用 v-else 指令給 v-if 添加一個(gè) "else" 塊铣减，跟if 塊的邏輯相反。
我們也可以用 v-show 語句展示隱藏元素脚作。
<h1 v-show="seen">Hello!</h1>
相同點(diǎn)：v-if與v-show都可以動(dòng)態(tài)控制dom元素顯示隱藏
不同點(diǎn)：v-if顯示隱藏是將dom元素整個(gè)添加或刪除葫哗，而v-show隱藏則是為該元素添加css--display:none，dom元素還在球涛。
表單form-雙向事件綁定v-model
你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定劣针。
這樣輸入的數(shù)據(jù)和data的數(shù)據(jù)可以同時(shí)，動(dòng)態(tài)的更新亿扁。
<form v-if="isShow">
<div class="item">
菜品名稱
<input type="text" v-model="unit.name" />
</div>
</form>
<script>
export default {
data () {
return {
msg: 'hello world',
isShow: true,
unit: {
name: ''
}
}
}
</script>
復(fù)選框雙向綁定
<div id="app">
<p>單個(gè)復(fù)選框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多個(gè)復(fù)選框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>選擇的值為: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
</body>
核心組件
路由
我們需要一個(gè)vue router庫捺典，利用路由實(shí)現(xiàn)一個(gè)單頁面應(yīng)用。
Runnoob Eg ：
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導(dǎo)航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
Js
// 0. 如果使用模塊化機(jī)制編程从祝，導(dǎo)入 Vue 和 VueRouter襟己，要調(diào)用 Vue.use(VueRouter)
// 1. 定義（路由）組件引谜。
// 可以從其他文件 import 進(jìn)來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器擎浴，
// 或者员咽，只是一個(gè)組件配置對(duì)象。
// 我們晚點(diǎn)再討論嵌套路由贮预。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 創(chuàng)建 router 實(shí)例贝室，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡(jiǎn)單著吧。
const router = new VueRouter({
routes // （縮寫）相當(dāng)于 routes: routes
})
// 4. 創(chuàng)建和掛載根實(shí)例萌狂。
// 記得要通過 router 配置參數(shù)注入路由档玻，
// 從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 現(xiàn)在驹碍，應(yīng)用已經(jīng)啟動(dòng)了初嘹！
Vue - cli項(xiàng)目中，我們的router路由配置文件通常在定義在 router.js或者router/index.js 文件中
router/index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Order from '@/views/Order.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/order',
name: 'order',
component: Order
}
]
const router = new VueRouter({
routes
})
export default router
Main.js初始化
import Vue from 'vue'
import router from '@/router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式
這個(gè)狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分：
- state蓬抄，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源务傲；
- view凉当，以聲明方式將 state 映射到視圖；
- actions售葡，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化看杭。
狀態(tài)管理（組件傳參）
在vue-cli中，store文件（處理/存儲(chǔ)/傳遞狀態(tài)）位于store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// vuex 維護(hù)的數(shù)據(jù)
lists: []
},
mutations: {
// 組件存數(shù)據(jù)
setList (state, value) {
state.lists = value
}
}
})
在main.js中初始化
import Vue from 'vue'
import App from '@/App.vue'
import store from '@/store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
在組件1中用store存狀態(tài)（數(shù)據(jù)）
export default {
mounted () {
// 重新初始化的時(shí)候挟伙，會(huì)重新賦值楼雹，這時(shí)候通過vuex取值
this.lists = this.$store.state.lists
},
methods: {
add () {
// 添加unit到sotre中的lists中去
this.$store.commit('setList', this.lists)
}
}
}
在組件2從store的存儲(chǔ)取狀態(tài)（數(shù)據(jù)）
export default {
name: 'order',
data () {
return {
// 取vuex 中的數(shù)據(jù)
lists: this.$store.state.lists
}
},
methods: {
minus (item, index) {
item.num--
// vue可以監(jiān)聽 某個(gè)對(duì)象的變化，而不會(huì)監(jiān)聽某個(gè)屬性的變化尖阔，所以需要用set方法
this.$set(this.lists, index, item)
}
}
}
}
</script>
組件之間傳遞值
-
單向數(shù)據(jù)流最基本的傳參方式
在父組件中贮缅，使用component引用子組件，然后使用props屬性： <child-component :property="data"></child-component> -
組件間通信的狀態(tài)管理Vuex介却，可以完成組件間的數(shù)據(jù)通信及狀態(tài)管理谴供。需要注意的是，vuex中的狀態(tài)只能通過mutations進(jìn)行改變
使用Vuex狀態(tài)管理進(jìn)行父子組件通信齿坷，定義store.js桂肌，并定義state，在state中定義傳遞的屬性比如叫childProperty永淌。然后崎场，在子組件中，使用store.state.childProperty進(jìn)行使用遂蛀。 -
vue-router中組件傳參https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F
使用router中的Params進(jìn)行傳參（即路徑傳參） 設(shè)置路由/child/:id照雁，當(dāng)訪問到/child/1元素的時(shí)候，在子組件中，使用this.$route.params.id的方式進(jìn)行使用
懶加載新組件
新建組件newComponent.vue饺蚊，并且在router.js中添加路由/new路徑，那么創(chuàng)建路由后悬嗓，如何配置和使用懶加載進(jìn)行頁面優(yōu)化污呼？
引用組件后，使用import進(jìn)行懶加載包竹，定義webpackChunkName燕酷，
{path: '/new', components: () => import( /*webpackChunkName: 'new'*/'@/components/newComponent')}
配置了webpackChunkName，可以在router.js頭部周瞎，按照如下方式進(jìn)行引用：
const NewComponent = () => import( '@/components/newComponent')
然后配置router.js中的路由：{path: '/new', components: NewComponent}
注意路徑與單詞的拼寫錯(cuò)誤問題
計(jì)算屬性computed
computed和watch方法最大的區(qū)別：
computed監(jiān)視了所有的方法體內(nèi)實(shí)例的屬性變化苗缩。
計(jì)算屬性緩存和方法Methods的區(qū)別：
computed是會(huì)自動(dòng)觸發(fā)的，是一種響應(yīng)式的声诸。
Methods中的方法需要我們執(zhí)行這個(gè)方法酱讶。
如果data中的屬性中包裹的是computed中的方法，那么data中就會(huì)獲得一個(gè)被實(shí)時(shí)監(jiān)控的屬性彼乌。
Lodash依賴
https://www.lodashjs.com/
安裝 （安裝到開發(fā)環(huán)境）
npm install lodash -S
Eg：
過濾
import _ from 'lodash'
export default {
mounted () {
const aar = _.filter([1, 2, 3], (item) => item > 1)
console.log(aar)
}
}
Result : aar是 大于 1的數(shù)泻肯。
(2) [2, 3]
0: 2
1: 3
length: 2
Ps 插播： Eslint 格式化保存報(bào)錯(cuò)問題
Eslint 格式化保存報(bào)錯(cuò)問題
Vs code
: 首選項(xiàng)/setting
打開 setting.json
修改
"editor.formatOnSave": false,
