《Vue全家桶+SSR+Koa2全棧開發美團網》學習筆記
一、
1.vue 3版本的安裝
npm install -g @vue/cli
2.查看版本號
vue -V
3. 創建項目
vue create vue-learn
cd vue-learn
npm run serve
4.創建文件
cd vue-learn/
touch src/components/n.js
import Vue form ‘vue‘
Vue.directive(‘n‘,{
bind:function( el,binding ){
el.textContent = Math.pow( binding.vue,2 )
},
update:function( el,binding ){
el.textContent = Math.pow( binding.vue,2 )
}
})
5.計算屬性
6.條件&列表渲染
7.事件處理
二、組件
1.子組件 $emit(‘patch‘,34)
2.父組件監聽 @patch
npm install vue-router
import Vue form ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
cd src/
mkdir pages
touch pages/a.vue
touch pages/b.vue
const routes = [
{
path:‘pagea,
component:pageA
}
]
const router = new VueRouter({
routes
})
export default router
import router form ‘./router‘
在項目主目錄下建立vue.config.js文件，裏面內容如下：
module.exports = {
runtimeCompiler:true
}
三、vuex基礎
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
const state = {
count:1
}
const mutations = {
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
const actions = {
increment:({commit})=>{
commit(‘increment‘)
},
decrement:({commit})=>{
commit(‘decrement‘)
}
}
export default new Vuex.Store({state,mutations,actions})
在main.js中添加以下代碼
import store from ‘./store‘
new Vue({
render : h => h(App)
store
}).$mount(‘#app‘)
在組件中使用
{{$store.state.count}}
import { mapAction } from ‘vuex‘
export default {
methods:mapAction([
‘increment‘,
‘decrement‘
])
}
《Vue全家桶+SSR+Koa2全棧開發美團網》學習筆記