Vue框架的两种使用方式

Posted 2021-01-05 ww01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue框架的两种使用方式相关的知识，希望对你有一定的参考价值。

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框架的两种使用方式的主要内容，如果未能解决你的问题，请参考以下文章

Vue 注意事项模板语法单双向绑定语法格式 MVVM框架 Object.defineProperty和数据代理操作