四、模塊的引用

apicloud中的模塊不建議放在vue實例中，而應(yīng)當放在apiready之內(nèi)，vue實例之外

示例：

  
  
  
  


  
    {{ message }}
    Button One
    Button Two
    Button Three
  




  var vm;
  
  apiready = function () {
  
    var module = api.require('xxx'); // 模塊的引用
    
    vm = new Vue({
      el: '#vue',
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
      mounted: function() {
      this.greet();
      module.xxx(); // 模塊的使用
      },
      methods: {
        greet: function() {
          this.message = '你好！';
        },
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + '吃了嗎？';
          }, 3000);
        }
      }
    });
    
  };

五、代碼風格

當前手機的廠商眾多，廠家版本定制碎片化嚴重，不同廠家對ECMA Script6語法的支持程度不一樣，因此使用原生JavaScript的寫法能夠保證在任何一個安卓版本較低的手機上都能夠正常運行。在某些設(shè)備中，也出現(xiàn)過安卓版本較低無法正常解析es6的問題。API Cloud官方?jīng)]有推薦使用polyfill，所以盡量不要使用polyfill等工具，而是選擇官方推薦的原生js寫法，這樣能夠保證應(yīng)用性能，同時也能確保當API Cloud框架后續(xù)有升級時，本地代碼邏輯不至于有太大的改動。

函數(shù)的寫法

編寫函數(shù)時，注意不要使用es6的寫法和出現(xiàn)箭頭函數(shù)

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的關(guān)鍵字，注意不要出現(xiàn)es6的關(guān)鍵字。字符串拼接時也要使用原生JavaScript的加號連接。

ES6的寫法（×）：

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

原生JavaScript寫法（√）：

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

六、組件化應(yīng)用

大多數(shù)使用vue.js的apicloud開發(fā)者往往忽略了在不使用vue-cli編譯的情況下，同樣能夠進行組件化開發(fā)，以達到業(yè)務(wù)邏輯組件化、代碼復用提高生產(chǎn)效率的目的。

注意：在apicloud中使用原生js開發(fā)vue組件時，避免使用v-model雙向綁定組件的值。同樣的，在其它數(shù)據(jù)量較大的展示型列表中也避免出現(xiàn)v-model雙向綁定，否則會影響vue渲染效率導致App很卡。

實例：

  
  
  
  


  
    {{ message }}
    
  





  var vm;
  
  apiready = function () {
    vm = new Vue({
      el: '#vue',
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
      methods: {
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + '吃了嗎？';
          }, 3000);
        }
      }
    });
  };

通過js文件將組件內(nèi)容從html頁面中分離，達到復用的效果。使用時，相當于給已有的Vue加上了一個全局組件。

由于原生js的字符串拼接較為麻煩，是否這樣用取決于使用者自身。

本示例中使用到的css樣式來自tailwindcss

searchBar.js：
/**
 * searchBar.js
 * @overview 搜索框組件
 */
if (Vue) {
  Vue.component('search-bar', {
    props: {
      value: String,
      placeholder: {
        type: String,
        default: '搜索'
      }
    },
    data: function() {
      return {
        model: undefined,
        disabled: false,
      };
    },
    mounted: function() {
      this.model = this.value;
    },
    methods: {
      handleInput: function(e) {
        this.model = e.target.value;
        this.$emit('change', this.model);
      },
      handleClear: function() {
        this.model = undefined;
        this.$emit('change', this.model);
        this.$emit('search', this.model);
      },
      handleSearch: function() {
        this.$emit('search', this.model);
      }
    },
    template:
      '' +
        '' +
          '' +
          '' +
        '' +
        '查詢' +
      ''
  })
}

以上是“apicloud中可以使用vue嗎”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！