二十三 Vue2.5实战模版语法组件化

vue创建项目提示脚本错误： https://blog.csdn.net/qq_45164496/article/details/102170303

new  Vue({})    // vue的入口，， 顶级的父元素

Vew.component()   // 新建全局组件,不用import

export default{} // 单文件组件对外暴露的内容


- 

- **promise  ==》 async await**

  ```javascript
  //promise写法
    axios.get('api/goods').then((response)=>{
        console.log(response);
        this.goods= response.data.list;
      }).catch(()=>{
        
      })
  //console.log('我是请求后面的内容!');      //先执行这句， 后输出response
  
  
  
   //改为async   await  同步写法,  错误处理用普通的try catch
  async created(){
       try{
        //console.log('开始请求');
        const res = await axios.get('/api/goods')
        //console.log(res);
        this.goods = res.data.list;
      }
      catch(e){
  
      }
      //console.log('我是请求后面的内容!');   // 从上到下按顺序执行
  }

二十四 Vue2.5实战UI组件库定制组件

form form-item input组件的定制
props既可以是数组，也可以是对象：猜测应该是通过获取属性时调用方式是一样的吧， props属性为单值时用数组，props属性为对象时，props用对象
provide既可以是函数，也可以是对象：猜测函数时相当于同名字段属性（应该就是get属性吧，注意不是方法，方法都放在method中），要有返回值return 一个对象
props传递的数据不能修改，需要赋值给组件中的变量，然后是修改使用
单向数据流：通过props传递的值，得通过父元素修改，再传给自己
自定义组件 实现v-model 需要实现两方面，组件中接受value, 组件修改值后派发input事件，修改传递的外部value ，，具体看 k-input的实现

* 实现v-model: 
<!--
    v-model 等价于
    :value="valuetext" @input="valuetext=$event"
    -->

provide inject 和props 对比

provide(){
  return {
    form: this    // 给子级提供form实例 ，子级注入使用form实例；  体会provide inject和props的区别 , provide inject封装在组件内部，是一般底层开发控件时用到的，开发用到所以必须得提供给下级，而props是在外部，使用该控件时可选择性的输入属性，一个是开发必须，”偷偷摸摸“，一个是可选择，正大光明；一个面向底层实现，一个面向用户使用；； 如果是强制用props开发，会造成用户使用时得强制传入一个固定的输入属性，用于底层的实现，，这样用户体验不好，能底层默认实现的，就直接提供注入就好了
  }
}

二十五 Vue2.5实战 Vuex单向数据流 Vue-router单页应用

单页应用： spa 路由的控制权在前端
路由哈希模式/history模式：

哈希： http://localhost:8080/#/page1 不利于seo, 认为是一个页面，因为 # 一般用于页面内部跳转

history：http://localhost:8080/page1

Use history mode for router? (Requires proper server setup for index fallback in production)

history部署时要和后台 index ？？？ todo ,, vue是前台控制路由，打包后只有一个index文件作为路口
查看源码：比如 view-source:http://localhost:8080/dashboard/page1 ，发现无论哪个路由都是这一个文件，后台需要根据这个文件配置；；

routerLink和href

routerLink 会局部刷新，只刷新目标路由页面,url里不会刷新

href 会刷新整个页面，url会刷新，重新加载整个页面

     <div>
          <router-link to="/page1">页面1</router-link>|
          <router-link to="/page2">页面2</router-link>|
          <a href="/page1">href页面1</a>|
          <a href="/page2">href页面2</a>
        </div>

路由异步加载：打包时不经常访问的路由可以使用异步路由，打包的文件则不包含异步路由，异步路由是在点击时异步加载；；清除缓存,点击其他路由时不会有请求，因为一开始都加载了（第一次加载首页也有0.js啊？），，，第一次点击登录时会加载0.js;;;;; 和require ， script标签加载js 原理一致 .. ??

数据处理： props(层层传递) ； provide/inject（子孙共享）； this.$emit(组件内部派发，外部使用组件处事件监听)； this.$bus.emit/on (组件间进行通信)； vuex: 数据管理中心（storage/stage/mutation）

vue使用插件use， vue-router属于插件级别； vuex也是插件

import VueRouter from ‘vue-router’ // 不加/ 是node_modules

// use启用插件

Vue.use(VueRouter); //this.$route use将$route挂载到了Vue原型上

形参使用解构赋值

actions: { // 异步的mutations  数据的修改还是要调用mutations修改
       // incrementAsync(store) {
       //     store.commit('increment');
       // }
       incrementAsync({commit}){   // 传参时可以形参可以直接解构出对应的变量
		commit('increment')
       }
   }
   
  注： 给incrementAsync传递参数为store对象，可以用一个形参store接收， 也可以用{commit}接收，，意思是实参是store对象，而执行的函数只要store对象中的commit,, 这样些要求store对象中有响应属性，  形参可以直接解构得到，， 使用时省些步骤

import/require 引入的文件，如何调试
- import Vuex from ‘vuex’ // es6 用import
  
  //const Vuex = require(‘vuex’); // 两者写法等价吗，用require方式也正常执行,, es6之前和node用require, node为什么不用import?
- 以 vuex mapState为例，找到vuex,package.json中, 有一个main和moudle对应了两个脚本，在这两个脚本的开头alert 一下，发现用的是esm.js ，因此想要调试的话找到方法console就行了，但是如何一步一步调试还不清楚。
- 另外想调试mapState 转到定义到了 helpers.d.ts中，而实际mapState函数在esm.js中，，待研究

二十六电商项目实战

ui框架：移动端/web端选型；；； vue: cube element

bootstrap过时，基于jquery,class方式使用，不是写标签；；；响应式针对移动端，，，一般pc和移动要写两套代码
ui框架的使用：先安装，看文档快速上手，在webpack中做配置（按需加载，自定义主题）

启动项目编译报错 –fix; 在package.json中添加

"rules": {
           "indent": [1, 4]
       },
       
       // 不行  还是会报错 ， 把package.json中的 "@vue/standard" 干掉

axios添加到全局

//main.js入口文件中添加到Vue原型之上
import axios from 'axios'
Vue.prototype.$axios = axios

其他组件中使用： this.$axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

- 基本的权限校验： 路由守卫+**拦截器**

  - **拦截器**： 比如给所有的请求头加上token，所有响应返回处理之前根据状态码进行全局处理（比如： axios的响应结果是http对象，不单单是数据，包含了响应的各种参数，全局设置一个拦截器， 只将符合要求的data返回即可）

- token

  - cookie有同源策略的限制，token没有，但需要自己处理实现

# 二十七  电商项目实战

- cube-ui  异步校验

  ```js
      rules:{ // 校验规则
                              required: true,
                              type: 'string',   //对应的自定义校验信息写在messages,,
                              min: 3,
                              max: 15,
                              // 自定义异步校验： 校验登录用户名是否存在
                              // 异步校验的规则： 函数，接收一个resolve参数， 或者是一个promise
                              // 意义： 就是返回给控件一个异步校验的函数，将异步校验的函数resolve出去即可，控件会调用异步校验函数，并得到校验结果，写入相关校验信息
                              usercheck:(name)=>{
                                  return (resolve)=>{   // 带上new Promise 也可以，这样更省事
                                      //resolve(false);   // 会一直不存在，这是同步校验
                                      this.$axios.get('/api/check?username='+name).then(res=>{
                                          resolve(res.code==0) ;   // 0为true/为校验通过
                                      })
                                  }
                              }
                          },

this.$router 路由器负责路由的跳转，，this.$route 路由获取当前路由信息
父组件直接使用子组件整个实例： ref
stylus css用法； scoped

二十八电商项目实战

header组件：定位样式 props / slot
v-if v-show hidden
阻止冒泡和默认事件 stop prevent 直接写在事件名中 @click.stop.prevent=”addCart($event,item)”
事件对象的传递 $event $event.target为dom对象

组件封装

文件调试

报个错，然后定位到相关文件，加断点
在webpack://下找 ./src , 加断点

el 和 mount 挂载组件区别

自定义消息提示中将Notice.vue挂载到了body上，先$mount(),然后再原生append

两者在使用效果上没有任何区别，都是为了将实例化后的vue挂载到指定的dom元素中。

如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。

注：如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。

例如：

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)




---脚手架生成 入口main.js中
new Vue({
    el: '#app',  //el和mount基本等价，el会自动挂载，mount可以选择何时手动挂载，mount不带参数，则需要原生appendChild插入到dom树中
    router,
    store,
    render: h => h(App)
})
//.$mount('#app') // 把vue实例的dom对象（$el）挂载到id=‘app’的节点处

二十九 VUE源码

createDocumentFragment() 用法: https://blog.csdn.net/qiao13633426513/article/details/80243058，
源码简单实现见代码

二十三 Vue2.5实战模版语法组件化

二十四 Vue2.5实战UI组件库 定制组件

二十五 Vue2.5实战 Vuex单向数据流 Vue-router单页应用

二十六 电商项目实战

二十八 电商项目实战

组件封装

文件调试

el 和 mount 挂载组件区别

二十九 VUE源码

二十四 Vue2.5实战UI组件库定制组件

二十六电商项目实战

二十八电商项目实战