思思热久久在线视频,亚洲国产人妻

Vuejs2.0購(gòu)物車(chē)和地址選配學(xué)習(xí)筆記

按照慕課網(wǎng)的Vuejs2.0的學(xué)習(xí)視頻零基礎(chǔ)實(shí)踐的一個(gè)demo如下:
演示頁(yè)面：袁鳳鳴 | Vuejs2.0購(gòu)物車(chē)demo
倉(cāng)庫(kù)地址：https://github.com/yfming93/vuejs
文章原文：在我個(gè)人博客

同時(shí)感謝慕課網(wǎng)講師河畔一角分享的學(xué)習(xí)資料
使用vue2.0實(shí)現(xiàn)購(gòu)物車(chē)和地址選配功能

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

cnpm install vue --save 是將軟件安裝到dependencies里面，--save-dev是安裝到devDependencies里面

--save是將軟件安裝到開(kāi)發(fā)里面去，在package.json文件中的devDependencies中
Mac 電腦終端配置運(yùn)行如下：

    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: 這是袁鳳鳴的第一個(gè)Vuejs2.0開(kāi)發(fā)的購(gòu)物車(chē)程序。
       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": "這是袁鳳鳴的第一個(gè)Vuejs2.0開(kāi)發(fā)的購(gòu)物車(chē)程序。",
           "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 區(qū)別

從 Vue 1.x 遷移【參照官方文檔】

methods負(fù)責(zé)聲明方法方法的調(diào)用寫(xiě)在mounted上
Vue1.0用ready Vue2.0用mounted
- 生命周期mounted其實(shí)可以換成created吧，本例用created也行
- ready 替換，使用新的 mounted 鉤子函數(shù)替代。應(yīng)該注意的是，使用 mounted 并不能保證鉤子函數(shù)中的 this.$el 在 document 中。為此還應(yīng)該引入 Vue.nextTick/vm.$nextTick。例如：
```
    mounted: function () {
        this.$nextTick(function () {
          // 代碼保證 this.$el 在 document 中
        })
    }
```
2.0
- 使用圖片 v-bind:src=""
- $index已經(jīng)刪除 v-for(item,index)使用索引
- 2.0 不再支持用$delete刪除
- 2.0 取消了標(biāo)簽內(nèi) 屬性={{ }} 功能
給圖片動(dòng)態(tài)綁定需要用 v-bind：src=xx.xx 在 vue2.0 里 src：{{xx.xx}} 是無(wú)效的
- Mustache既雙大括號(hào){{}} 不能在 HTML 屬性中使用，應(yīng)使用 v-bind 指令,相當(dāng)于html的自定義屬性。v-bind:src=""
  Mustache內(nèi)部可以使用 JS 表達(dá)式，如{{ number + 1 }}
  。在方法里使用this.$http.get().then()可以使用vue-resource

(三)、語(yǔ)法講解

v-for 用于循環(huán)

循環(huán)。主要用于表格，<li>標(biāo)簽。去循環(huán)一個(gè)數(shù)組?！痉彩强吹搅斜砭屯扑]使用v-for】
使用for渲染商品時(shí),若想加索引如下（限vue2.0）

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

filter 過(guò)濾器：

過(guò)濾器，格式化數(shù)據(jù)。主要對(duì)接口返回的字段進(jìn)行業(yè)務(wù)轉(zhuǎn)換，數(shù)據(jù)進(jìn)行格式化如后臺(tái)返回金額19數(shù)字。頁(yè)面顯示：￥19.00元。
寫(xiě)在實(shí)例Vue內(nèi)部的是局部過(guò)濾器，
```
     new Vue({
       filters:{
       formatMoney: function (value){
           return "$"+value.toFixed(2);
        }
      }
     })
```
- 寫(xiě)在外部的是全局過(guò)濾器(value:默認(rèn)值，type參數(shù))
```
  Vue.filter("money", function (vaule, type) {
      return "￥" + vaule.toFixed(2) + type;
  }) 
```
eg: 例如：
<div class="item-price">{ { item.productPrice | formatMoney('元') }}</div>

注意: 全局的過(guò)濾器不要加s
v-text 文本渲染

和{{}}功能一樣。但是{{}}在第一次頁(yè)面Vue木有初始化完成會(huì)在頁(yè)面上顯示{{}}字符。故文本渲染多用v-text。

v-show 控制顯示隱藏。

控制顯示隱藏。dom是存在的。僅僅加display block： display none。

v-if 控制顯示隱藏

