Vue.js（實戰問題）

Vue實戰練習

組件的css樣式只會影響該頁面，去掉則是全局共享

Vue列表的渲染

v-for v-if

a標籤的渲染（v-bind使用）

<template>
  <div class="index-wrap">
    <div class="index-left">
      <div class="index-left-block">
        <h2>全部產品</h2>
        <template v-for="product in productList">
          <h3>{{ product.title }}</h3>
          <ul>
            <li v-for="item in product.list">
              <a :href="item.url">{{ item.name }}</a>
              <span v-if="item.hot" class="hot-tag"> HOT</span>
            </li>
          </ul>
          <div v-if="!product.last" class="hr"></div>
        </template>

      </div>

      <div class="index-left-block lastest-news">
        <h2>最新消息</h2>
      </div>
    </div>

  </div>
</template>

data=>

<script>
export default {
  data () {

    return {
      productList: {
        pc: {
          title: 'PC產品',
          list: [
            {
              name: '數據統計',
              url: 'http://starcraft.com'
            },
            {
              name: '數據預測',
              url: 'http://warcraft.com'
            },
            {
              name: '流量分析',
              url: 'http://overwatch.com',
              hot: true
            },
            {
              name: '廣告發布',
              url: 'http://hearstone.com'
            }
          ]
        },
        app: {
          title: '手機應用類',
          last: true,
          list: [
            {
              name: '91助手',
              url: 'http://weixin.com'
            },
            {
              name: '產品助手',
              url: 'http://twitter.com',
              hot: true
            },
            {
              name: '智能地圖',
              url: 'http://maps.com'
            },
            {
              name: '團隊語音',
              url: 'http://phone.com'
            }
          ]
        }
      },
       msg: 'i am apple'
    }
  }
}
</script>

Vue從後臺獲取數據

vue-resource 使用ajax

使用 XMlHttpRequest 或 JSONP

使用方法

• 引入

cnpm install vue-resource

import VueResource from 'vue-resource'
Vue.use(VueResource)

• 使用 get & post請求

  this.$http.get(‘getList’).then(funciton(data){},funciton(err){})

  this.$http.post(‘getList’,{userId:‘123’})
  .then(funciton(data){},funciton(err){})

使用fake REST Data

模擬後臺請求獲取數據用來進行測試

cnpm install json-server --save

第六節

Vue組件查找

github 上 awesome-vue

圖片引入組件 需要使用 require ，不然最終會打入項目最終文件中

自定義事件的觸發和使用

        this.$emit('onchange',index)

 methods: {
        goto (index){
          this.isShow = false
          setTimeout(() =>{
            this.isShow = true
            this.nowIndex = index
            this.$emit('onchange',index)  //觸發事件
          },10)
        },

• 使用

  @onchange = [function]"

VUE 父子組件之間的通信

https://blog.csdn.net/csdnnews/article/details/90425646