vue学习

    #1 安装vue-cli脚手架 ：sudo npm install -g vue-cli#2 查看可以使用哪个模板 ： vue list#3 vue init webpack(模板名称) sell(项目名称)#4 安装过程 ：  -- Project name sell  （项目名称sell）  -- Project description sell app （sell app）  -- Author <Seven [e-mail]> （项目作者）  -- Vue build standalone  -- Install vue-router? Yes  -- Use ESLint to lint your code? Yes  -- Pick an ESLint preset Standard  -- Setup unit tests with Karma + Mocha? No (项目单元测试等，不需要)  -- Setup e2e tests with Nightwatch? Yes  -- cd sell  -- npm install (安装成功后会多一个npm_modules依赖库)  -- npm run dev (启动开发环境)  安装完成后分析整个项目流程(这里看到两篇文章比较好)：          http://www.jianshu.com/p/2769efeaa10a          https://zhuanlan.zhihu.com/p/24322005  【调试工具】：        vue-devtools:在chrome安装vue-devtools，然后f12，查看就有vue这一项，方便调试        jsonview#5 .eslintrc.js：    extends：继承一个标准的规则，在安装的时候我们自己选择的，vue预先定义了很多规则可供我们选择(https://github.com/standard/standard/blob/master/docs/RULES-en.md)    rules：除了extends继承标准，我们可以在rules对某些规则做修改，比如默认就修改了3个规则（            'arrow-parens': 0,   #0忽略规则检查            'generator-star-spacing': 0, #0忽略规则检查            'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 #生产环境不允许开启debug          ）#6 svg图片转换字体：    https://icomoon.io/->点击IcoMoon App-->Import Icons(导入自己svg)-->选择Untitled Set下的生成好的图标->Prefen..自定义名字->下载    下载后打开demo.html 查看引用代码-->将font文件夹、style.css拷贝到项目中#7 将css改为stylus，将xx.css改名为xx.styl(stylus文件后缀为styl)，同时将xx.css中的大括号"{}"、";"都去掉就可以了#8 安装扩展"stylus"、"stylus-loader",在package.json中添加：    "stylus": "^0.54.5",    "stylus-loader": "^2.1.1",    然后在项目根目录 npm install#9 本身flex有浏览器兼容问题，不同浏览器要写不同前缀兼容，在vue-cli中的vue-loader依赖一个postcss库，这个库自动搞定兼容写法，我们只需要按照标准写法来写就可以了   如：        在vue-cli项目中写法 : flex : 1        在普通项目中写法: flex:1;-webkit-flex:1;-mis-flex:1....#10 vue-router（处理路由、跳转）:如果在安装脚手架的时候没有选择安装vue-router,那就要npm自己安装，在package.json中的dependencies中添加：    "dependencies": {        ...        "vue-router": "^2.7.0"    },    【注】：这里捎带提一下，要想在package.json安装依赖库，但是不知道版本，就去github查看    然后在项目根目录执行,npm install(官网https://router.vuejs.org/zh-cn/essentials/getting-started.html)    使用方法，在main.js中添加：        import Vue from 'vue'        import VueRouter from 'vue-router'    然后在App.vue页面中:        <template>          <div id="app">            <v-header></v-header>            <div class="tab">              <div class="tab-item">                <router-link to="/goods">商品</router-link>              </div>              <div class="tab-item">                <router-link to="/seller">商家</router-link>              </div>            </div>            <router-view></router-view>          </div>        </template>    在src/router/index.js中：        import Vue from 'vue'        import Router from 'vue-router'        import goods from '../components/goods/goods.vue'        import seller from '../components/seller/seller.vue'        //使用前先注册        Vue.use(Router)        export default new Router({          routes: [            { path: '/goods', name: 'goods', component: goods },            { path: '/seller', name: 'seller', component: seller }          ]        })    在main.js添加默认跳转页：    router.push('/seller') // 进入首页，默认跳转    更多vue-router请看：        https://segmentfault.com/a/1190000007825106        http://www.cnblogs.com/lastnigtic/p/6486693.html#11 安装vue-resource(ajax处理前后台请求)，在package.json的dependencies中添加：     "dependencies": {        ...        "vue-resource": "^1.3.4"      }      【注】：这里捎带提一下，要想在package.json安装依赖库，但是不知道版本，就去github查看    在main.js中注册        // 注册VueResource        Vue.use(VueResource)    在页面上用        this.$http.get('/api/seller').then((response) => {            response = response.body            if (response.errno === ERR_SUCCESS) {              this.seller = response.data            }        })#12 alias别名：定义在webpack.base.conf.js中resolve/alias下#13 布局之Sticky footers，使用fixed布局，内容少的时候，按钮也在底部固定位置，不会向上收；内容多的时候下拉，啦到最后，就可以看到下面固定按钮、区块，从而达到不会遮挡内容作用；    html    <div class="detail">  //最外层      <div class="detail-wrapper clearfix">  //滑动区域、填充内容容器        <div class="detail-main"></div>//具体填充的内容、滑动区域      </div>      <div class="detail-close">         <i class="icon-close"></i>      </div> //关闭按钮、区块不会随着滑动区域滑没了    </div>   css:   .detail      position: fixed;      z-index: 100      top: 0      left: 0      width: 100%      height: 100%      overflow: auto      background-color: rgba(7, 17, 27, 0.8)      .detail-wrapper        min-height :100%        .detail-main          margin-top:64px          padding-bottom:64px      .detail-close        position :relative        width :32px        height :32px        margin : -64px auto 0 auto        clear :both        font-size:32px#14 布局之两边横线中间文字，两边线距离两边窗口有一定距离，距离文字有一定距离，线的长度自适应   ，类似" ---- 特惠 ---- "    答案：移动端使用flex布局可以解决#15 为什么有时候在created中或者其他方法中可以直接this.xxx,而这个xxx没有在data中定义，html的模板中也可以使用这个xxx，但是有时候又不行#16 css让文字无论多少行都垂直水平居中，display:table        <div class='parent'>            <span class="text">dddssds</span>        </div>        css:            .parent{display:table}            .parent .text{display:table-cell; vertical-align :middle}#17 better-scroll:    17.1 package.json添加:    "dependencies": {        .....        "better-scroll":"^0.1.7"    }    17.2 先初始化scroll        methods: {          __initScroll() {            #this.menuScroll = new BScroll("dom对象，即想要滑动的div","一个对象,传入scroll参数")            #this.foodsScroll = new BScroll("dom对象，即想要滑动的div","一个对象,传入scroll参数")             this.menuScroll = new BScroll(this.$refs.menu_wrapper, {})  #v-el已经淘汰了，全用ref代替             this.foodsScroll = new BScroll(this.$refs.food_wrapper, {}) #v-el已经淘汰了，全用ref代替          }        }#18 点击router-link向route-view传递值与模板传递值一样#19 在组件的props接受的值是Object、Array，默认的defaults要是一个方法     props: {      selectFoods: {        type: Array,        default() {          return []        }      },    }<?php if($user['userInfo']['ls_bf_expire_date'] >= time() && $user['userInfo']['ls_bf_start_date'] <= time() ):?>                <?php if( ($user['userInfo']['ls_zb_bf_num'] + $user['userInfo']['ls_hf_bf_num']) > 0 ):?>                    <br />                    <span class="supervene-inside-temporary"><span>临时并发数：</span><span><?=$user['userInfo']['ls_zb_bf_num']?></span>（直播）+<span><?=$user['userInfo']['ls_hf_bf_num']?></span>（回放）    有效期：<span><?=isset($user['userInfo']['ls_bf_start_date']) && !empty($user['userInfo']['ls_bf_start_date']) ? date('Y-m-d',$user['userInfo']['ls_bf_start_date']): ''?> — <?=isset($user['userInfo']['ls_bf_expire_date']) && !empty($user['userInfo']['ls_bf_expire_date']) ? date('Y-m-d',$user['userInfo']['ls_bf_expire_date']): ''?></span></span>                <?php endif; ?>            <?php endif;?>#20 父组件与子组件：        传递数据：            父->子：props            子->父： -        触发方法：            子->父:(子$emit,父在子的模板标签监听子的$emit)                    子：this.$emit('cart-add', 'param')                    父:<child @cart-add="drop"></child> //父监听子的cart-add,监听到了就去执行自己的drop            父->子：通过ref                父：<child ref="child"></child>                    this.$refs.child.childMethod()                子：{                    methods:{                        childMethod(){                            ...                        }                    }                }                【注】：另外也可以通过ref获取dom元素对象                        <div ref='wrap'></div>                        this.$refs.wrap //获取div元素对象