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. phpstorm配置Xdebug进行调试

    运行环境: PHPSTORM版本 : 8.0.1 PHP版本 : 5.6.2 xdebug版本:php_xdebug-2.2.5-5.6-vc11-x86_64.dll ps : php版本和xdeb ...

  2. Xshell6设置字体大小

    Xshell可以远程连接到linux服务器,但有时终端字体太小,可以按照如下步骤修改字体大小: 菜单栏: 文件-属性-外观,修改字体大小后点击确定即可(也可以使用ALT+P快捷键打开属性).

  3. [POJ 2689] Prime Distance

    Description 给定两个整数 \(L,R\;(1\leq L\leq R\leq 2^{31},R-L\leq 10^6)\) ,求闭区间 \([L,R]\) 中相邻两个数最大的差是多少,输出 ...

  4. pip更新到18版本后使用pycharm更新问题：module 'pip' has no attribute 'main'

    今天升级pip到18.0版本后更新模块时出现错误 分析报错信息可知,问题出在packaging_tool.py文件的213行和109行,找到具体的代码,如下 # 109行函数 def do_insta ...

  5. C#多线程——优先级

    在我的公司这里,因为要跟很多特殊的设备打交道,所以会用到多线程的东西,那么我们在进行多线程处理的时候,怎么去设置优先级 我这里用听歌和下载小说做了个例子,我们用电脑的时候肯定是可以边听歌边下载小说的, ...

  6. Spring基于XML方式的使用

    一.IoC配置 IoC的配置是通过Spring的xml文件的bean标签进行的. 1.bean标签介绍 bean标签一般是在xml文件进行配置的,xml文件一般样式如下: <?xml versi ...

  7. 伪类选择器 E:nth-child(n)、E:nth-of-type(n)

    结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来 ...

  8. Power BI 与 Azure Analysis Services 的数据关联：1、建立 Azure Analysis Services服务

    Power BI 与 Azure  Analysis Services 的数据关联:1.建立  Azure  Analysis Services服务

  9. spring 开发 Tars

    和不使用 Spring 的 tars HelloWord 项目相比,客户端完全一样,服务端两个地方不一样 创建不使用 Spring 的 tars HelloWord 步骤: https://www.c ...

  10. Salesforce的数据安全防护措施

    通过Salesforce,我们可以配置或开发出功能强大的网络应用.与此同时,无论作为管理员还是开发者,我们都要面对数据安全的问题. 常见的数据安全隐患有: SQL注入 跨站脚本攻击 跨站请求伪造 点击 ...