控制顯示隱藏。如果dom不顯示，整個(gè)dom則沒(méi)有不存在。

v-model 雙向數(shù)據(jù)綁定

主要在表單中使用,比如文本框,下拉框,單選,復(fù)選,textarea
v-model是一個(gè)雙向的功能。文本框輸入以后，模型也會(huì)發(fā)生改變。反之模型改變了文本框也會(huì)改變。
v-bind 綁定屬性

給一個(gè)dom元素添加屬性 v-bind:class="" 等價(jià)于 :class=""
綁定屬性。給一個(gè)dom元素添加屬性?！颈热纾涸谧鰣D片的渲染過(guò)程中，如果圖片的src地址是動(dòng)態(tài)的，那么就需要v-bind去綁定src屬性，去給這個(gè)src賦值?！俊７彩菢邮阶兓目捎?code>v-bind動(dòng)態(tài)去操作class 【不要在原生的class里面去使用{{}}改變class】
v-bind添加class屬性，屬性值只能為obj或arr
- 不同的綁定方式：
```
  v-bind:class="{ }"; //綁定 class 時(shí) “”中是{} 或者 []
  v-bind:src="";
```
v-on 事件綁定
- 【v-on：同等于@】比如：@click="" 同等于v-on:click=""是支持表達(dá)式的（一元表達(dá)式、三元表達(dá)式）
component 組件

在做單頁(yè)面過(guò)程中使用多些。把每一個(gè)網(wǎng)頁(yè)做成多個(gè)組件然后拼接。起到組件復(fù)用。如頁(yè)面頭部底部和輪播等。

(四)、語(yǔ)法對(duì)比

循環(huán)遍歷：

    (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的箭頭函數(shù)的this指向外部，里面用 this調(diào)用外部的變量和方法。
js中slice與splice的差別：
都是截取數(shù)組，slice重新創(chuàng)建一個(gè)數(shù)組，splice在原先是數(shù)組的基礎(chǔ)上

(五)、語(yǔ)法技巧

自動(dòng)計(jì)算： v-model="item.b" 直接可以{{item.a*item.b}}
toFixed有精度缺失（四舍五入），所以價(jià)格一般有后臺(tái)傳入
這個(gè){{}}花括號(hào) 頁(yè)面剛出來(lái)的時(shí)候會(huì)出現(xiàn)~~ 這個(gè)怎么去掉呢？
- 在整個(gè)控制模塊上加 v-cloak 例如： <div id="app" v-cloak></div>
data中沒(méi)有需要使用的數(shù)據(jù)使，使用set注冊(cè)。

vue.set(object, key, value)全局注冊(cè)
this.$set(object, key, value)局部注冊(cè)
數(shù)據(jù)中是否存在某一屬性，可以用此方法，typeof item.checked==‘undefined’
- 如果不存在可以全局注冊(cè)一個(gè)Vue.set(item,"checked",true);
  或者局部注冊(cè)一個(gè)this.$set(item,"checked",true)
vue里面，全局的Vue.set和局部的$.set什么區(qū)別？
- 全局的set就是在data里面創(chuàng)建，$.set可以在遍歷item里面創(chuàng)建
刪除: 通過(guò)indexOf獲取索引,var index = this.productList.indexOf(this.curProduct);
然后 splice(index,1)從當(dāng)前位置開(kāi)始刪除一個(gè)元素
對(duì)于文本框這樣的值,是通過(guò)v-model綁定的,v-model具有雙向數(shù)據(jù)綁定功能,通過(guò)+改變數(shù)量,那么文本框的值會(huì)相應(yīng)的去發(fā)生變化
但是變量{{ }}是不會(huì)實(shí)時(shí)改變的
表達(dá)式使用data變量不要加this。v-for 循環(huán)可以控制循環(huán)的數(shù)量
computed,filters區(qū)別是什么？什么時(shí)候使用computed，什么時(shí)候使用filters
- 我個(gè)人理解：computed是主要對(duì)數(shù)據(jù)進(jìn)行實(shí)時(shí)操作，比如刪除，插入等。而filters主要是格式化數(shù)據(jù)。
_this 的使用 _this.addRess=res.result; 什么時(shí)候應(yīng)該用_this 和 this
- this,在vue實(shí)例中指向vue的實(shí)例，var vm = new Vue(){}中的 this 指向 vm；而在 forEach()函數(shù)中 this 的指向發(fā)生了改變，不再指向vue實(shí)例，所以在使用 forEach()這個(gè)函數(shù)之外，先用_this = this 儲(chǔ)存vue實(shí)例。不會(huì)改變this指向，用this，會(huì)改變this指向，例如 forEach（），外部?jī)?chǔ)存this然后在內(nèi)部用 _this 。
凡是在指令里面（在頁(yè)面視圖里面）一定不要使用this，因?yàn)楫?dāng)前的指令的作用域已經(jīng)是th``is了，直接操作即可。若再去加this作用域就發(fā)生變化了，故this就無(wú)法取得當(dāng)前變量了。只有在Vue的實(shí)例的過(guò)程中函數(shù)里面去使用this，此時(shí)的this就是當(dāng)前的Vue實(shí)例data里面的變量。

