将小程序页面改成VUE框架的H5页面记录

微信小程序开发交流qq群 173683895承接微信小程序开发。扫码加微信。1.创建H5项目2.引入文件，复制css，把rpx改成px，在html引入css，并且使样式兼容手机端。<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minim...

a_靖

4526人浏览 · 2018-12-03 11:46:03

a_靖 · 2018-12-03 11:46:03 发布

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

1.创建H5项目

2.引入文件，复制css，把rpx改成px，在html引入css，并且使样式兼容手机端。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

3.引入 vue.js

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

4.在body创建一个div, id='app'; 然后就可以在vue的下方使用vue.js的语法。示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="index.js"></script>
		<!--<script src="../js/JQ.js"></script>-->
	</head>

	<body>
		<div id="app">
			<div class="top_phone">
				<input placeholder="手机号" v-model="kongge_phone" maxlength='{{maxlength}}' type='{{input_type}}'></input>
				<button style='border: 1rpx solid #19ad19; color:#19ad19' v-on:click='phonenumber'>本机号码</button>
			</div>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					maxlength: '13',
					input_type: 'number',
					kongge_phone: '139772844113',
				},
				methods: {
					phonenumber: function() {
						console.log('手机号：'+this.kongge_phone)
					}
				}
			})
		</script>
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^