Vue框架的两种使用方式
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框架的两种使用方式的更多相关文章
- Windows下Yii2框架的两种安装方式及升级最新版
第一种:归档文件形式安装(适合于没有安装composer的机器) 进入下载页https://www.yiiframework.com/download,选择下载第一个 下载完成之后是一个压缩包,解压文 ...
- [Vue]实例化Vue时的两种挂载方式el与$mount
Vue 的$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作.判断等),之后要手动挂载上.new Vue时,el和$mount并没有本质上的不同. 1.el Vue实 ...
- 实例化Vue时的两种挂载方式el与$mount
el 与mount 都是挂载. el vue官网的介绍https://cn.vuejs.org/v2/api/#el mount vue官网的介绍 https://cn.vuejs.org/v2/ap ...
- struts2+spring的两种整合方式
也许有些人会因为学习了struts1,会以为struts2.struts1与spring的整合也是一样的,其实这两者相差甚远.下面就来讲解一下struts2与spring的整合两种方案.(部分转载,里 ...
- Laravel框架定时任务2种实现方式示例
本文实例讲述了Laravel框架定时任务2种实现方式.分享给大家供大家参考,具体如下: 第一种 1.生成一个commands文件 > php artisan make:command test ...
- 从上面的集合框架图可以看到，Java 集合框架主要包括两种类型的容器，一种是集合（Collection），存储一个元素集合，另一种是图（Map），存储键/值对映射
从上面的集合框架图可以看到,Java 集合框架主要包括两种类型的容器,一种是集合(Collection),存储一个元素集合,另一种是图(Map),存储键/值对映射.Collection 接口又有 3 ...
- 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解
1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...
- PyCharm上unittest 测试用例两种执行方式
每次讲到unittest测试框架的时候,经常有同学在群里反映,为啥我的运行不是按照我往suite里添加的用例顺序执行的,为什么别人的能跑出来报告,我的就不行... 当然,首先确认代码是OK的,如果代码 ...
- JAVA高级架构师基础功:Spring中AOP的两种代理方式:动态代理和CGLIB详解
在spring框架中使用了两种代理方式: 1.JDK自带的动态代理. 2.Spring框架自己提供的CGLIB的方式. 这两种也是Spring框架核心AOP的基础. 在详细讲解上述提到的动态代理和CG ...
随机推荐
- leetcode — longest-palindromic-substring
import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/longest-palindromic-substri ...
- spring-boot-2.0.3应用篇 - shiro集成
前言 上一篇:spring-boot-2.0.3源码篇 - 国际化,讲了如何实现国际化,实际上我工作用的模版引擎是freemaker,而不是thymeleaf,不过原理都是相通的. 接着上一篇,这一篇 ...
- U3D Time类
Time.time 表示从游戏开发到现在的时间,会随着游戏的暂停而停止计算. Time.timeSinceLevelLoad 表示从当前Scene开始到目前为止的时间,也会随着暂停操作而停止. Tim ...
- JVM参数以及用法
工作以后,发觉真的几乎没有像大学那样空闲的时间,坐下来看看书写写博客了.最近的一篇博客距离现在已经近一个多月了,最近也在复习Java的东西,准备校招,看了看JVM的东西,就当作记笔记. (一)JVM参 ...
- [转]nodejs之cordova 跨平台开发
本文转自:https://blog.csdn.net/bubuxindong/article/details/53787392 cordova原名phonegap,虽然adobe收购了phonegap ...
- 程序员快速掌握的UI设计技巧
一.概要 功能与内在很关键,UI与外表也重要. 1.1.选择主色调 1.1.1.三原色 三原色指色彩中不能再分解的三种基本颜色,我们通常说的三原色,即红.黄.蓝.三原色可以混合出所有的颜色,同时相加为 ...
- C#中的readonly跟const用法小结
总结一下常量和只读字段的区别: 由来: 笔者也是在看欧立奇版的<.Net 程序员面试宝典>的时候,才发现自己长久以来竟然在弄不清出两者的情况下,混用了这么长的时间.的确,const与rea ...
- Markdown字体大小与颜色
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.但是它本身是不支持修改字体.字号与颜色等功能的! CSDN-markdo ...
- PPT文件流转为图片，并压缩成ZIP文件输出到指定目录
实现流程: 接收InputStream流->复制流->InputStream流转为PPT->PPT转为图片->所有图片压缩到一个压缩文件下 注意: 1.PPT文件分为2003和 ...
- 在UWP中实现自己的MVVM设计模式
其实写这篇博文的时候我是拒绝的,因为这牵扯到一个高大上的东西——"框架".一说起这个东西,很多朋友就感觉有点蒙了,尤其是编程新手.因为它不像在代码里面定义一个变量那么显而易见,它是 ...