將小程式頁面改成VUE框架的H5頁面記錄
阿新 • • 發佈：2019-01-03
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>