apicloud可以用vue嗎-Vue.js-PHP中文網

首頁

web前端

Vue.js

apicloud可以用vue嗎

藏色散人

Feb 02, 2021 am 09:36 AM

vue

apicloud可以用vue，其使用方法：首先在apicloud頁面中引入vue.min.js；然後在需要使用vue.js進行模板渲染的地方標記id；最後在apiready方法中根據標記了id的元素初始化vue實例即可。

apicloud可以用vue嗎

本文操作環境：windows7系統、vue2.0版本、Dell G3電腦。

apicloud中可以用vue。

如何在 APICloud 中使用 Vue.js 進行高效率開發？

APICloud官方推薦使用原生JS進行開發，但在複雜業務邏輯下，原生JS的開發效率往往不如MVVM框架高，所以使用Vue.js能夠有效提高開發效率。

在盡量不影響應用程式效能和Hybrid中原生API的使用者體驗的前提下，並不建議使用Vue.js的SPA開發模式，即不建議使用vue-cli編譯出使用vue-router、 vuex、axois等模組的單一頁面應用。

直接用 script 引入vue.js的方式能最大限度的減少vue與apicloud專案的耦合度，不會與現有原生api和原生模組產生衝突。

一、基本使用

首先在apicloud頁面中引入vue.min.js（本文引用時間2019年10月12日最新版為v2.6.10）。

然後在需要使用vue.js進行模板渲染的地方標記id，為了方便，通常在body下的最外層元素上標記。當然也可以在局部元素上進行vue渲染，與原生方法並不衝突。

最後在apicloud的初始化完成後，即apiready方法中根據標記了id的元素初始化vue實例。

範例程式碼：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
</head>
<body>
  <div id="vue">
    {{ message }}
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  apiready = function () {
    new Vue({
      el: &#39;#vue&#39;, // 与标记的id相同
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
    });
  };
</script>
</html>

登入後複製

二、頁面閃爍的處理

一般情況下，開啟一個需要vue進行渲染的新頁面，在其渲染過程中，會出現模板與模板渲染結果切換程式碼閃爍的效果，這是因為開啟新頁面apiready之後vue才開始渲染，渲染前預設顯示的是渲染模板內容，渲染成功後顯示結果。

這裡可以在vue模板元素上標記v-cloak進行處理。

推薦：《vue教學》

注意：這裡需要在style中宣告v-cloak的樣式為隱藏，這樣在渲染完成之前，標記了v- cloak的元素都不會顯示出來。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  apiready = function () {
    new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
    });
  };
</script>
</html>

登入後複製

三、非vue渲染元素使用vue實例內容

使用vue進行模板渲染會有一個渲染時間，在某些對渲染性能和顯示效果要求比較嚴格的頁面下，主要內容區域由原生html實現，複雜邏輯運算用vue進行渲染。在vue渲染區域之外可能會需要用到vue實例中的某些屬性或方法，這時可以在vue初始化時，將vue實例賦值給目前頁面的全域變數。

本文使用vm作為vue實例名稱，當然也可以改為它的。將vm放在apiready之外，可以保證在沒有初始化完成時直接呼叫相關方法不會報錯。全域使用vm作為vue實例也可以避免在vue內部的一些回呼方法需要var that = this;這樣重新制定上下文。

以下幾種情形可以使用vue全域實例vm：

vue渲染區之外需要呼叫vue實例內容時

使用原生方法時，如onclick

在回呼方法中需要呼叫vue實例內容時

範例：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
    <button onclick="vm.getData();" tapmode>Button One</button>
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  var vm;
  
  apiready = function () {
    vm = new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
      methods: {
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + &#39;吃了吗？&#39;;
          }, 3000);
        }
      }
    });
  };
</script>
</html>

登入後複製

四、模組的參考

apicloud中的模組不建議放在vue實例中，而應放在apiready之內，vue實例之外

範例：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
    <button onclick="vm.getData();" tapmode>Button One</button>
    <div @click="getData">Button Two</div>
    <div @click="getData(&#39;Tim&#39;)">Button Three</div>
  </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  var vm;
  
  apiready = function () {
  
    var module = api.require(&#39;xxx&#39;); // 模块的引用
    
    vm = new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
      mounted: function() {
      this.greet();
      module.xxx(); // 模块的使用
      },
      methods: {
        greet: function() {
          this.message = &#39;你好！&#39;;
        },
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + &#39;吃了吗？&#39;;
          }, 3000);
        }
      }
    });
    
  };
</script>
</html>

登入後複製

五、程式碼風格