(六)、插件使用注意

和后臺(tái)數(shù)據(jù)交互用vue-resource，但是已經(jīng)不被官方推薦，推薦使用axios作為ajax請(qǐng)求庫(kù)
vue-resoure插件主要用于數(shù)據(jù)交互方面
this.$http.get("請(qǐng)求地址"，{請(qǐng)求參數(shù)}).then(function(res)){ 取數(shù)據(jù) });
函數(shù)內(nèi)部this指向改變了，使用vue resource方法之前要定義一個(gè)內(nèi)部變量_this保存this
this.$http.{請(qǐng)求方式}('請(qǐng)求地址'{請(qǐng)求的數(shù)據(jù)}).then(function (res){})
返回的數(shù)據(jù)并不是真正的數(shù)據(jù) ，而是由vue封裝的，全部包括 body 、header等通常數(shù)據(jù)被包裝在了res.body里面
【最好打開(kāi)瀏覽器調(diào)試看看，我的測(cè)試時(shí)數(shù)據(jù)在 res.data里面】

(七)、調(diào)試和其他

谷歌瀏覽器中command + option + i打開(kāi)審查元素
單頁(yè)面用：vue-router；項(xiàng)目足夠復(fù)雜用：vuex；構(gòu)建系統(tǒng)用：build

(八)、常見(jiàn)業(yè)務(wù)總結(jié)

對(duì)于v-for循環(huán)的類(lèi)似卡片的選中效果
可以配合 v-bind 和 @click使用，巧妙運(yùn)用下標(biāo)index，如:

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

固定UI業(yè)務(wù)選中效果
配合 v-bind 和 @click 然后設(shè)置一個(gè)固定值在``@click`中改變，如：

   <div class="shipping-method-wrap">
     <div class="shipping-method">
       <ul>
         <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1">
           <div class="name" >標(biāo)準(zhǔn)配送</div>
           <div class="price">Free</div>
         </li>
         <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2">
           <div class="name" >高級(jí)配送</div>
           <div class="price">180</div>
         </li>
       </ul>
     </div>
   </div>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vuejs2.0購(gòu)物車(chē)和地址選配學(xué)習(xí)筆記

Vuejs2.0購(gòu)物車(chē)和地址選配學(xué)習(xí)筆記

Vuejs2.0購(gòu)物車(chē)和地址選配學(xué)習(xí)筆記

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

(二)、Vue 1.0 和 2.0 區(qū)別

(三)、語(yǔ)法講解

v-for 用于循環(huán)

filter 過(guò)濾器：

v-text 文本渲染

v-show 控制顯示隱藏。

v-if 控制顯示隱藏

v-model 雙向數(shù)據(jù)綁定

v-bind 綁定屬性

v-on 事件綁定

component 組件

(四)、語(yǔ)法對(duì)比

(五)、語(yǔ)法技巧

(六)、插件使用注意

(七)、調(diào)試和其他

(八)、常見(jiàn)業(yè)務(wù)總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vuejs2.0購(gòu)物車(chē)和地址選配學(xué)習(xí)筆記

Vuejs2.0購(gòu)物車(chē)和地址選配學(xué)習(xí)筆記

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

(二)、Vue 1.0 和 2.0 區(qū)別

(三)、語(yǔ)法講解

v-for 用于循環(huán)

filter 過(guò)濾器：

v-text 文本渲染

v-show 控制顯示隱藏。

v-if 控制顯示隱藏

v-model 雙向數(shù)據(jù)綁定

v-bind 綁定屬性

v-on 事件綁定

component 組件

(四)、語(yǔ)法對(duì)比

(五)、語(yǔ)法技巧

(六)、插件使用注意

(七)、調(diào)試和其他

(八)、常見(jiàn)業(yè)務(wù)總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

(三)、語(yǔ)法講解

(四)、語(yǔ)法對(duì)比

(六)、插件使用注意

(七)、調(diào)試和其他