Vue框架的兩種使用方式

本文轉載自查看原文 2018-09-11 12:01 3340

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>
    var vm=new Vue({
      el: '#app',
      methods: {
        handleClick: function() {
          this.$toast('Hello world!')
        }
      }
    })
  </script>
</html>

如果要通過js原生代碼或者jQuery設置vue里的變量和方法，那么利用vm，打印它的結構，通過點來取屬性賦值即可

那么，如何將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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 在Vue中使用echarts的兩種方式 vue 頁面跳轉的兩種方式 vue 頁面跳轉的兩種方式 vue常用的兩種跳轉方式 BroadcastReceiver的兩種注冊方式和使用 java框架篇---spring aop兩種配置方式 Vue 百度地圖的兩種使用方式並且動態添加標注淺析使用vue-router實現前端路由的兩種方式 vue項目中導出PDF的兩種方式 vue之導入Bootstrap以及jQuery的兩種方式