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 — two-sum-iii-data-structure-design
import java.util.HashMap; import java.util.Map; /** * Source : https://oj.leetcode.com/problems/two- ...
- PM2来部署nodejs服务器永久开启
pm2 日常使用 1. pm2 是什么? 日常开发中需要启动一个node项目,需要用npm run …,,如果终端被关掉,程序也就自动停止,有时候几个项目一起跑起来,好几个终端开着,个人不太喜欢, ...
- Docker安装(Debian8)-构建简单的SpringBoot应用
安装docker 1. 建立仓库 移除已安装的docker(docker以前被称为docker或者docker-enginer现在称为docker-ce) apt-get remove docker ...
- SpringBoot(3) 文件上传和访问
springboot文件上传 MultipartFile file,源自SpringMVC MultipartFile 对象的transferTo方法,用于文件保存(效率和操作比原先用FileOutS ...
- macOS 系统 .DS_Store 文件详解
.DS_Store 文件 .DS_Store 是 Finder 用来存储这个文件夹的显示属性的:比如文件图标的摆放位置. 显示/隐藏 Mac 隐藏文件 显示:defaults write com.ap ...
- 安装searchd
把安装包解压到 D:coreseek 创建表 create table product( id int key auto_increment, title ), content text ); ins ...
- SpringMVC4+MyBatis+SQL Server2014实现读写分离
前言 基于mybatis的AbstractRoutingDataSource和Interceptor用拦截器的方式实现读写分离,根据MappedStatement的boundsql,查询sql的sel ...
- C++ QT中自定义控件的简单创建
为了给控件添加自定义的方法以及重绘控件,我们需要自定义控件来达到自己希望的结果,网上的自定义控件文章比较少,并且过程比较粗略. 此教程以中文版的QT Creator进行介绍 首先我们创建一个新的项目, ...
- MySQL学习（一） SQL基本操作
SQL的基本操作无非就是增删改查(CRUD),根据对操作的对象分类,又可以分为三类,库操作,表操作与数据操作. 库操作 新增数据库 CREATE DATABASE [IF NOT EXISTS] db ...
- 加快maven中jar包的下载速度，maven镜像收集
maven下载jar包的默认仓库是http://my.repository.com/repo/path速度较慢,通过配置国内镜像提高下载速度 1.打开eclipse--->Window---&g ...