Vue框架的兩種使用方式
阿新 • • 發佈：2018-09-11
utf-8 span href 底部 http 通過 js等 emp 按鈕
1、使用Vue CLI工具生成腳手架，這是最常見的使用方式，簡單用模板生成一個HelloWorld Demo，可以學習Vue的SPA項目結構
2、通過script引入Vue.js，詳細如下：這裏搭配Mint-ui
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> </head> <body> <div id="app"> <mt-button @click.native="handleClick">按鈕</mt-button> </div> </body> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入組件庫 --> <script src="https://unpkg.com/mint-ui/lib/index.js"></script> <script> new Vue({ el: ‘#app‘, methods: { handleClick: function() { this.$toast(‘Hello world!‘) } } }) </script> </html>
那麽，如何將SPA 轉成傳統多頁面應用？
1、加頭加尾，DOM的基本結構要有
2、script引入Vue.js等庫，註意Vue放在第一位置引入
3、將xxx.vue文件template內所有 復制到新頁面中，並用id為app的div包裹
4、有樣式的，遷移到新頁面頭部的style中
5、在底部new一個Vue實例，並傳入變量和方法，例如
<script> var vm = new Vue({ el: ‘#app‘, data: { username: ‘‘, password: ‘‘ }, methods: { Login() { console.log("登錄成功", "用戶名", this.username, "密碼", this.password) } } }) </script>
Vue框架的兩種使用方式