去哪儿网App总结

最新推荐文章于 2020-09-29 15:44:33 发布

qq_36663682

最新推荐文章于 2020-09-29 15:44:33 发布

阅读量383

点赞数

分类专栏： Vue 文章标签： vue

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显示不是1px,怎么解决?
移动端click点击事件，会延迟300ms,怎么解决？
解决：引入第三方包,解决移动端click事件延迟300ms；
   npm install fastclick --save;
   在main.js中写如下代码
   import fastClick from ‘fastclick’
   fastClick.attach(document.body)
scoped限制该vue文件下的css仅在该.vue文件下使用；
iconfont字体图标的应用：
   步骤： 4.1 在iconfont注册账号，建立一个项目，然后将需要的图标加入到该项目下，下载到本地电脑该项目文件夹下src->assets->iconfont中。
       4.2 在iconfont.css的url中修改字体在本地的路径，在main.js中直接引入该文件import “./assets/iconfont.css”。
       4.3 即可显示该图标字体。
stylus样式的应用：
   步骤：5.1 npm install --save stylus;引入该样式文件。有时下载需要npm install --save stylus-loader;
       5.2
12.由循环生成的this.$refs是一个数组

13.定义一个量change，通过this.$emit向父组件city.vue传值e.target.innerText，
   父组件通过<v-alpha :letters=“letterCities” @change=“letterChange”>接受子组件的传值，
   父组件在把值通过属性传值的方法传递给子组件lists.vue
   即间接实现兄弟组件的传递
