庆余年第三季,色吧电影网,高潮喷水的网站

引子

身在此山 不覺山高峰險

廢話我們留到最后說，該篇緣自群里朋友的疑惑，可惜不是女生問的～

群友疑惑

編寫方式

1.簡單粗暴型

??:"小哥哥～vue看示例都好復(fù)雜呦，又要node又歪脖派克的，搞的人家好煩～都沒發(fā)學(xué)啦～"
??:“小妹妹你來～我給你看個好東西”

如官網(wǎng)示例中的表格組件

Paste_Image.png

再比如一個實際例子:
html:直接在index.html中使用，掛載點為body，除了根組件另外做了視頻相關(guān)的組件

<body>
<section name="ui_focus_time" id="ui_focus_time" class="lb-box clearfjx">
    <div class="lunbobig">
        <div class="lunbobig-wraper">
            <div style="position: absolute;right: 0px;top: 0px;z-index: 3001;">
                <div class="jiathis_style_32x32">
                    <a class="jiathis_button_qzone"></a>
                    <a class="jiathis_button_tsina"></a>
                    <a class="jiathis_button_tqq"></a>
                    <a class="jiathis_button_renren"></a>
                </div>
            </div>
            <video-time-slider :video="curTimesVideo" :container-id="curTimesVideo.container_id"></video-time-slider>
        </div>
    </div>
    <div class="lunbosmall clearfjx">
        <div id="ui_focus_time_swiper" class="swiper-container">
            <div class="swiper-wrapper">
                <div v-for="video in videoTimesPackage" @click="switchTimeVideo(video)" class="swiper-slide video-time-item">
                    <video-time-slider :video="video" :container-id="video.container_id"></video-time-slider>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
<script src="js/vue.min.js"></script>

script:根組件和視頻播放器初始化的組件，直接在根組件中的components中聲明，如果你有多個組件要用到這個，那就在全局聲明；

<script>
var vm = new Vue({
      el: "body",
      data: {
          isLoaded:false,
          isCanShowChance:false,
          switchStatusOption:{
              menuToggle: false,//導(dǎo)航顯示
              ruleToggle: false,//規(guī)則浮層
              prizeToggle:false,//徽章浮層
              isShowPrizeMask: false,//徽章說明浮層
              isShowAdPopup:false,//廣告IFRAME浮層
              isShowLogout:false,//注銷登錄按鈕顯示
              isShowGetChancePopup:false,//中獎浮層
              loginRemindToggle:false//中獎浮層
          }
      },
      beforeCompile:function(){
          var ctx = this;
          ctx.videoNewsPackage = videos_news_package;
          ctx.videoTimesPackage = videos_times_package;
          ctx.curTimesVideo = videos_times_package[0];
          ctx.$nextTick(function(){
              var timeSwiper = new Swiper('#ui_focus_time_swiper', {
                  slidesPerView: 3,
                  paginationClickable: true
              })
          })
      },
      ready: function () {
      },
      methods: {
          /**
           * 打開規(guī)則浮層 調(diào)用遮罩
           */
          openRule: function () {
              this.styleOption.popupTop = window.scrollY + 50;
              this.switchStatusOption.ruleToggle = true;
              mask.show();
          },
          /**
           * 關(guān)閉規(guī)則浮層 隱藏遮罩
           */
          closeRule: function () {
              this.switchStatusOption.ruleToggle = false;
              mask.hide();
          }
      },
      watch: {
          'switchStatusOption.menuToggle':function(val){
              if(val==true)this._checkToggleStatus('menuToggle');
          },
          'switchStatusOption.ruleToggle':function(val){
              if(val==true)this._checkToggleStatus('ruleToggle');
          },
          'switchStatusOption.prizeToggle':function(val){
              if(val==true)this._checkToggleStatus('prizeToggle');
          },
          'switchStatusOption.isShowPrizeMask':function(val){
              if(val==true)this._checkToggleStatus('isShowPrizeMask');
          },
          'switchStatusOption.isShowAdPopup':function(val){
              if(val==true)this._checkToggleStatus('isShowAdPopup');
          }
      },
      components: {
          'video-news-head': {
              props: ['video','containerId'],
              template: '<div class="video-img">'+
              '                    <div id="{{containerId}}" class="video-player-wrap">'+
              '                    </div>'+
              '                    <p>{{video.video_txt}}</p>'+
              '                </div>',
              attached:function(){
                  var _curComponentContext = this;
                  var _curDomId = _curComponentContext.containerId;
                  var _videoId = _curComponentContext.video.video_id;
                  var _videoPlayOpt = {
                      containerId: _curDomId,
                      vid: _videoId,
                      share: 1,
                      autoplay: 0,
                      ark:0,
                      event: {
                          onPlayerInit: function () {
                              console.info("播放器初始化")
                          },
                          onPlayerVideoPlay: function () {
                              setShare(_curComponentContext.video);
                              _letvPlayer.setFullScreen({
                                  fullScreen: true
                              });
                          }
                      }
                  }
                  var _letvPlayer = new LETV_PLAYER.Player(_videoPlayOpt,LETV_SDK_KEY)
              }
          }
      }
  })
