apicloud可以用vue吗
apicloud可以用vue，其使用方法：首先在apicloud页面中引入vue.min.js；然后在需要使用vue.js进行模板渲染的地方标记id；最后在apiready方法中根据标记了id的元素初始化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: '#vue', // 与标记的id相同
data: function() {
return {
message: 'Hello world!'
};
},
});
};
</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: '#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：
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: '#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>'
})
}Atas ialah kandungan terperinci apicloud可以用vue吗. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Cara menambah fungsi ke butang untuk vue
Apr 08, 2025 am 08:51 AM
Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara merujuk fail js dengan vue.js
Apr 07, 2025 pm 11:27 PM
Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.
Cara Menggunakan Watch di Vue
Apr 07, 2025 pm 11:36 PM
Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.
Cara kembali ke halaman sebelumnya oleh Vue
Apr 07, 2025 pm 11:30 PM
Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.
Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page?
Apr 07, 2025 pm 11:57 PM
Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.
Cara Menanyakan Versi Vue
Apr 07, 2025 pm 11:24 PM
Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.
Cara melompat ke Div Vue
Apr 08, 2025 am 09:18 AM
Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.
