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. 看图说话，idea 远程调试 tomcat下项目

    tomcat中部署了项目,准备测试远程调试. 1.配置idea 2. 修改catalina.bat,并启动tomcat catalina.bat: ...rem 下面的参数就是从idea配置中复制过来 ...

  2. MongoDB框架Jongo的使用介绍

    1.Jongo可以用来做什么?   Jongo框架的目的是使在MongoDB中可以直接使用的查询Shell可以直接在Java中使用.在官网首页有一个非常简洁的例子:   SHELL:这种查询方式是Mo ...

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

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

  4. 远程登陆Linux服务器

    Xshell 强大的ssh客户端,通过互联网到远程主机.下载:http://www.netsarang.com/download/down_form.html?code=622 1.安装完,新建会话 ...

  5. MYSQL中SHOW的使用整理收藏

    好记性不如乱笔头吧....下面收藏整理了mysql中show 的使用技巧....有需要的博友可以看看哈 a. show tables或show tables from database_name; / ...

  6. SQLite 的 CodeFirst 模式

    目录 问题描述 解决方案 安装依赖包 修改程序配置 App.config 创建模型对象 Person.cs 创建数据上下文 PersonDbContext.cs 主程序调用 Program.cs 注意 ...

  7. Django Rest framework 之 认证

    django rest framework 官网 django rest framework 之 认证(一) django rest framework 之 权限(二) django rest fra ...

  8. CSS 中的 BFC,IFC,GFC和FFC

    原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...

  9. 使用CSS如何解决inline-block元素的空白间距

    早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...

  10. off by null 实战

    前言 off by null 是一个比较有意思的技术 下面通过 hctf2018 的 heapstrom_zero 实战一波. 相关文件(exp, 题目)位于 https://gitee.com/ha ...