vue-html5plus A native extension plugin for vuejs based on the html5plus standard!
A native extension plugin for vuejs based on the html5plus standard!
CDN or direct references to download and use <script>
the introduction of the label:
<script src="https://unpkg.com/[email protected]"></script>
Large projects can be installed using npm:
npm install vue-html5plus --save
transfer:
Vue.use(VueHtml5Plus);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<div id="app">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">{{title}}</h1>
</header>
<div class="mui-content mui-content-padded">
<p>定位城市:{{city}}</p>
<p>网络信息:{{networkType}}</p>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-html5plus.js"></script>
<script type="text/javascript" charset="utf-8">
new Vue({
el: '#app',
data: {
title: 'hello vue-html5plus!',
city: '',
networkType: ''
},
mounted: function () {
console.log(JSON.stringify(Vue.os))
},
plusReady: function () {
// 获取定位信息
this.$geolocation.getCurrentPosition().then(function (position) {
this.city = position.address.city;
});
// 获取网络信息
this.networkType = this.$networkinfo.getCurrentNetworkType();
}
})
</script>
</body>
</html>
The plusReady hook is added to the Vue life cycle in the vue-htmlplus plugin, but this hook cannot be used in components and routing.
new Vue({
el: '#app',
plusReady: function () {
// ...
}
})
You can use the $plusReady method in other life cycles of Vue, such as using 5+ API in mounted:
this.plusReady(function() {
// ...
})
An object used to determine the current operating environment.
{
"plus":true,
"stream":false,
"wechat":false,
"android":true,
"iphone":false,
"ipad":false,
"version":"6.0",
"isBadAndroid":false
}
Get the acceleration information of the current device:
this.$accelerometer.getCurrentPosition().then(function (acceleration) {
// ...
});
Monitor device acceleration change information:
this.$accelerometer.watchAcceleration().then(function (acceleration) {
// ...
});
Get current device location information:
this.$geolocation.getCurrentPosition(option).then(function (position) {
// ...
});
Monitoring equipment location change information:
this.$geolocation.watchPosition(option).then(function (position) {
// ...
});
Turn off monitoring device location information:
this.$geolocation.clearWatch(watchId);
Get network information:
this.$networkinfo.getCurrentNetworkType();
Author: vue-html5plus
Source Code: https://github.com/vue-html5plus/vue-html5plus
In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.
Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get
In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.
There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.
Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.