手把手教你用Vue搭建一個商品頁面

vue的一些零散知識

大體目錄如下

1. 實例創建
2. 屬性綁定
3. 條件渲染
4. 列表渲染
5. 事件觸發
6. class綁定
7. 計算屬性
8. 組件化開發（父子相互傳遞數據）
9. 表單實現
10. Tabs

開源源碼

一.VUE對象和vue實例

• 如何使用Vue實例開始編寫Vue應用程序，以及如何將基本數據加載到網頁上。 Vue實例是每個Vue應用程序的根

• Vue實例插入到DOM中的一個元素中

• Vue實例的數據可以使用稱爲表達式的類似於mustache的語法{{}}來顯示。（放data然後再處理）

• Vue是響應式的，原例改變
  後面跟着變

二.VUE屬性綁定

比如 data我放了product的text和一個image和link，在html頁面時候 我就直接{{}}框出文字。

• target的用法

_self相同框架
_top整頁
_blank新建一個窗口
_parent父窗口 其它的就是自定義了，可以指向已有的窗口名稱

• data可以綁定到html的屬性上面去
• v-bind：和：是一樣的，：後面放屬性

三.條件渲染

• v-if-else和v-show
• 可以在if這些的引號內隨意使用表達式
• v-show不會去刪改dom的節點屬性只是顯示和隱藏

我在項目中用以上知識解決了一個條件渲染文字的效果

提出問題———>>如何讓文字有條件渲染
VUE的解決方案十分粗暴
data塞入一個Boolean值判斷

舉一反三

有沒有比if-else更粗暴的呢，肯定是有的，比如v-show

由於if -else能夠處理我們的業務邏輯了 所以夠了

四.列表的渲染

其實就是個循環遍歷鍵值對的問題

• What’d we learn
• The v-for directive allows us to iterate over an array to display data.
• We use an alias for the element in the array being iterated on, and specify the name of the array we are - looping through. Ex:
  v-for=“item in items”
• We can loop over an array of objects and use dot notation to display values from the objects.
• When using v-for it is recommended to give each rendered element its own unique key.

1. data塞入數組

1. 循環渲染
   
   

2. 如果一個這個產品有不同的version該怎麼處理呢
   
   

3. 最後的代碼

五.事件處理

1. 如下是一個簡單的事件綁定——表達式綁定
   
   
2. 表達式綁定改造成一個函數方法綁定，
   
3. 懸浮鼠標顯示圖片的實現
   

六.Class & Style Binding

1. 色塊對應圖片
2. 如果條件綁定，前面是class後面的是條件 class： condition
   
   
3. class綁定時候 你甚至可以綁定一個數據或者對象進去

六.computed property

computed property的意思就是本身並不直接存儲值，但是可以通過get和set方法來間接獲取或者改變其他property的值。

1. 字符串合併

2. 如果要操作懸浮的圖片，不是通過圖片對象，而是下標，先訪問鍵值對
   
   那個selectedvariant傳入座標給它
   
   弄完後 image得換給它的綁定

3. 根據true或false控制色塊變化
   

八.組件開發

1. 大體的組件內容

2. 如果要給用戶列入一個會員的權限，那就是要父向子傳遞數據
   
   
   

九.Communicating Events（子向父傳遞數據）

• 組件可以讓它的父組件知道使用$emit發生了一個事件
• 組件可以使用帶有v-on指令(簡稱@)的事件處理程序偵聽事件發射，這可以觸發父組件上的方法
• 組件可以在事件發生時發出數據
• 父節點可以使用子節點發出的數據

前面的會觸發後面的方法事件

2. 如果要傳入多個參呢

傳入數字其實意義不大 如果要傳入ID要怎麼操作

十.表單

其實就是要做一個寫評論功能

• 我們可以使用v-model指令在表單元素上創建雙向綁定
• 我們可以使用.number修飾符來告訴Vue將該值轉換爲一個數字，但是 它有一個BUG，當value爲空時候 自動變爲字符串
• 當表單提交時，我們可以使用.prevent事件修飾符來阻止頁面重新加載
• 我們可以使用Vue完成相當簡單的自定義表單驗證

1. 註冊組件

  Vue.component('product-review', {
      template: `
        <input>
      `,
      data() {
        return {
          name: null
        }
      }
    })

2. 動態變化的數據 相當於嵌入一個變量（模子）
   
   預留一個填充字符
   

.prevent是要防止表單提交後刷新頁面

十一.Tabs / 評論模塊

1. 先渲染出來

   Vue.component('product-tabs', {
      template: `
        <div>
          <span class="tab" v-for="(tab, index) in tabs" :key="index">{{ tab }}</span>
        </div>
      `,
      data() {
        return {
          tabs: ['Reviews', 'Make a Review']      
        }
      }
    })

渲染的效果如下

如果要點擊時候進行跳轉tab

2. 如果要點擊的時候 顏色變亮呢