Vuejs2.0购物车和地址选配学习笔记

Vuejs2.0购物车和地址选配学习笔记

---

按照慕课网的Vuejs2.0的学习视频零基础实践的一个demo如下:
演示页面：袁凤鸣 | Vuejs2.0购物车demo
仓库地址：https://github.com/yfming93/vuejs
文章原文：在我个人博客

同时感谢慕课网讲师 河畔一角 分享的学习资料
使用vue2.0实现购物车和地址选配功能

(一)、基本配置命令介绍

• cnpm install vue --save 是将软件安装到dependencies里面，--save-dev是安装到devDependencies里面

  --save是将软件安装到开发里面去，在package.json文件中的devDependencies中

• Mac 电脑终端配置运行如下：

   MingodeMacBook-Pro:~ Mingo$ cd /Users/Mingo/Desktop/VueShoppingCart
   MingodeMacBook-Pro:VueShoppingCart Mingo$ ls
      address.html	cart.html	css		data		img		js
   MingodeMacBook-Pro:VueShoppingCart Mingo$ npm init
      This utility will walk you through creating a package.json file.
      It only covers the most common items, and tries to guess sensible defaults.
      
      See `npm help json` for definitive documentation on these fields
      and exactly what they do.
      
      Use `npm install <pkg>` afterwards to install a package and
      save it as a dependency in the package.json file.
      
      Press ^C at any time to quit.
      package name: (vueshoppingcart) VueShoppingCart
      Sorry, name can no longer contain capital letters.
      package name: (vueshoppingcart) vuejs
      version: (1.0.0)
      description: 这是袁凤鸣的第一个Vuejs2.0开发的购物车程序。
      entry point: (index.js)
      test command:
      git repository:
      keywords: vue，shopping
      author: 袁凤鸣
      license: (ISC)
      About to write to /Users/Mingo/Desktop/VueShoppingCart/package.json:
      
      {
          "name": "vuejs",
          "version": "1.0.0",
          "description": "这是袁凤鸣的第一个Vuejs2.0开发的购物车程序。",
          "main": "index.js",
          "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1"
          },
          "keywords": [
                       "vue，shopping"
                       ],
          "author": "袁凤鸣",
          "license": "ISC"
      }
      
      
      Is this ok? (yes) y
      
      
      ╭─────────────────────────────────────╮
      │                                     │
      │   Update available 5.3.0 → 5.4.2    │
      │     Run npm i -g npm to update      │
      │                                     │
      ╰─────────────────────────────────────╯
      
   MingodeMacBook-Pro:VueShoppingCart Mingo$ sudo npm i -g npm
      Password:
      /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
      /usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
      + npm@5.4.2
      added 21 packages, removed 111 packages and updated 19 packages in 282.892s
      
      
      ╭─────────────────────────────────────╮
      │                                     │
      │   Update available 5.3.0 → 5.4.2    │
      │     Run npm i -g npm to update      │
      │                                     │
      ╰─────────────────────────────────────╯
      
   MingodeMacBook-Pro:VueShoppingCart Mingo$ sudo npm i -g npm
      Password:
      /usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
      /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
      + npm@5.4.2
      updated 1 package in 8.177s
   MingodeMacBook-Pro:VueShoppingCart Mingo$ npm -v
      5.4.2
   MingodeMacBook-Pro:VueShoppingCart Mingo$ npm install vue --save
      npm notice created a lockfile as package-lock.json. You should commit this file.
      npm WARN vuejs@1.0.0 No repository field.
      
      + vue@2.4.4
      added 1 package in 3.255s
   MingodeMacBook-Pro:VueShoppingCart Mingo$ npm install vue-resource --save
      npm WARN vuejs@1.0.0 No repository field.
      
      + vue-resource@1.3.4
      added 22 packages in 21.824s
   MingodeMacBook-Pro:VueShoppingCart Mingo$ ls -l -a
      total 96
      drwxr-xr-x  14 Mingo  staff   476  9 19 14:41 .
      drwx------+ 74 Mingo  staff  2516  9 19 14:35 ..
      -rw-r--r--@  1 Mingo  staff  6148  9 19 14:41 .DS_Store
      drwxr-xr-x   7 Mingo  staff   238  9 19 14:39 .idea
      -rwxr-xr-x@  1 Mingo  staff   363  8 31 00:57 .project
      -rwxr-xr-x@  1 Mingo  staff  9550  8 31 00:57 address.html
      -rwxr-xr-x@  1 Mingo  staff  8622  8 31 00:57 cart.html
      drwxr-xr-x@  6 Mingo  staff   204  8 31 00:57 css
      drwxr-xr-x@  5 Mingo  staff   170  8 31 00:57 data
      drwxr-xr-x@  8 Mingo  staff   272  8 31 00:57 img
      drwxr-xr-x@  5 Mingo  staff   170  9 19 14:12 js
      drwxr-xr-x  26 Mingo  staff   884  9 19 14:41 node_modules
      -rw-r--r--   1 Mingo  staff  5900  9 19 14:41 package-lock.json
      -rw-r--r--   1 Mingo  staff   389  9 19 14:41 package.json
   MingodeMacBook-Pro:VueShoppingCart Mingo$
  

