Vue 学习笔记

一、路由

1、安装vue-router

npm install vue-router --save-dev

2、引入并使用

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

3、定义路由映射

const router = new Router({
  routes:[
    {path: '路由',name:'路由别名',component:组件名称},    // 定义路由地址映射到对应的组件
    {path: '路由',name:'路由别名',component:组件名称}
  ],
    mode: "history"       // 去除路由上的 #
});

4、示例中引入router

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5、嵌套路由（次级路由需在其父级页面放置router-view组件）

export default new Router({
  routes:[
    {path: '路由',name:'路由别名',component:组件名称,children:[    // 一级路由
            {path: '路由',name:"路由别名",component:组件名称},    // 二级路由
            {path: '路由',name:"路由别名",component:组件名称，children:[     // 二级路由
                {path: '路由',name:"路由别名",component:组件名称}    // 三级路由
            ]},
      ]},
  ]
});

6、动态路由

以冒号开头定义动态参数名称，如（定义了一个动态参数为id的路由）：

new Router({
  routes:[
    {path:'index/:id',name:"路由别名",component:组件名称}
  ]
});

还可以通过以下方法在目标组件进行接收参数：

this.$route.params.id

 

二、路由跳转

跳转方式有链接式、声明式、编程式

1、链接式跳转：

使用router-link标签，to属性声明路径：

<router-link to="/">点击我跳转</router-link>

2、编程式跳转：

使用router模块的push方法

this.$router.push({path: '/'}) 

this.$router.push({name: 'name'})      // 需要事先定义路由

3、声明式：

在router-link标签的to属性中绑定参数对象：

<router-link :to="{path: '/'}">点击跳转</router-link>

 <router-link :to="{name: 'name'}">点击跳转</router-link>

 

三、路由传值

通过路由传参，目标页面接收参数

1、传递参数：

声明式跳转方式传递（query）：

<router-link :to="{path: '/', query:{id: 'abc'}}">点击跳转</router-link>
<router-link :to="{name: 'name', params:{id: 'abc'}}">点击跳转</router-link>

编程式跳转方式传递（params）：

this.$router.push({path: '/',query:{id: 'abc'}})
this.$router.push({name: 'name',params:{id: 'abc'}})

注意：path跳转只能使用query传递参数，name跳转方式可以使用query、params传参。

Tips:  query方式传递会在url上暴露参数

2、接收参数：

使用什么方式就需要什么方式接收

path跳转对应的接收参数方式：

this.$route.query.name

name方式跳转对应的接收参数方式：

this.$route.params.name

 

四、组件传值

1、父组件向子组件传值

传递：在父组件与子组件的契合节点中绑定参数：

<tagName v-bind:定义接收时的名称="需要传递的参数"></tagName>

接收：在实例中接收定义的参数：

props: ["父组件传递时定义的名称"]

2、子组件向父组件传值

传递：子组件中注册一个事件，并且带上需要传递的参数

 this.$emit("事件名称","传递的参数");

接收：父组件与子组件的契合节点绑定事件，并且通过形参：$event去接收：

<tagName v-on:事件名称="父组件中要触发的方法($event)"></tagName>

3、兄弟组件传值

兄弟组件间传值有三种方式：

• 子组件A  -->  父组件  -->  子组件B
• 使用vuex状态管理器
• 使用全局vuex方式（全局状态管理器）

这里记录全局bus方式：

声明一个全局的Vue实例：

const bus = new Vue();

组件A中绑定事件：

bus.$on("send",function (data) {
    console.log(data)    // 这是发送的值
})

组件B的方法中触发事件：

bus.$emit("send","这是发送的值")

 

五、Vuex状态管理器

集中式状态管理器，组件之间数据共享。

1、安装 vuex:

npm install vuex --save-dev

2、新建一个js文件：

3、引入：vue,vuex

import Vue from "vue"
import Vuex from "vuex"

4、注册vuex:

Vue.use(Vuex);

5、创建vuex.store实例：实例对象一般包含：state,getters,mutations,actions

附完整实例：

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

const moduleA = {
  state:{
    name:'想着想着就忘了'
  },
}

export default new Vuex.Store({
  state:{
    storeName:"第一个vuex"
  },
  getters:{
    storeName(state){
      return state.storeName+"2";
    }
  },
  mutations:{
    change:(state,text)=>{
      state.storeName = text.text2
    }
  },
  actions:{
    change:(context)=>{
      setTimeout(function () {
        context.commit('change',{    // 触发的是muations下的change方法
          text:"附加的参数",
          text2:'参数2'
        })
      },3000)

    }
  },
  modules:{
    a:moduleA
  }
});

6、组件中获取数据：

引入文件：

import store from '文件路径'

输出数据：

console.log(store.state.name)    // 想着想着就忘了
console.log(store.getters.storeName)    // 想着想着就忘了2

6、mutations

类似于事件，用于更改状态

mutations方法：接收state为第一个参数，第二个往后为接收调用时的传递的参数

mutations:{
  change:(state,text)=>{
    state.storeName = text.text2
  }
},

调用mutations:

state.commit('mutaionsName',parm)    // parm可以是一个对象，parm是一个对象时,mutations方法需要接收对象使用
或
state.commit({type:'mutationsName',parm1:"1",parm2:"2",})  // 整体为一个对象，对象中第一个参数为方法名，第二往后为传参的参数

7、actions

action 类似于 mutation

不同在于：
action 提交的是 mutation，而不是直接变更状态。
action 可以包含任意异步操作。

actions的方法接收一个context参数，可通过 context.commit('mutationName')触发mutation,也可以通过context.state和context.getters获取数据。

 actions:{
    change:(context)=>{
      setTimeout(function () {
        context.commit('change',{
          text:"附加的参数",
          text2:'参数2'
        })
      },3000)

    }
  },

actions的调用：分发actions去触发。

store.dispatch('actionName')

8、store模块化

模块化有助于管理、维护。

const moduleA = {
  state:{
    name:'想着想着就忘了'
  },
}

在实例中加入模块

modules:{
    a:moduleA
}

 

六、使用less

1、安装 less  less-loader

npm install less less-loader -S

2、配置 webpack.base.conf.js（似乎vue2.x/3.x版本后可以不配置正常使用）

module: {
    rules: [
         ...
         ...
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },
    ]
  }

3、使用，添加lang元素，属性less

<style lang="less">
	
</style>

tips：如若发生报错如：loaderContext.getResolve is not a function...

可能是版本问题，推荐一个搭配版本 less@3.9.0  less-loader@5.0.0

 

七：使用sass

1、安装 node-sass sass-loader 到开发依赖

npm install node-sass sass-loader -D

2、配置 webpack.base.conf.js （似乎vue2.x/3.x版本后可以不配置正常使用）

module: {
    rules: [
         ...
         ...
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }

3、使用

<style lang="sass">
	
</style>

tips：如若发生报错如：loaderContext.getResolve is not a function...

可能是版本问题，推荐一个搭配版本   "node-sass": "^4.14.1",    "sass-loader": "^7.3.1",

 

八、使用stylus

1、安装所需的插件 stylus、stylus-loader 到开发依赖环境。

npm install stylus stylus-loader -D

2、配置（似乎vue2.x/3.x版本后可以不配置正常使用）

// webpack.config.js -> module.rules
{
  test: /\.styl(us)?$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
  ]
}

3、使用

<style lang="stylus">
       ...编写stylus
</style>

查看更多更官方的预处理使用方法可查看  vue-loader - 使用预编译处理器

 

 

 

注：个人学习笔记非标准答案，不喜勿喷！