目前手機的廠商眾多，廠商版本客製化碎片化嚴重，不同廠商對ECMA Script6語法的支援程度不一樣，因此使用原生JavaScript的寫法能夠保證在任何一個安卓版本較低的手機上都能夠正常運作。在某些裝置中，也出現過安卓版本較低無法正常解析es6的問題。 API Cloud官方沒有建議使用polyfill，所以盡量不要使用polyfill等工具，而是選擇官方推薦的原生js寫法，這樣能夠確保應用效能，同時也能確保當API Cloud框架後續有升級時，本地程式碼邏輯不至於有太大的改動。

函數的寫法

寫函數時，請注意不要使用es6的寫法和出現箭頭函數

ES6的寫法（×）：

foo(value) {
  console.log(value);
}
const fun = (value) => {
  alert(value);
}

登入後複製

原生JavaScript寫法（√）：

function foo(value) {
  console.log(value);
}
var fun = function(value) {
  alert(value);
}

登入後複製

變數和字串

使用原生Java Script的關鍵字，注意不要出現es6的關鍵字。字串拼接時也要使用原生JavaScript的加號連線。

ES6的寫法（×）：

let a;
const b = &#39;BAR&#39;;
if (xxx) {
  a = 1;
} else {
  a = 2;
}
console.log(`${b} ${a}`);

登入後複製

原生JavaScript寫法（√）：

var a = undefined;
var b = &#39;BAR&#39;;
if (xxx) {
  a = 1;
} else {
  a = 2;
}
console.log(a + b);

登入後複製

六、元件化應用

大多使用vue. js的apicloud開發者往往忽略了在不使用vue-cli編譯的情況下，同樣能夠進行組件化開發，以達到業務邏輯組件化、程式碼復用提高生產效率的目的。

注意：在apicloud中使用原生js開發vue元件時，避免使用v-model雙向綁定元件的值。同樣的，在其它資料量較大的展示型清單中也避免出現v-model雙向綁定，否則會影響vue渲染效率導致App很卡。

實例：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
  display: none;
}
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
    <search-bar ref="searchBar" @search="getData" placeholder="请输入关键词"></search-bar>
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<!-- 引入自定义组件的js文件 -->
<script type="text/javascript" src="./components/searchBar.js"></script>
<script type="text/javascript">
  var vm;
  
  apiready = function () {
    vm = new Vue({
      el: &#39;#vue&#39;,
      data: function() {
        return {
          message: &#39;Hello world!&#39;
        };
      },
      methods: {
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + &#39;吃了吗？&#39;;
          }, 3000);
        }
      }
    });
  };
</script>
</html>

登入後複製

通过js文件将组件内容从html页面中分离，达到复用的效果。使用时，相当于给已有的Vue加上了一个全局组件。

由于原生js的字符串拼接较为麻烦，是否这样用取决于使用者自身。

本示例中使用到的css样式来自tailwindcss

searchBar.js：
/**
 * searchBar.js
 * @overview 搜索框组件
 */
if (Vue) {
  Vue.component(&#39;search-bar&#39;, {
    props: {
      value: String,
      placeholder: {
        type: String,
        default: &#39;搜索&#39;
      }
    },
    data: function() {
      return {
        model: undefined,
        disabled: false,
      };
    },
    mounted: function() {
      this.model = this.value;
    },
    methods: {
      handleInput: function(e) {
        this.model = e.target.value;
        this.$emit(&#39;change&#39;, this.model);
      },
      handleClear: function() {
        this.model = undefined;
        this.$emit(&#39;change&#39;, this.model);
        this.$emit(&#39;search&#39;, this.model);
      },
      handleSearch: function() {
        this.$emit(&#39;search&#39;, this.model);
      }
    },
    template:
      &#39;<div class="flex justify-between">&#39; +
        &#39;<div class="flex flex-auto items-center bg-grey-light rounded py-2 px-4">&#39; +
          &#39;<div class="flex-auto"><input @input="handleInput" :disabled="disabled" v-model="model" type="text" style="width: 100%;" :placeholder="placeholder" /></div>&#39; +
          &#39;<i v-if="model && !disabled" @click="handleClear" class="iconfont icon-roundclosefill text-base text-grey pl-2"></i>&#39; +
        &#39;</div>&#39; +
        &#39;<div v-if="model && !disabled" class="flex items-center justify-center text-blue active:text-orange pl-4" @click="handleSearch">查询</div>&#39; +
      &#39;</div>&#39;
  })
}

登入後複製

以上是apicloud可以用vue嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn