笔记随笔1(webpack,vue-router,vuex)

笔记随笔1

• props ; $emit ;
• :value= XX ; Vue event.target.value( ) ;
• slot
• name slot 具名插槽
• <template slot-scope=“child_data”>
• module.eports ; require()
• export ; import ;
• arguments
• webpack前端模块化打包工具(依赖node环境)
• “node -v”
• “npm install webpack@3.6.0 -g”
• 过渡到.vue组件化开发：el => template 替换 el => conponents 替换 template("<app/>") => import app from “./views/app.js” => JS文件内 exports default {vue实例} => .vue组件文件替换JS文件(vue实例的name属性为此组件的名称)<template><script><style> => 引入其它组件: 1,引入：import XX_cpn from “./views/XX.vue” 2,注册：conponents{XX_cpn} 3,使用：<XX_cpn></XX_cpn>
• Vue CLI (vue command-line interface)
• “npm install -g @vue/cli” 全局安装脚手架3
• “vue init webpack 项目名称” cli2初始化生成项目
• “vue create 项目名称” cli3 初始化生成项目
• Project name (项目名称)
• Project description (项目描述)
• Author (项目作者)
• Runtime +Compiler / Runtime-only (渲染模式，Runtime-only模式内在更小,效率更高)
• Install vue-router?(Y/n) (是否安装路由,一般为Y)
• Use ESLint to lint your code?(Y/n) (是否安装ESLint规范你的代码,一般为n)
• Set up unit tests?(Y/n)(安装单元测试,一般为n)
• Setup e2e tests with Nightwatch?(Y/n)(安装端到端测试，一般为n)
• Should we run “npm install” for you after the project has been created?(recommended)(Yes,use NPM / Yes,use Yarn / No,I will handle that myself)(通过什么包管理工具来下载第三方包，一般为"Yes,use NPM")
• “npm install”安装项目所需的所有第三方包
• "npm run dev"cli2运行项目至本地服务器
• "npm run build"打包项目所有代码至dist(服务器布置文件)
• vue-router
• SPA(单页面富应用,现代前端开发模式,一个index.html+一个style.css + 一个main.js,组件化开发+前端路由+异步任务实现SPA)
• location.hash=“home” 或 history.pushState({},"",“home”) 或 <router-link to="/home">首页</router-link> 更改本地路由且不发送请求
• history.back() 或 history.go(-1)
• history.replaceState({},"",“home”) 替换当前本地路由且不发送请求
• “npm install vue-router --save” 安装并保存路由第三方包
• 前端路由: 导入vue-router第三方模块:import VueRouter from “vue-router” => 添加中间件:Vue.use(VueRouter) => 创建路由实例:const router = new VueRouter(routes:routes,mode:“history”);，并且传入路由配置: const routers = [{ path:"./home", component:Home},{path:"./about",component:About }] => 在Vue实例(main.js文件)上挂载创建的路由实例:1,import router from “./router/index.js” 2,new Vue({ router:router });
• <router-link to="/home" tag=“button” replace > ,<router-view>
• redirect:"/home" 重定向
• linkActive-class:“active”
• 组件内更改本地路由:this.$router.push("/home") ;this.$router.replace("/home");
• 动态路由:1,添加路由映射关系: const routes ={path:"/user/:use_id",component:User} => 2,更改本地路由<router-link :to="’/user/’+user_id" >用户<router-link> 或 组件vue实例内this.$router.push("/user/"+this.user_id) =>3,组件内拿到路由表(this.$router)中当前活跃的动态路由(this.$route)的参数:this.$route.params.user_id
• 路由懒加载（分割庞大的JS代码，提升首次请求速度）:router/index.js文件内,原先的:import Home from “…/components/home.vue” 被替换为 const Home = ()=>import("…/components/home.vue") 即可实现dist中的文件分割(路由懒加载)
• 子路由: const routes =[{path:"/home",component:Home, children:[{path:“news”,component: HomeNews},{path:“message”,component:HomeMessage}]}] => 父组件内更改本地路由：<router-link to="/home/news">到子路由新闻组件</router-link> <router-link to ="/home/message">到子路由消息组件</router-link> <router-view></router-view>
• 路由传参:<router-link :to="{path:"/user",query:{user_id:001}}"></router-link> => 组件内使用路由中传入的参数: this.$route.query
• URL组成部分: 协议://主机:端口/路径?查询#片段 (scheme://host:port/path?query#fragment)
• 路由守卫(路由跳转时的一些操作):router/index.js文件中 const routes =[{path:"/home",component:Home,meta:{title:“首页”}] => router/index.js中配置路由守卫：router.beforeEach((to,from,next)=>{/*从from路由到to路由*/ document.title=to.matched[0].meta.title; next(); /* next()的调用在中间件中是必要的*/});
• <keep-alive></keep-alive> (Vue内置的一个全局组件)保留组件内的路由信息，避免重新渲染 =>vue组件的生命周期加上激活activated(组件活跃){this.$router.push(this.path)} 和deactivated(组件销)两个生命周期函数 => vue组件内的私人守卫:beforeRouteLeave(to,from,next){this.path=this.$route.path} => <keep-alive exclude=“被排除的组件名1,被排除的组件名2”></keep-alive>
• “npm install vuex --save” 安装Vuex数据大管家
• store/index.js文件内引入vue,vuex => 1,安装中间件： Vue.use(Vuex); => 2,创建对象：const store =new Vuex.Store({
  state:{//状态树
  },
  mutations:{//改state内的状态的更新唯一方式：提交Mutation
  },
  actions:{//异步操作(异步操作改state内的值：this.$store.dispatch(“aUpdateInfo”))
  //context:上下文
  aUpdateInfo(context){
  setTimeout(()=>{
  context.commit(“updateInfo”);
  },1000);
  }
  },
  getters:{//计算属性(组件内使用属性:$store.getters.XX)
  powerCounter(state){
  return state.counter*state.counter;
  }
  },
  modules:{//对state的扩充将被解析后放入直接放入state中，可以直接使用
  module_a:{
  state:{},//组件内使用：this.$store.module_a.XX
  mutations:{},//组件内使用：this.$store.conmmit(“XX”,argu)
  actions:{},//组件内使用：this.$store.dispatch(“XX”,argu)
  getters:{}//组件内使用：this.$store.getters.XX
  },
  module_b:{
  state:{},
  mutations:{},
  actions:{},
  getters:{}
  }
  }
  }); =>3,导出store对象：export default store; =>main.js文件内：引入:import store from “./store/index.js”,vue实例上挂载vuex：“new Vue({ store:store })” =>$store可以在每个组件都拿到，它就是store/index.js 默认导出的store对象
• Vuex推荐改值: store/index.js文件中的mutations内定义改值方法f1(state.XX可使用共享数据) =>各个组件内改值则this.$store.commit(“f1”)即可
• Vue.set(state.info,“address”,“洛杉矶”) Vue内置的一个响应式添加对象或数组元素的方法
• Vue.delete(state.info,“address”) Vue内置的一个响应式删除对象或数组内的元素的方法
• modules rootState
• 对象的解构：const {name,height,age} = obj;(一一匹配取值)
• “npm install axios --save”
• axios(ajax i/o system)网络请求封装模块
• 组件内使用axios：import axios from “axios” ; =>axios({url:“XX”}).then(res=>{})
• 定义函数或方法时参数的默认值:function f1(a=0,b={},c=[]){函数体}
• vue中的一个元素加载完成回调事件：<img src=“XXX” @load=“f1” />