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. iOS ipa包瘦身，iOS8及以下text段超60MB

    前沿 很早之前写过一篇相关文章,不过博客主机上跑路了之后数据没了,凭着记忆补了下相关资料 ipa安装包瘦身 清理无用图片,图片压缩(PNG换WebP和JPG),处于某种不可抗拒的原因,导致有部分3X图 ...

  2. 信号为E时，如何让语音识别脱“网”而出？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯教育云发表于云+社区专栏 一般没有网络时,语音识别是这样的 ▽ 而同等环境下,嵌入式语音识别,是这样的 ▽ 不仅可以帮您边说边识. ...

  3. 开发php的扩展模块(centos环境下)

    首先下载一份PHP的源码,并上传到centos服务器上 源码下载地址:https://github.com/php/php-src   然后在命令行进入到源码路径下的ext目录 然后创建扩展项目 [r ...

  4. MySQL 解压缩版安装 2017-12-02（完整版，包括异常处理）

    一.安装 1.到mysql官网 http://dev.mysql.com/downloads/mysql/ 下载mysql 注:msi的是安装版     zip是压缩版 2.解压 解压到想安装的目录下 ...

  5. python的Web框架，中间件middleware及djangoAdmin

    简介 用于处理request和response的中间处理的函数,可以创建在项目中的任意位置,只要可以导入即可. 建议创建在APP目录下,方便管理. 函数范式与激活 中间件的范式: # 必须接受get_ ...

  6. nginx作为web服务以及nginx.conf详解

    Nginx系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html 1.nginx简介 nginx是一个优秀的web服务程序.反向代理程序.它采用非 ...

  7. String，StringBuilder， StringBuffer

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

  8. hive 表类型

    Hive表有受控表(内部表).外部表.分区表.桶表四种.   内部表,就是一般的表,前面讲到的表都是内布标,当表定义被删除的时候,表中的数据随之一并被删除.   外部表,数据存在与否和表的定义互不约束 ...

  9. NIO学习笔记四 ：SocketChannel 和 ServerSocketChannel

    Java NIO中的SocketChannel是一个连接到TCP网络套接字的通道.可以通过以下2种方式创建SocketChannel: 打开一个SocketChannel并连接到互联网上的某台服务器. ...

  10. addEventListener.js

    document.addEventListener("click",function(){ console.log("添加事件监听") }) 举个例子 : 点击 ...