</script>

樣式就不用舉例了內(nèi)聯(lián)還是外部引入隨項目需求
這是最簡潔暴力的方式，特別適合你不需要做項目工程化，就寫寫專題頁，你不需要懂gulp,webpack

這種方式特別適合對vue有強烈學(xué)習(xí)欲望卻又對模塊加載、工程化還很模糊的小伙伴

2.能優(yōu)雅點嗎？

??:"上面的寫的好簡單哦～人家這樣寫會被罵成菜逼的，有沒有再好點的，但是又別用什么require什么的好嘛，人家還沒學(xué)??"
??:"呦呦呦～行那就給你介紹個更菜逼的寫法=_="

目錄結(jié)構(gòu)

vendor- //核心腳本
  lib-
    tool.js //編寫加載模版的工具
  app.js
components-//組件
  header-//頭部組件
    index.html //組件html模版
    index.js //組件腳本
  footer-//尾部組件
    index.html
    index.js
index.html //首頁

組件編寫示例:

(function(Vue){
  window.Template.getData("./components/header/index.html")
  var Header = Vue.extend({
    template:window.Template.data,
    // 選項...
    data:function(){
      return {
        msg:"i am header"
      }
    }
  })

  Vue.component('ui-header', Header);
})(Vue,window)

由于vue的template選項本身不支持URL獲取模版。
所以要自己寫一個同步獲取html模版的工具，也不難(XMLHttpRequest)。

Paste_Image.png

3.模塊加載

??：“那什么，我剛看了些模塊加載的資料，明白amd加載規(guī)范，學(xué)會使用require.js了，但是別整構(gòu)建，配置好煩??”
??：“amd？也行，來來～這套學(xué)習(xí)方案很適合你”

結(jié)構(gòu)如圖示

Paste_Image.png

index.html:

<body>
  <ui-header></ui-header>
  <div>
    {{msg}}
  </div>
  <ui-footer></ui-footer>
  <script src="http://cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>
  <script src="vendor/app.js"></script>
</body>

組件編寫代碼

define(["Vue","text!components/header/index.html"],function(Vue,template) {
  // 這里是模塊的代碼
  var footer = Vue.extend({
    template:template,
    data:function(){
      return {
        msg:"我來組成襠部！"
      }
    }
  })
  return footer;
});

??:"有了模塊加載器編寫組件加載模版方便了許多是不是"
??:"不是-_-#"

4.構(gòu)建你別怕

??:“我看同志社區(qū)里例子都用node跑了，還用了什么歪脖派克，給我說說嘛，這塊總是不懂”
??:“別怕，這歪脖派克之前還有咕嚕破和哥軟特，但說白了都是構(gòu)建工具，為你行方便的，尤大大鐘愛歪脖，那咱就以歪脖為例子搞一哈～”

