溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下apicloud中可以使用vue嗎，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
apicloud可以用vue，其使用方法：首先在apicloud頁面中引入vue.min.js；然后在需要使用vue.js進行模板渲染的地方標記id；最后在apiready方法中根據標記了id的元素初始化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：
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>'
})
}以上是“apicloud中可以使用vue嗎”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
