1.購物車案例

注意點:定義屬性名和方法名不能一樣

• forEach()：對陣列進行遍歷迴圈，對陣列中的每一項執行給定函式。這個方法沒有返回值。引數都是function型別，預設有傳參，引數分別為：遍歷的陣列內容；第對應的陣列索引，陣列本身。

• every()：判斷陣列中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。
• some()：判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。

• map()：指“對映”，對陣列中的每一項執行給定函式，返回每次函式呼叫的結果組成的陣列。

2.元件

元件化:通常指的是樣式（輪播圖，tab，列表區域）
模組化:通過指的是效果(彈框)
元件:每一個vue例項物件(可複用的vue例項)
元件的定義以及使用
 // 元件：全域性定義元件    可複用的vue例項
    //       區域性定義
// 全域性定義元件  語法:Vue.component(元件名稱,{模板物件})
// 元件命名規範:1.採用駝峰方式命名，頁面使用的時候需要把大寫字母轉為連字元+字母,目的為了方便呼叫
//              2.採用小寫命名方式，直接在頁面使用即可<vone></vone>
//              3.不能以現有的標籤名作為元件名
// 元件中的data定義:1.data必須是方法 2.方法必須有返回值  3.返回值必須是物件型別
// 如果使用data中的資料:在元件中宣告的資料需要在元件的模板中使用
// 元件中還可以有的配置項；data，methods，filter，computed，watch，生命週期的鉤子函式....

3.template

// 元件中的模板物件：有且只能有一個根元素
// template使用: 位置:放到body的結束標籤上面,給當前的模板標籤新增id，同時把id賦值給元件的template

4.data

data為什麼在元件中是函式方式定義?

目的是為了實現資料共享而資料互相不影響
注意點:
1.data必須函式 2 必須有返回值 3返回值必須是物件

5.後臺案例

原始程式碼參考:06.後臺1.html

抽離程式碼參考：06.後臺1 copy.html

6.腳手架

1.全域性安裝webpack 
npm install webpack -g
2.全域性安裝vue-cli
npm install vue-cli -g
以上兩步只需要安裝一次
下面就是建立專案
3.vue init webpack demo     專案名稱為小寫名字即可   這是建立vue2.0專案
4.cd demo   進入建立的檔案中
5.npm run dev  啟動專案
​
//淘寶映象
npm i -g cnpm --registry=https://registry.npm.taobao.org

1.當前資料夾中不能有vue.js檔案，如果有安裝腳手架會報錯

專案安裝

1.安裝腳手架完成

2.清空工作

3.建立每一個元件(後臺頁面)

• componets
• header.vue
• footer.vue
• main.vue

APP.vue中 
<template>
  <div class="box">
    <v-header></v-header>
    <v-main></v-main>
    <v-footer></v-footer>
  </div>
</template>
​
<script>
import vHeader from './components/header'
import vMain from './components/main'
import vFooter from './components/footer'
export default {
  components: {
    vHeader,
    vMain,
    vFooter
  }
}
</script>
​
<style scoped>
  .box{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
</style>
在main.js中引入靜態資源
// 引入靜態資源
import './assets/css/reset.css'
//建立公共元件
import vDel from './components/del.vue'
Vue.component('vDel',vDel)