2020-web前端-vue-vueNote-5月-2日

1.开发注意

  建议是把大图片放在public里面，小图片放在src/assets里面

  因为webpack会抽取图片资源，把大的弄成一个请求加载，

  小的图片会当做icon，会打包成base64的，把图片压缩到base64，就少了一个请求，这个是最优的。

 在main.js，router.js中最好是把插件放在上面，组件放在下面

Vuex:

  首先是组件里面的一个点击事件-》通过dispatch派发一个Actions，actions会提交一个commit到Mutations，Mutations会自动提交状态到State，从而状态会重新选择我们这个视图，当我们状态改变的时候呢，跟组件有延迟的话，那就要用computed计算属性

*// [https://www.cnblogs.com/webjoker/p/5218114.html]*

*// [https://blog.csdn.net/xiaoqingpang/article/details/79108005]*

*// slice()和splice()区别*

*// slice()不会改变原数组*

*// splice()会改变原数组的对象*

 --路由动态取餐

  写法一：this.$router.push(`/detail?id=${this.$route.query.id}`);

  写法二：this.$router.push({path:'detail',query:{id:123}})

  *// 有跳转取参，router.params*

  this.$router.push({  name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }});



  <h1>从这个路由传参到别的路由</h1>

  <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }}" >

​    router-link跳转router1

  </router-link>



  *// a路由跳转到b路由*

  this.$router.push('')

*// import 是预编译加载，require是在执行加载*

components是放组件的 app.veu是根组件，只能放<router-view />

在src，新建一个文件夹util，存放公共方法的、

在src，新建一个文件夹storage，是存放local，session，cookie的值的

  yarn add vue-lazyload element-ui node-sass sass-loader vue-aw

  esome-swiper vue-axios vue-cookie --save-dev

import Vue *from* "vue";

import Router *from* "vue-router";

Vue.use(Router); *// 这里就是代表vue把这个vue-router这个插件安装上去了*

  $emit():子组件向父组件传值

  比如：@click="$emit('submit')",因为submit是自定义事件，

  所以在父元素中接收：@submit="goToCart"

  然后在methods方法中，定义goToCart事件

  注意vue动画：enter必须是要放在动画的后面

  &.slide-enter-active {

​    top: 0;

  }



  &.slide-leave-active {

​    top: -100%;

  }



  &.slide-enter {

​    top: -100%;

  }

  在浏览器勾选这个，Disable cache，就是防止页面被缓存

  每次请求都是会刷新的，这样子才不会

*// Mac 选修改多个：按住command+d,可以修改多个*

*// Mac 上默认快速换行是command+enter*

*// Mac shift + option + ⏬  拷贝一行*

2.代码片段配置

{
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "eLink": {
    "prefix": "el-link",
    "body": ["<el-link href=\"#\"  type=\"primary\">$1</el-link>"],
    "description": "el-link"
  }
}

这里面$1，是代码光标显示的位置