03(04

頁面初始化 渲染列表

mounted () {
    this.getList()
}
複製代碼

11-表格案例-axios版-刪除

• 給刪除按鈕綁定事件 @click.prevent="del()"

• 在methods定義一個del()函數

• 刪除邏輯在del函數實現

  <a href="#" class="btn btn-danger" @click.prevent="del(item.id)">刪除

  del (id) { // 確認提示框 if (confirm('親，確認刪除嗎？')){ // 刪除的是還須要ID // axios 去發送刪除請求 axios.delete(http://localhost:3000/brands/${id}) .then(res=>{ // 處理成功時候 更新列表 this.getList() }).catch(err=>alert('刪除品牌失敗')) } },

12-表格案例-axios版-搜索-分析

• 要完成搜索功能 首先須要服務端支持
• 是支持模糊查詢的。http://localhost:3000/brands?brandName_like=關鍵字
• 當輸入的內容修改的時候，把輸入的內容發送給服務器。
• 經過axios來進行請求。把獲取的數據更新data中的list便可。

13-偵聽器watch-文檔分析

• 使用場景：在依賴data數據的時候，若是獲取新數據的時候有異步操做，使用偵聽器。
• 當依賴的數據沒有改變的時候 不會觸發偵聽器。

14-偵聽器watch-基本使用

data: {
      message: 'hi vue'
},
// 偵聽器 其實就是 watch 選項
watch: {
    // 監聽數據的改變  監聽的字段作爲函數的名稱
    message (now, old) {
        console.log(now, old)
        setTimeout(() => {
            this.str = '321'
        }, 1000)
    }
},
複製代碼

15-表格案例-axios版-搜索-實現

<input type="text" class="form-control" v-model="searchValue">

 data: {
     list: [],
     brandName: '',
     searchValue: ''
 },

watch: {
    searchValue (now, old) {
        //改變時候 去發送xhr請求
        axios.get(`http://localhost:3000/brands?brandName_like=${now}`)
            .then(res => {
            //搜索成功  更新列表  依賴搜索結果
            this.list = res.data
        }).catch(err => alert('搜索失敗'))
    }
},
複製代碼

16-vue組件-體驗組件（重點）

• 在功能一致的時候 且會屢次實現 封裝組件

17-vue組件-組件特色

• 複用
• 組件內的數據是獨立的

18-vue組件-全局組件

/*定義組件*/
  /*1. 使用 Vue.component() 定義全局組件*/
  /*2. 兩個參數  第一個參數
  組件名稱 規則：小寫字母加中線 a-b 或者 使用駝峯命名 userName  使用時  user-name */
  /*3. 第二個參數  組件的選項  配置對象和你實例Vue的選項同樣 沒有el選項*/
  Vue.component('button-count', {
    // methods computed mounted ... 
    // data選項必須是帶返回值是一個對象的函數
    data () {
      return {
        //數據申明在這裏
        count: 0
      }
    },
    // 使用 template 選項去配置
    template: `<button class="btn btn-success" @click="count++">點擊了{{count}}次</button>`
  })
複製代碼

19-vue組件-局部組件

/*定義 局部 組件 須要使用選項 components  */
components: {
    // key  就是組件名稱
    // value 組件的配置選項
    'span-com': {
        template: `<div><span>span1</span><span>span2</span></div>`
    }
},
複製代碼

20-vue組件-組件嵌套

<div id="app">
  <h1>{{message}}</h1>
  <div-com></div-com>
</div>
<script>

  Vue.component('div-com',{
    template:`<div>父組件 <span-com></span-com></div>`
  })


  Vue.component('span-com',{
    template:`<span>子組件</span>`
  })
複製代碼

21-vue組件-組件通信幾種狀況

• 通信：組件與組件數據交換
• 父子狀況：
  • 父組件向子組件傳值
  • 子組件向父組件傳值
• 兄弟組件傳值
• 毫無關係的組件傳值

22-vue組件-父向子傳值-props

<custom-div count="100" name="xxx"></custom-div>
</div>
<script>
  // 子組件
  Vue.component('custom-div', {
    // props 是組件的一個選項  定義多個屬性
    // 定義書寫在組件標籤上的屬性 須要關聯
    // 經過 props 配置 能夠使用 自定義組件的屬性
    // 經過 props 配置 數據能夠在插值表達式中使用
    // 和data申明的數據同樣的特色 響應式數據
    props: ['count','name'],
    template: `<div>子組件{{count}}--{{name}}</div>`
  })
複製代碼

23-vue組件-父向子傳值-v-bind

<custom-div :count="count" name="xxx"></custom-div>
</div>
<script>
  // 子組件
  Vue.component('custom-div', {
    props: ['count', 'name'],
    template: `<div>子組件{{count}}--{{name}}</div>`
  })
  // 根組件  父組件
  var vm = new Vue({
    el: '#app',
    data: {
      message: '父組件',
      count: 400
    },
    methods: {}
  })
複製代碼

24-vue組件-父向子傳值-總結

• 子組件的選項 定義一個選項 props
• props 關聯的是 使用組件時候的 定義的屬性
• 父組件 經過v-bind綁定父組件的數據