---

(二)、Vue 1.0 和 2.0 区别

从 Vue 1.x 迁移【参照官方文档】

• methods负责声明方法 方法的调用写在mounted上
  Vue1.0用ready Vue2.0用mounted

  • 生命周期mounted其实可以换成created吧，本例用created也行

  • ready 替换，使用新的 mounted 钩子函数替代。应该注意的是，使用 mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入 Vue.nextTick/vm.$nextTick。例如：

        mounted: function () {
            this.$nextTick(function () {
              // 代码保证 this.$el 在 document 中
            })
        }
    

• 2.0

  • 使用图片 v-bind:src=""
  • $index已经删除 v-for(item,index)使用索引
  • 2.0 不再支持用$delete删除
  • 2.0 取消了标签内 属性={{ }} 功能

• 给图片动态绑定需要用 v-bind：src=xx.xx 在 vue2.0 里 src：{{xx.xx}} 是无效的

  • Mustache既双大括号{{}} 不能在 HTML 属性中使用，应使用 v-bind 指令,相当于html的自定义属性。v-bind:src=""
Mustache内部可以使用 JS 表达式，如{{ number + 1 }}
    。在方法里使用this.$http.get().then()可以使用vue-resource

---

(三)、语法讲解

• v-for 用于循环

循环。主要用于表格，<li> 标签。去循环一个数组。【凡是看到列表就推荐使用v-for】
使用for渲染商品时,若想加索引如下 （限vue2.0）

     v-for="(item,index) in productList"
      在商品名字处 {{item.productName+index}}

• filter 过滤器：

  过滤器，格式化数据。主要对接口返回的字段进行业务转换，数据进行格式化如后台返回金额19数字。页面显示：￥19.00元。

• 写在实例Vue内部的是局部过滤器，

       new Vue({
         filters:{
         formatMoney: function (value){
             return "$"+value.toFixed(2);
          }
        }
       })
  

  • 写在外部的是全局过滤器(value:默认值 ，type参数)

      Vue.filter("money", function (vaule, type) {
          return "￥" + vaule.toFixed(2) + type;
      }) 
    

  eg: 例如：
  <div class="item-price">{ { item.productPrice | formatMoney('元') }}</div>

  注意: 全局的过滤器不要加s

• v-text 文本渲染

和{{}}功能一样。但是{{}}在第一次页面Vue木有初始化完成会在页面上显示{{}}字符。故文本渲染多用v-text。

• v-show 控制显示隐藏。

控制显示隐藏。dom是存在的。仅仅加display block： display none。

• v-if 控制显示隐藏

控制显示隐藏。如果dom不显示，整个dom则没有不存在。

• v-model 双向数据绑定

  主要在表单中使用,比如文本框,下拉框,单选,复选,textarea
  v-model是一个双向的功能。文本框输入以后，模型也会发生改变。反之模型改变了文本框也会改变。

• v-bind 绑定属性

  给一个dom元素添加属性 v-bind:class="" 等价于 :class=""
  绑定属性。给一个dom元素添加属性。【比如：在做图片的渲染过程中，如果图片的src地址是动态的，那么就需要v-bind去绑定src属性，去给这个src赋值。】。凡是样式变化的可用v-bind动态去操作class 【不要在原生的class里面去使用{{}}改变class】
  v-bind添加class属性，属性值只能为obj或arr

  • 不同的绑定方式：

      v-bind:class="{ }"; //绑定 class 时 “”中是{} 或者 []
      v-bind:src="";
    

• v-on 事件绑定

  • 【v-on：同等于@】 比如：@click="" 同等于v-on:click=""是支持表达式的（一元表达式、三元表达式）

• component 组件

