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. ASP.NET Core 中的 ORM 之 Dapper

    目录 Dapper 简介 使用 Dapper 使用 Dapper Contrib 或其他扩展 引入工作单元 Unit of Work 源代码 参考 Dapper 简介 Dapper是.NET的一款轻量 ...

  2. Algolia使用教程 ， 超详细傻子看都会

    框架描述 发现网上Algolia这块的资料较少,就花了点时间从官网上整理了下,总结了几项常用的功能用法. 现在比较有名的Algolia提供了云搜索的服务.具体办法是我们将数据库的信息以JSON的格式上 ...

  3. K临近算法

    K临近算法原理 K临近算法(K-Nearest Neighbor, KNN)是最简单的监督学习分类算法之一.(有之一吗?) 对于一个应用样本点,K临近算法寻找距它最近的k个训练样本点即K个Neares ...

  4. npm包

    https://www.cnblogs.com/xinxingyu/p/5736244.html     node - glob模块讲解 https://github.com/isaacs/node- ...

  5. JQuery遍历，find()和each()方法

    find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id&q ...

  6. XML部分

    XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式? 两种形式:DTD以及schema: 本质区别:schema本身是xml的,可以被XML解析器解析(这也是从DTD上发展sc ...

  7. 二维码编码与解码类库ThoughtWorks.QRCode

    官方地址:https://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 有源代码和示例程序 支持二维码编码(生成)和解码( ...

  8. 《Visual C# 从零开始学》

    书名 <Visual C# 从零开始学> 图片 时间 2017年4月-5月 学习 对c#的基础语法有了一个较为完全的了解,总体还算顺利没有遇到理解不了的,感觉最好上手的是做windos窗体 ...

  9. IDEA创建简单SSM项目使用传统Jar包

    #IDEA SSM项目使用传统Jar包 创建项目 下一步,命名 下一步,创建完成 下一步,创建资源文件夹resources 页面概览 左侧目录树 演示如下 一些简单的说明 其中包之间的层次调用 ent ...

  10. MVC中使用JQuery方式进行异步请求和使用自带方式进行异步请求

    在MCV中使用异步请求可以很很高效地进行前台和后台的数据传递,在这里,笔者为初学者介绍两种在MVC中常用的异步请求处理方式. 在这里,我们通过在一个页面中放置一个按钮来异步获取当前服务器端的系统时间为 ...