1. 通过一次性定时器实现函数截流，即滑动时没16ms执行一次，让执行的频率不那么快,从而实现代码优化
2. vuex的使用：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，
     您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，
     Vuex 将会成为自然而然的选择；
  
  步骤：15.1 安装vuex:npm install vuex --save ；
     15.2 src文件夹下创建一个store文件夹用于处理vuex；
     15.3 在store文件夹下创建index.js；
     15.4 在index.js里写：
             import Vue from “vue”
             import Vuex from “vuex”
  
             Vue.use(Vuex); //vue里面使用插件（如vuex）都是通过Vue.use(插件名)
  
             export default new Vuex.Store({ //创建new Vuex.Store仓库，并导出export
                 state:{ //存放全局公用的数据
                     city:“重庆”, //首页头部显示的城市，默认为重庆
                 },
                 actions:{ //接受模块通过this. $KaTeX parse error: Expected 'EOF', got '}' at position 205: \dots }̲, \dots$ store.commit传递过的数据，可以直接不需要actions，从而直接通过mutations处理修改state的值
                 mutations:{ //接受actions通过ctx.commit传递的数据并处理，即修改state里面的city让其等于item
                     changeCity(state,item){
                         state.city=item;
                     }
                 }
             })
     15.5 在main.js中：
             import store from “./store”
             new Vue({
             el: ‘#app’,
             router,
             store,
             components: { App },
             template: ‘’
             })
     15.6 在模块中{{this. $KaTeX parse error: Expected 'EOF', got '}' at position 17: \dotstore.state.city}̲}即可使用； 15\dots$ store.dispatch(“changeCity”,item);给vuex的store仓库的actions派发一个名字为changeCity，值为item的数据传递给store
             如果是this.$store.commit(“changeCity”,item)可以直接给vuex的store仓库不需要actions，从而直接通过mutations处理修改state的值
16.localStorage本地存储:
       let defaultCity=‘重庆’;
       try{ //避免用户禁止了localStorage，会报错
           if(localStorage.city){
               defaultCity=localStorage.city
           }
       }catch(e){}

       export default new Vuex.Store({
           state:defaultCity, //首页头部显示的城市，默认为localStorage.city或者重庆
       })
1. keep-alive优化代码，避免重复发送ajax获取重复数据，keep-alive缓存重复的数据：
     //exclude="组件name名"表示该组件不需要缓存，即每次跳转到页面都重新加载mounted生命周期
  
  
     在标签外部包裹一层keep-alive标签，即可缓存，即在vue中增加了activated生命周期(在页面初始化mounted挂载完成，或者跳转回当前页面时，执行该生命周期函数)，
     activated(){ //因为keep-alive而多出来的生命周期，即页面初始加载时和mounted一样执行，且在每次页面跳转返回当前页面时，仍然会执行，但是mounted因为在keep-alive下不会执行了
         if(this.lastCity !== this.city){ //即跳转回当前页面时，如果选择的城市发生改变，则再次发生ajax，否则就不发生ajax
             this.lastCity=this.city;
             this.getHomeInfo();
         }
     }
2. 这种写法，避免了a标签改变了li表示内里的文字颜色，相当于
4. 且自带跳转页面的功能。
  其中to="."表示返回上一页
5. 路由带参数传值：
  {
  path: ‘/detail/:id’,
  component: Detail
  }
6. vue页面的滚动事件：window.addEventListener(“scroll”,this.headerScroll,true)添加true有时候才能触发滚动事件，页面滚动距离始终为0，
     可能原因是body,html有overflow:hidden属性，删除即可。
     activated(){ //当前组件页面显示的时候触发该生命周期，因为window是全局的，在其他页面滚动时也会触发，所以需要在当前页面隐藏或者被其他页面替换时，移除滚动事件
         window.addEventListener(“scroll”,this.headerScroll,true)
     },
     deactivated(){//当前组件页面隐藏/或被其他页面替换的时候触发该生命周期
         window.removeEventListener(“scroll”,this.headerScroll,true)
     }
7. vue中的递归组件：即组件里面调用组件自己本身；
  通过name：" detailComponent"名，去调用
8. vue组件的name名称的作用：
  （1）递归组件时，作为标签名 < name-compontent>
  （2）该组件不需要缓存时也需要用到
9. 避免当前页面滚动到底部，跳转到其他页面时也在底部：
     在vue项目的router->index.js中：
     export default new Router({
     routes: [
     {
     path: ‘/’,
     component: Home
     },{
     path: ‘/city’,
     component: City
     },{
     path: ‘/detail/:id’,
     component: Detail,
     },
     {
     path: ‘/pics’,
     component: Pics
     }],
     scrollBehavior (to, from, savedPosition) { //vue-router的滚动行为，避免当前页面滚动到底部，跳转其他页面时也在底部
         return { x: 0, y: 0 }
         }
     })
10. vue项目的动画组件：
     （1.）新建一个动画组件anim.vue:
     （2.）然后在style里面定义.v-enter,.v-leave-to,.v-enter-active,.v-leave-active动画个个时刻的样式。
     （3.）在其他组件用引入该动画组件，然后将需要执行动画效果的标签包裹在该动画组件标签中即可。
11. vue项目的接口联调:即将模拟的json数据改成从服务器获取数据：
     步骤：在config->index.js下：
             dev: {
             assetsSubDirectory: ‘static’,
             assetsPublicPath: ‘/’,
             proxyTable: {
                 “/api”:{
                     target:“http://localhost:80”, // 将此改为服务地址，即发送/api的ajax会从该地址获取数据
                 }
             },
12. vue项目打包上线：进入该项目的命令行，输入npm run build，会生成dist文件，然后将该文件里内容放在服务上，如放在xampp->htdocs根目录文件夹下
作者：Ace.斗王
来源：CSDN
原文：https://blog.csdn.net/qq_42231156/article/details/82949939
版权声明：本文为博主原创文章，转载请附上博文链接！

qq_36663682

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
去哪儿网App总结

移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显示不是1px,怎么解决?移动端click点击事件，会延迟300ms,怎么解决？解决：引入第三方包,解决移动端click事件延迟300ms；    npm install fastclick --save;    在main.js中写如下代码&n...
复制链接

扫一扫