在做单页面过程中使用多些。把每一个网页做成多个组件然后拼接。起到组件复用。如页面头部底部和轮播等。

---

(四)、语法对比

• 循环遍历：

    (1)js:obj.forEach(function(value,index){});
    (2)jQuery:$.each(function(index,value){});
    (3)vue2.0:<i v-for="(value,index) in arr"></i>
  

• es6的箭头函数的this指向外部，里面用 this调用外部的变量和方法。

• js中slice与splice的差别：
  都是截取数组，slice重新创建一个数组，splice在原先是数组的基础上

---

(五)、语法技巧

• 自动计算： v-model="item.b" 直接可以{{item.a*item.b}}

• toFixed有精度缺失（四舍五入），所以价格一般有后台传入

• 这个{{}}花括号 页面刚出来的时候 会出现~~ 这个怎么去掉呢？

  • 在整个控制模块上加 v-cloak 例如： <div id="app" v-cloak></div>

• data中没有需要使用的数据使，使用set注册。

  vue.set(object, key, value)全局注册
  this.$set(object, key, value)局部注册

• 数据中是否存在某一属性，可以用此方法，typeof item.checked==‘undefined’

  • 如果不存在可以全局注册一个Vue.set(item,"checked",true);
    或者局部注册一个this.$set(item,"checked",true)

• vue里面，全局的Vue.set和局部的$.set什么区别？

  • 全局的set就是在data里面创建，$.set可以在遍历item里面创建

• 删除: 通过indexOf获取索引,var index = this.productList.indexOf(this.curProduct);
  然后 splice(index,1)从当前位置开始删除一个元素

• 对于文本框这样的值,是通过v-model绑定的,v-model具有双向数据绑定功能,通过+改变数量,那么文本框的值会相应的去发生变化
  但是变量{{ }}是不会实时改变的

• 表达式使用data变量不要加this。v-for 循环可以控制循环的数量

• computed,filters区别是什么？什么时候使用computed，什么时候使用filters

  • 我个人理解：computed是主要对数据进行实时操作，比如删除，插入等。 而filters主要是格式化数据。

• _this 的使用 _this.addRess=res.result; 什么时候应该用_this 和 this

  • this,在vue实例中指向vue的实例，var vm = new Vue(){}中的 this 指向 vm；而在 forEach() 函数中 this 的指向发生了改变，不再指向vue实例，所以在使用 forEach() 这个函数之外，先用 _this = this 储存vue实例。不会改变this指向，用this，会改变this指向，例如 forEach（），外部储存this然后在内部用 _this 。

• 凡是在指令里面（在页面视图里面）一定不要使用this，因为当前的指令的作用域已经是th``is了，直接操作即可。若再去加this作用域就发生变化了，故this就无法取得当前变量了。只有在Vue的实例的过程中函数里面去使用this，此时的this就是当前的Vue实例data里面的变量。

---

(六)、插件使用注意

• 和后台数据交互用vue-resource，但是已经不被官方推荐，推荐使用axios作为ajax请求库

• vue-resoure插件主要用于数据交互 方面
  this.$http.get("请求 地址"，{请求参数}).then(function(res)){ 取数据 });

• 函数内部this指向改变了，使用vue resource方法之前要定义一个内部变量_this保存this

• this.$http.{请求方式}('请求地址'{请求的数据}).then(function (res){})
  返回的数据并不是真正的数据 ，而是由vue封装的，全部包括 body 、header等 通常数据被包装在了res.body里面
  【最好打开浏览器调试看看，我的测试时数据在 res.data里面】

---

(七)、调试和其他

• 谷歌浏览器中command + option + i打开审查元素
• 单页面用：vue-router；项目足够复杂用：vuex；构建系统用：build

---

(八)、常见业务总结

• 对于v-for循环的 类似卡片的选中效果
  可以配合 v-bind 和 @click使用，巧妙运用下标index，如:

  <li v-for="(address, index) in filterAddress" v-bind:class="{'check':index == curentIndex}" @click="curentIndex = index">

• 固定UI业务选中效果
  配合 v-bind 和 @click 然后设置一个固定值在``@click`中改变，如：

     <div class="shipping-method-wrap">
       <div class="shipping-method">
         <ul>
           <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1">
             <div class="name" >标准配送</div>
             <div class="price">Free</div>
           </li>
           <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2">
             <div class="name" >高级配送</div>
             <div class="price">180</div>
           </li>
         </ul>
       </div>
     </div>