BS4(4)-首頁(Vue結合)

一、課程主題內文

【Documentaion(文件)】>【Components(元件)】>【Card(卡片)】(連結處)

【Documentaion(文件)】>【Utilities(通用類別)】>【Embed(內嵌)】(連結處)、Video格式

【Documentaion(文件)】>【Content(內容)】>【Typography(文字排版)】(連結處)

S1:html結構

        <div class="container">
          <div class="row justify-content-center">
            <div class="card  m-3" style="width: 18rem;">
              <div class="embed-responsive embed-responsive-16by9">
                <video class="embed-responsive-item" src="./images/class01.mp4" autoplay loop muted></video>
              </div>
              <div class="card-body">
                <h5 class="card-title">1視覺設計</h5>
                <ul class="text-primary h6 list-unstyled">
                  <li>跨界創意視覺設計</li>
                  <li>響應式跨平台網頁設計</li>
                  <li>Painter原畫美術設計</li>
                  <li>行動裝置UI設計</li>
                </ul>
                <a href="#" class="btn btn-primary">課程介紹</a>
              </div>
            </div>
          </div>
        </div>

S2:Vue 連結

S2-1:【section】加上【#app】,以新增Vue 工作區域

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

利用 axios :Ajax取得資料:

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

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

API參考連結

        <div class="container">
          <div class="row justify-content-center">
            <div class="card  m-3" style="width: 18rem;"  v-for="list in classlists.class">
              <div class="embed-responsive embed-responsive-16by9">
                <video class="embed-responsive-item" :src="'./images/class'+list.count+'.mp4'" autoplay loop muted></video>
              </div>
              <div class="card-body">
                <h5 class="card-title">{{list.title}}</h5>
                <ul class="text-primary h6 list-unstyled">
                  <li v-for="item in list.items"  v-text="item"></li>
                </ul>
                <a href="#" class="btn btn-primary">課程介紹</a>
              </div>
            </div>
          </div>
        </div>

S4:Flex運用,將按鈕置於右下角

        <div class="container">
          <div class="row justify-content-center ">
            <div class="card  m-3" style="width: 18rem;"  v-for="list in classlists.class">
              <div class="embed-responsive embed-responsive-16by9">
                <video class="embed-responsive-item" :src="'./images/class'+list.count+'.mp4'" autoplay loop muted></video>
              </div>
              <div class="card-body  d-flex flex-column">
                <h5 class="card-title">{{list.title}}</h5>
                <ul class="text-primary h6 list-unstyled">
                  <li v-for="item in list.items"  v-text="item"></li>
                </ul>
                <a href="#" class="btn btn-primary  mt-auto  align-self-end">課程介紹</a>
              </div>
            </div>
          </div>
        </div>