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>

Vue框架的两种使用方式的更多相关文章

  1. Windows下Yii2框架的两种安装方式及升级最新版

    第一种:归档文件形式安装(适合于没有安装composer的机器) 进入下载页https://www.yiiframework.com/download,选择下载第一个 下载完成之后是一个压缩包,解压文 ...

  2. [Vue]实例化Vue时的两种挂载方式el与$mount

    Vue 的$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作.判断等),之后要手动挂载上.new Vue时,el和$mount并没有本质上的不同. 1.el Vue实 ...

  3. 实例化Vue时的两种挂载方式el与$mount

    el 与mount 都是挂载. el vue官网的介绍https://cn.vuejs.org/v2/api/#el mount vue官网的介绍 https://cn.vuejs.org/v2/ap ...

  4. struts2+spring的两种整合方式

    也许有些人会因为学习了struts1,会以为struts2.struts1与spring的整合也是一样的,其实这两者相差甚远.下面就来讲解一下struts2与spring的整合两种方案.(部分转载,里 ...

  5. Laravel框架定时任务2种实现方式示例

    本文实例讲述了Laravel框架定时任务2种实现方式.分享给大家供大家参考,具体如下: 第一种 1.生成一个commands文件 > php artisan make:command test ...

  6. 从上面的集合框架图可以看到，Java 集合框架主要包括两种类型的容器，一种是集合（Collection），存储一个元素集合，另一种是图（Map），存储键/值对映射

    从上面的集合框架图可以看到,Java 集合框架主要包括两种类型的容器,一种是集合(Collection),存储一个元素集合,另一种是图(Map),存储键/值对映射.Collection 接口又有 3 ...

  7. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  8. PyCharm上unittest 测试用例两种执行方式

    每次讲到unittest测试框架的时候,经常有同学在群里反映,为啥我的运行不是按照我往suite里添加的用例顺序执行的,为什么别人的能跑出来报告,我的就不行... 当然,首先确认代码是OK的,如果代码 ...

  9. JAVA高级架构师基础功:Spring中AOP的两种代理方式:动态代理和CGLIB详解

    在spring框架中使用了两种代理方式: 1.JDK自带的动态代理. 2.Spring框架自己提供的CGLIB的方式. 这两种也是Spring框架核心AOP的基础. 在详细讲解上述提到的动态代理和CG ...

随机推荐

  1. github总结(2)--怎样在github上面创建新的分支

    part I:添加新的分支步骤分解 第一步:git branch 查看当前分支情况 git branch //查看当前分支情况 第二步:git branch 分支名,新建一个自己的分支 git bra ...

  2. spring-boot-2.0.3启动源码篇 - 阶段总结

    前言 开心一刻 朋友喜欢去按摩,第一次推门进来的是一个学生美眉,感觉还不错:后来经常去,有时是护士,有时是空姐,有时候是教师.昨天晚上推门进去的是一个女警察,长得贼好看,身材也很好,朋友嗷的一声就扑上 ...

  3. Linux 使用 ssh 命令远程连接另一台 Linux

    用 Linux 系统的 ssh 命令远程连接另一台 Linux 机器的命令 #ssh 用户名@主机名(IP地址) 例: #ssh root@10.41.24.138                  ...

  4. Apollo 4 客户端 SDK 设计

    前言 之前聊了客户端的一些功能,例如融入 Spring, @value 注解的自动刷新实现,长轮询等,这次从客户端的整体设计来聊聊. 设计 上图是 client 项目的包结构. 其中,核心包就是 in ...

  5. VirtualBox centos7扩容

    有时候扩容还真不如重新建立一个大硬盘的系统,但是如果你安装了好多东西的话,那还是来扩容一下吧. 查看磁盘格式           在virtualBox中右键点击虚拟机->设置->存储,如 ...

  6. FTP 150 Opening BINARY mode data connection for MLSD 读取目录列表失败

    这完全是因为防火墙的问题,把服务器的防火墙关闭之后,在连接,一切ok

  7. String，StringBuilder， StringBuffer

    String:适用于少量的字符串操作的情况 StringBuilder:适用于单线程下在字符缓冲区进行大量操作的情况 StringBuffer:适用多线程下在字符缓冲区进行大量操作的情况

  8. 【转】Dubbo和JDK的SPI究竟有何区别?

    前言 上一篇简单的介绍了spi的基本一些概念,但是其实Dubbo对jdk的spi进行了一些改进,具体改进了什么,来看看文档的描述 JDK 标准的 SPI 会一次性实例化扩展点所有实现,如果有扩展实现初 ...

  9. API接口规范V1.0——制定好规范，才好合作开发

    返回码规范: 统一六位 000000 表示成功! 参数相关返回码预留100000-199999:系统相关返回码预留200000-299999:数据中心310000-319999后续项目以此类推,后续根 ...

  10. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...