一、
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'
])
}