安裝好 node 配置好環(huán)境
npm install -g 歪脖派克
搞個文件夾init一下～

node自身就已經(jīng)實現(xiàn)了?cmd模塊規(guī)范～不如咱就用用～多學(xué)一種

目錄結(jié)構(gòu)
其實我這里如果把編譯好的資源扔到dist目錄就更好了，更符合工程化的思想

目錄結(jié)構(gòu)

注意到我這里兩個組件header和footer分別用vue單文件和普通腳本方式編寫
組件代碼：vue單文件寫法

<style>
/*樣式*/
</style>
<template>
<!--模版-->
  <div>
    {{msg}}
  </div>
</template>
<script>
  //組件腳本
  module.exports = {
    data:function(){
      return {
        msg:"我來組成頭部!"
      }
    }
  }
</script>

組件代碼：普通寫法

module.exports = {
  template:require("./index.html"),
  data:function(){
    return {
      msg:"我來組成襠部!"
    }
  }
}

可以看到vue單文件寫法更能體現(xiàn)組件感～也方便不少，因為最近vue2.0測試版發(fā)布，但是vue-loader（用來處理.vue）卻還沒更新，導(dǎo)致有些新入伙的習(xí)慣.vue的懵圈了～

最后演示

成品效果

這是個很簡單的原子項目，不包括復(fù)雜的東西，也不包括其他必須的處理流程，真正的工程肯定不是這樣子的，但是慢慢根據(jù)歪脖派克的文檔、大家的示例結(jié)合你的需求你可以讓項目豐滿實用起來。
??:“所以你知道了吧，大家的項目構(gòu)建都是根據(jù)自身的項目需求來的，有時候你down下來的項目不符合你的認知預(yù)期也正常的呦～”
??:“越來越不懂了呢～”

5.vue-cli工程化

使用腳手架工具 vue-cli 可以快速地構(gòu)建項目：單文件 Vue 組件，熱加載，保存時檢查代碼，單元測試等——from官網(wǎng)構(gòu)建大型應(yīng)用

??:“這～聽起來就好高大上的哇～強烈要求壁咚啊～”
??:“哎呀～瞧你沒出息的樣子-_-#”
不僅僅是套工具，它還提供幾套構(gòu)建腳手架模版：

可以讓你更專注于業(yè)務(wù)堆碼
方便團隊開發(fā)
教會你一些構(gòu)建技巧

總結(jié)

回到開頭，群里朋友的疑問，目前很多大拿已經(jīng)開始擁抱ECMAScript 6，網(wǎng)上也有很齊全的資料了，但不必因為不懂es6 而停止探索vue的步伐

??：“vue作為新晉明星類庫，伴隨一系列風(fēng)起云涌的工具、標準、規(guī)范，組合起來一時不便于理解，還需要余下時間補足基礎(chǔ)才好學(xué)懂，再一個關(guān)鍵就是多多加強英文閱讀理解能力～第一時間接觸先進工具資料，你就可以借著它們的余暉在國內(nèi)發(fā)光發(fā)亮～哪怕只是翻譯呢～小妹妹你懂了咩～”
??:“羞羞～你懂的真多～今晚有空么～人家想請你吃個烤面筋～”

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

[高手勿入]vue有幾種編寫方式？

[高手勿入]vue有幾種編寫方式？

引子

編寫方式

1.簡單粗暴型

2.能優(yōu)雅點嗎？

3.模塊加載

4.構(gòu)建你別怕

5.vue-cli工程化

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

[高手勿入]vue有幾種編寫方式？

引子

編寫方式

1.簡單粗暴型

2.能優(yōu)雅點嗎？

3.模塊加載

4.構(gòu)建你別怕

5.vue-cli工程化

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频