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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to add functions to buttons for vue
Apr 08, 2025 am 08:51 AM
You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.
How to reference js file with vue.js
Apr 07, 2025 pm 11:27 PM
There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.
How to use watch in vue
Apr 07, 2025 pm 11:36 PM
The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.
What does vue multi-page development mean?
Apr 07, 2025 pm 11:57 PM
Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.
How to return to previous page by vue
Apr 07, 2025 pm 11:30 PM
Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.
How to query the version of vue
Apr 07, 2025 pm 11:24 PM
You can query the Vue version by using Vue Devtools to view the Vue tab in the browser's console. Use npm to run the "npm list -g vue" command. Find the Vue item in the "dependencies" object of the package.json file. For Vue CLI projects, run the "vue --version" command. Check the version information in the <script> tag in the HTML file that refers to the Vue file.
How to use function intercept vue
Apr 08, 2025 am 06:51 AM
Function interception in Vue is a technique used to limit the number of times a function is called within a specified time period and prevent performance problems. The implementation method is: import the lodash library: import { debounce } from 'lodash'; Use the debounce function to create an intercept function: const debouncedFunction = debounce(() => { / Logical / }, 500); Call the intercept function, and the control function is called at most once in 500 milliseconds.
