apicloud中可以用vue吗?

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: '#vue', // 与标记的id相同
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
    });
  };
</script>

</html>

二、页面闪烁的处理

一般情况下,打开一个需要vue进行渲染的新页面,在其渲染过程中,会出现模板与模板渲染结果切换代码闪烁的效果,这是因为打开新页面apiready之后vue才开始渲染,渲染前默认显示的是渲染模板内容,渲染成功后显示结果。

这里可以在vue模板元素上标记v-cloak进行处理。

注意:这里需要在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: '#vue',
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
    });
  };
</script>

</html>

三、非vue渲染元素使用vue实例内容

使用vue进行模板渲染会有一个渲染时间,在某些对渲染性能和显示效果要求比较严格的页面下,主要内容区域由原生html实现,复杂逻辑运算用vue进行渲染。在vue渲染区域之外可能会需要用到vue实例中的某些属性或方法,这时可以在vue初始化时,将vue实例赋值给当前页面的全局变量。

本文使用vm作为vue实例名称,当然也可以改为其它的。将vm放在apiready之外,可以保证在没有初始化完成时直接调用相关方法不会报错。全局使用vm作为vue实例也可以避免在vue内部的一些回调方法需要var that = this;这样重新制定上下文。

以下几种情形可以使用vue全局实例vm:

  1. vue渲染区之外需要调用vue实例内容时

  2. 使用原生方法时,如onclick

  3. 在回调方法中需要调用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: '#vue',
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
      methods: {
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + '吃了吗?';
          }, 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('Tim')">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('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);
        }
      }
    });
    
  };
</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 = '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很卡。

实例:

<!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: '#vue',
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
      methods: {
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + '吃了吗?';
          }, 3000);
        }
      }
    });
  };
</script>
</html>

通过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:
      '<div class="flex justify-between">' +
        '<div class="flex flex-auto items-center bg-grey-light rounded py-2 px-4">' +
          '<div class="flex-auto"><input @input="handleInput" :disabled="disabled" v-model="model" type="text" style="width: 100%;" :placeholder="placeholder" /></div>' +
          '<i v-if="model && !disabled" @click="handleClear" class="iconfont icon-roundclosefill text-base text-grey pl-2"></i>' +
        '</div>' +
        '<div v-if="model && !disabled" class="flex items-center justify-center text-blue active:text-orange pl-4" @click="handleSearch">查询</div>' +
      '</div>'
  })
}

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是apicloud中可以用vue吗?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