vue相关总结

vue文件模板

<template>
  <div id="app">
  </div>
</template>

<script>
import A form './A.vue'
export default {
  name: 'App',// 组件名字！
 -------------------------------- 
  components: {
   		 // 自定义组件注册！
   	 A:A,
	},
 -------------------------------- 
  props: {
        //外部组件传来的参数！
        外部组件传递时的参数名：{}
    },
 -------------------------------- 
  data(){
        return({
            //本组件中的变量！
        })
	},
 -------------------------------- 
  computed: {
      //计算属性，依赖并监听data中的变量变化！
    变量名() {
      return this.data 
    }
  },
 -------------------------------- 
  methods(){
      //本组件中用到的方法！
  },
 -------------------------------- 
  watch: {//监听data/computed等属性值改变！
  	"要监听的属性名（简单数据类型）"(newVal, oldVal){
      // 
      console.log(newVal, oldVal);
    },
	"要监听的属性名（复杂数据类型）": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化，默认监听简单数据类						型变化
        handler (newVal, oldVal) {
            console.log(newVal, oldVal);
        }
    } 
----------------------------------
     filters: { // 3. 局部过滤器: 只能在当前的vue文件中使用
          reverse(val) {
            return val.split("").reverse().join("");
          },
     }
 ----------------------------------
 '六个生命周期函数(钩子函数-->寓意自定义执行)'
}
</script>

---

全局注册（多个注册）

