S2:Vue 連結

安裝擴充外掛工具 【Vue.js devtools】

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

S2-1:【.detail】外層加上【#movie】,以新增Vue 工作區域

S2-2:建立【Vue】工作區域,並載入【json】資料

利用 axios :Ajax取得資料:

參考連結:【GitHub原始】、【IT邦幫忙-Ajax取得資料】、【生命週期

什麼是生命週期

Vue實例有一個完整的生命週期,也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,我們稱這是Vue的生命週期。通俗說就是Vue實例從創建到銷毀的過程,就是生命週期。

在Vue的整個生命週期中,它提供了一系列的事件,可以讓我們在事件觸發時註冊js方法,可以讓我們用自己註冊的js方法控制整個大局,在這些事件響應方法中的this直接指向的是vue的實例。

  var app =new Vue({
      el:'#app',
      data:{
        mvlists:[]
      },  // data end
      mounted:function(){
        this.getMovie();
      },  //mounted end 
      methods:{
        getMovie:function(){
          axios.get('./movielist.json')
          .then(function (response) {
            console.log(response);
            app.mvlists = response.data;
            console.log(app.mvlists);
          })
        } // getTrips End
      } // methods end
    }); //Vue end

S3:利用【v-for循環】、【v-text】、【v-html】、【v-bind屬性綁定】資料連結載入

API參考連結

除了【類型tag】、【折扣、優惠價】不更動,其餘載入資料欄位

  <!-- json 明細載入 -->
  <div id="movie">
    <div class="detail">
      <div class="mvlist" v-for="list in mvlists">
        <div class="mvImg">
          <a href="#" class="a"> <img v-bind:src="'../images/p5/'+list.image+'.jpg'" v-bind:alt="list.title"></a>
        </div>
        <div class="mvItem">
          <div class="title">{{list.title}}</div>
          <div class="sub" v-text="list.sub"></div>
          <div class="actor" v-text="'演員:'+list.actor"></div>
          <div class="director" v-text="'導演:'+list.director"></div>
          <div class="tag">類型:動作冒險/熱門精選/</div>
          <div class="price" v-text="'原價:'+list.price+'元'"></div>
          <div class="price">
              <span class="red">79</span>折,
              優惠價:<span class="red">230*0.79</span>元
          </div>
          <div class="score" v-text="list.score"></div>
        </div>
        <div class="mvDesc">
          <h4 v-text="list.title"></h4>
          <p v-text="list.desc"></p>
        </div>
      </div>
    </div>
  </div>

S4:JS可以加入計算

連結:JavaScript parseInt() 函數

          <div class="price">
            <span class="red" v-text="list.discount*100"></span>折,
            優惠價:<span class="red"  v-text="parseInt(list.price*list.discount)"></span>元
          </div>

S5:【類型tag】利用【v-for】執行子節點循環

          <div class="tag">類型:
              <span v-for="tagItem in list.tag" v-text="tagItem+'/'"></span>
          </div>