Home > Article > Web Front-end > Can apicloud use vue?
apicloud can use vue. How to use it: first introduce vue.min.js into the apicloud page; then mark the ID where vue.js needs to be used for template rendering; finally, mark it in the apiready method. The element of id can initialize the vue instance.
The operating environment of this article: windows7 system, vue2.0 version, Dell G3 computer.
Vue can be used in apicloud.
How to use Vue.js for efficient development in APICloud?
APICloud officially recommends using native JS for development, but under complex business logic, the development efficiency of native JS is often not as high as the MVVM framework, so using Vue.js can effectively improve development efficiency.
On the premise of not affecting the application performance and the user experience of the native API in Hybrid as much as possible, it is not recommended to use the SPA development mode of Vue.js, that is, it is not recommended to use vue-cli to compile and use vue-router, Single-page applications of vuex, axois and other modules.
Directly using script to introduce vue.js can minimize the coupling between vue and the apicloud project, and will not conflict with the existing native api and native modules.
1. Basic usage
First introduce vue.min.js into the apicloud page (the latest version quoted in this article on October 12, 2019 is v2.6.10).
Then mark the ID where you need to use vue.js for template rendering. For convenience, it is usually marked on the outermost element under the body. Of course, Vue rendering can also be performed on local elements, which does not conflict with the native method.
Finally, after the initialization of apicloud is completed, that is, in the apiready method, the vue instance is initialized according to the element marked with the id.
Sample code:
<!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>2. Processing of page flickering
Generally, when opening a new page that requires vue for rendering, during the rendering process, there will be The code flickers when switching between template and template rendering results. This is because Vue starts rendering after opening the new page apiready. Before rendering, the content of the rendering template is displayed by default, and the result is displayed after the rendering is successful.
Here you can mark v-cloak on the vue template element for processing.
Recommended: "vue tutorial"
Note: Here you need to declare the style of v-cloak as hidden in the style, so that v- is marked before rendering is completed. None of the cloak elements will be displayed.
<!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>3. Use vue instance content for non-vue rendering elements
Using vue for template rendering will have a rendering time. In some pages that have strict requirements on rendering performance and display effects, The main content area is implemented by native HTML, and complex logical operations are rendered by Vue. Some properties or methods in the vue instance may be needed outside the vue rendering area. In this case, the vue instance can be assigned to the global variable of the current page when vue is initialized.
This article uses vm as the vue instance name, but of course it can be changed to something else. Placing the vm outside of apiready can ensure that no error will be reported when the relevant methods are directly called before initialization is completed. Globally using vm as a vue instance can also avoid the need for var that = this; for some callback methods inside vue to redefine the context.
You can use vue global instance vm in the following situations:
When you need to call vue instance content outside the vue rendering area
When using native methods, such as onclick
When you need to call the content of the vue instance in the callback method
Example:
<!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>4. Module reference
It is not recommended that the module in apicloud be placed in the vue instance , but should be placed within apiready and outside the vue instance
Example:
<!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>5. Code style
There are currently many mobile phone manufacturers, and manufacturer version customization is seriously fragmented , different manufacturers have different levels of support for ECMA Script6 syntax, so using native JavaScript can ensure that it can run normally on any mobile phone with a lower Android version. In some devices, there has also been a problem that lower Android versions cannot parse es6 properly. API Cloud does not officially recommend the use of polyfill, so try not to use tools such as polyfill. Instead, choose the officially recommended native js writing method. This can ensure application performance and also ensure that when the API Cloud framework is upgraded in the future, the local code logic will not be broken. There are too many changes.
How to write functions
When writing functions, be careful not to use es6 writing and arrow functions
ES6 writing (×):
foo(value) {
console.log(value);
}
const fun = (value) => {
alert(value);
}Native JavaScript writing method (√):
function foo(value) {
console.log(value);
}
var fun = function(value) {
alert(value);
}Variables and strings
Use native Java Script keywords, and be careful not to use es6 keywords. When concatenating strings, you should also use the native JavaScript plus sign connection.
ES6 writing method (×):
let a;
const b = 'BAR';
if (xxx) {
a = 1;
} else {
a = 2;
}
console.log(`${b} ${a}`);Native JavaScript writing method (√):
var a = undefined;
var b = 'BAR';
if (xxx) {
a = 1;
} else {
a = 2;
}
console.log(a + b);6. Component-based application
Most use vue. js apicloud developers often overlook that they can also carry out component development without using vue-cli compilation, in order to achieve the purpose of componentizing business logic, code reuse and improving production efficiency.
Note: When using native js to develop vue components in apicloud, avoid using v-model to two-way bind the component's value. Similarly, avoid v-model two-way binding in other display lists with large amounts of data, otherwise it will affect the vue rendering efficiency and cause the App to be stuck.
Example:
<!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>'
})
}The above is the detailed content of Can apicloud use vue?. For more information, please follow other related articles on the PHP Chinese website!