vue基础

模版语法

文本(输出变量)

Message:{{msg}}

原始HTML(输出html标签)

特性(添加变量id名)

表达式(必须是一句话，且必须有返回值)

{{number+1}}
{{ok?'yse':'no'}}
{{message.split('').reverse().join('')}}

指令

现咋子你看到我了

修饰符(prevent阻止默认行为，如跳转)

...

缩写

...
...
-------------------------------------
...
...

自定义指令

1.新建n.js

import Vue from 'vue'
Vue.directive('n',{
  bind:function(el,binding){
    el.textContent = Math.pow(binding.value,2)
  },
update:function(el,binding){
    el.textContent = Math.pow(binding.value,2)
  }
})

2.需要使用的地方在 子组件com.vue通过 props:['age'] //接收 模版就可以输出{{age}}

slot

插槽在组件抽象设计中的应用(定义好了，插槽，留一个位置 )

//App.vue文件

  
我要加东西2


//com.vue

就是动态往子组件里面塞了东西,子组件本身没这个东西，是父组件这边添加的，就可以动态显示和隐藏东西的作用,可以让组件更加灵活，把组件无限的抽象

自定义事件

父子组建的通信方式(子组件向父组件传递，就要靠自定义事件触发)

//子组件com.vue
发送到父组件
//父组件App.vue


import com from './components/com.vue'

methods:{
  msg:function(){
    console.log('msg')
  }
}

如果跨组件通信，就要用到vuex

路由基础

vue-router基础

必备三步
安装vue-router
新建router.js和main.js平级
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import pageA from './pages/a.vue'
import pageB from './pages/b.vue'

const routes = [
  {
    path:'/pagea',
    component:pageA
  },
  {
    path:'/pageb',
    component:pageB
  },
]

const router = new VueRouter({
  routes //经过VueRouter实例化
})
//把这个对象导出
export default router

-------------------------------------
还要在main.js中关联起来
import router from './router'

new Vue({
  router
}).$mount('#app')

创建vue.config.js
在脚手架官网搜索runtime

module.exports = {
  runtimeCompiler:true
}

还要在App.vue文件中插入这个节点才可以显示，默认页面是/,需要在path:"/'配置一下

   //其实就是路由切换就替换这里的组件

如果是默认安装好，安装路由会出错，需要配置一下

router-link传参数

User

Vuex基础

image.png

流程图解析
1.vue模版可以Render一个数据
2.vue模版可以接受用户的交互行为，来触发这个Dispatch
3.Actions去做提交Commit找到这个对应的这个数据交互内容，对这个数据进行改版
4.最后使State数据改变
5.Vue.Components数据进行更新

State是数据的来源
Mutations是提供操作数据(如何改变)
Actions什么时候去做这个改变数据行为

如果使用

1.安装npm i vuex
2.新建store.js和main.js同级

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({
  store
}).$mount('#app')

传参数的写法

image.png

image.png