apicloud中可以使用vue吗

四、模块的引用

apicloud中的模块不建议放在vue实例中，而应当放在apiready之内，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的写法能够保证在任何一个安卓版本较低的手机上都能够正常运行。在某些设备中，也出现过安卓版本较低无法正常解析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 = 'BAR';
if (xxx) {
  a = 1;
} else {
  a = 2;
}
console.log(`${b} ${a}`);

原生JavaScript写法（√）：

var a = undefined;
var b = 'BAR';
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很卡。

实例：

  
  
  
  


  
    {{ 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文件将组件内容从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吗”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！