import * as filters from '@/filters'
console.log('过滤器：', filters)
Object.keys(filters).forEach(key => {
  Vue.directive(key, directives[key])
}

路由Router

​ 可以模块化

const createRouter = () => new Router({
  routes: [
      {path:xxx,component:xxx,children:[]},
      ...
  ]
})

路由导航

• 链接导航:在dom元素里跳转
• 编程导航:在js里跳转this.$router.push(’’)

路由传参

看地址栏分类

• path?参数名=‘参数值’

  链接传参：

  <router-link to="/goods?name=外套">外套</router-link>
  

  编程传参:

  this.$router.push({
      path: "路由路径",
      query: {
          "参数名":值
      }
  })
  

  接受: $route.query.参数名

• path/参数值(在路由配置里的path写明/:参数名)

  链接传参：

  <router-link to="/goods/123">详情</router-link>
  

  编程传参:

  this.$router.push({
      path: "路由路径或路由名",
  })
  

  接受方法:

  方法一： $route.params.参数名

  方法二：

  ①需要在路由配置里添加 props: true

  ②接受组件的props属性要接受传来的参数

  ③这样就可以在接受组件中当变量用了

路由守卫

---

数据共享vuex

模块化开发

//A.js
export default {
  namespaced: true,
  // 存储和定义用户数据
  state: {
      
  },
  // 修改state中的数据（同步）
  mutations: {

  },

  // 获取后台数据（异步）
  actions: {
      
  }
}

//B.js
export default {
  namespaced: true,
  // 存储和定义用户数据
  state: {
      
  },
  // 修改state中的数据（同步）
  mutations: {

  },

  // 获取后台数据（异步）
  actions: {
      
  }
}

//getters.js
const getters = {
  name: state => state.A.name,
  age: state => state.B.age
  }

import Vue from 'vue'
import Vuex from 'vuex'
// 导入其他模块的vuex数据
import getters from './getters'
import A from './A'
import B from './B'
Vue.use(Vuex)
// 初始化vuex=》得到一个vuex实列
const store = new Vuex.Store({
  // 挂载子模块
  modules: {
	A,
	B
  },
  // 快捷访问=》方便获取字模块的state数据
  getters
})

---

请求与相应

封装api接口

封装请求与响应拦截器

在拦截器（js文件）中，使用store和router对象要先导入

---

两大关卡线

网络数据请求关卡----拦截器

由ajax、store、router组成的js文件=>做请求配置统一处理(比如请求接口根路径、加token)、token过期处理、响应结果预处理

关卡点：请求拦截器和相应拦截器（request.js ）

import axios from 'axios' // 导入第三方ajax包（异步 JavaScript 和 xml）
const service = axios.create({
  baseURL: '请求接口根路径'
  timeout: 5000 // 超时时间
})
//请求拦截器
service.interceptors.request.use(
   config => {
    console.log(config)
    return config
  },
   error => {
    console.log(error)
    return Promise.reject(error)
  })
//响应拦截器
service.interceptors.response.use(
   response => {
    console.log(response)
    return '返回处理后的数据=>返回的结果将传递给接口调用的地方'
  },
   error => {
    console.dir(error)
    return Promise.reject(error)
  })

页面跳转关卡----路由守卫

由store、router组成的js文件=>做权限管理（permission.js）

关卡点：前置守卫

router.beforeEach((to, from, next)=>{})

插槽

插槽作用域

1. 普通插槽渲染的位置是在它的父组件里面，而不是在子组件里面
2. 作用域插槽渲染是在子组件里面

插槽与自定义组件的区别：

插槽是引入自定义组件内使用,临时写的dom结构，没有封装到.vue文件中

插槽格式：<自定义组件>插槽</自定义组件>

默认插槽

<!--子Pannel.vue-->
<template>
  <div>
	<p>xxx</p>
    <p>xxx</p>
    <slot></slot>
    <p>xxx</p>
    <p>xxx</p>
  </div>
</template>

<!--父-->
<template>
  <div>
	<div>xxx</div>
    <Pannel>
        <!--这里写插槽 start-->
            <template>
                <div>xxx</div>
            </template>
        <!--这里写插槽 end-->
    </Pannel>
  </div>
</template>

---

具名插槽

<!--子Pannel.vue-->
<template>
  <div>
	<p>xxx</p>
    <p>xxx</p>
    <slot name='s1'></slot>
    <p>xxx</p>
    <p>xxx</p>
  </div>
</template>

<!--父-->
<template>
  <div>
	<div>xxx</div>
    <Pannel>
        <!--这里写插槽 start-->
        		<!-- '#名字' 是 'v-slot:名字' 的简写 -->
            <template #s1>
                <div>xxx</div>
            </template>
        <!--这里写插槽 end-->
    </Pannel>
  </div>
</template>

---

作用域插槽（实质是传参）

1，父组件传递list数组给子组件
2，子组件接收list数组，用v-for取出里面的每一个对象后，又传递给父组件。
3，父组件接收每一个对象，并存储在

<!--子Pannel.vue-->
<template>
  <div>
	<p>xxx</p>
    <p>xxx</p>
    <slot name='s1' ：data=‘变量’></slot>
    <p>xxx</p>
    <p>xxx</p>
  </div>
</template>

<!--父-->
<template>
  <div>
	<div>xxx</div>
    <Pannel>
        <!--这里写插槽 start-->
        		<!-- '#名字' 是 'v-slot:名字' 的简写 -->
            <template #s1=‘obj’>
                <div>xxx{{obj.data}}</div>
            </template>
        <!--这里写插槽 end-->
    </Pannel>
  </div>
</template>

解惑

必要场景（遍历）:

既然数据在父组件中，为啥要传给子组件，又要子组件传回来。不麻烦吗？不是有病吗？？？
这是因为，列表的渲染是需要子组件利用v-for进行的！所以子组件需要获取数据。
而父组件中插槽位置处添加的html结构，又需要使用到对应的信息，所以数据又得从子组件处传递回来。
那为什么不直接使用父组件中的数据呢？
当然是可以的，但这样一来，组件化开发不复存在

---

心得:

vue由2个关卡线、一套模板、一块共享域、一份路线图控制（待添加）

• 2个关卡线：
  • 网络数据请求关卡线===>请求响应拦截器
  • 页面跳转关卡线===>路由守卫
• 一套模板
  • vue文件模板
• 一块共享域
  • vuex共享（信息共享）
• 一份路线图
  • 路由配置

未完待续。。。