Vue开发的两种方式:静态资源引入开发 和 脚手架交互式开发

这里使用的是静态资源引入开发

首先 引用jquery.js  和  vue.js

html 标签内加个

<div id="box">内容</div>

<script>
var vm = new Vue({
el: '#box',
data: {
lists: [],
adverts: [],
page: "",
airdropLists: [],
airdropId: ''
},
created: function () {
var that = this
that.token = localStorage.getItem('token')
console.log(that.token)
that.post()
that.getList()
},
mounted() { // 通知公告
var swiper = new Swiper('.swiper-notice', {
direction: 'vertical',
autoplay: {
delay: ,
disableOnInteraction: false,
},
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true//修改swiper的父元素时,自动初始化swiper
});
},
methods: {
post: function () {
var that = this;
$.ajax({
type: "POST", //提交方式
url: URL + "index.php/Api/Member/advert", //广告
dataType: 'json',
data: {},
success: function (res) { //返回数据根据结果进行相应的处理
console.log(res.data.advert)
if (res.code == ) {
that.adverts = res.data.advert
}
}
})
},
// 获取订单列表
getList: function () {
var that = this
$.ajax({
type: "POST", //提交方式
url: URL + "/index.php/Api/Airdrop/airdrop_list", //空投列表
dataType: 'json',
data: {
// token: that.token,
page:
},
success: function (res) { //返回数据根据结果进行相应的处理
console.log(res)
if (res.code == ) {
that.airdropLists = res.data
}
}
})
},
login: function (airdrop_id) {
var that = this
console.log(airdrop_id)
that.airdrop_id = airdrop_id
console.log()
if (that.token == null) {
window.location.href = "loginRegister.html";
}
else {
window.location.href = "airdropDetails.html?airdrop_id=" + airdrop_id;
}
},
logined: function () {
var that = this
if (that.token == null) {
window.location.href = "loginRegister.html";
}
},
},
}); </script>

VUE.js 简单引用的更多相关文章

  1. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  2. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  3. Vue.js简单的应用

    1:一个简单实现 下面代码部分: <body> <div id="myDiv1"> {{userName}} </div> </body& ...

  4. vue.js简单添加和删除

    这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...

  5. vue.js 组件引用之初级 之二

    1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...

  6. vue.js 组件引用之初级

    1. 构造组件,及组件引用:1.1 构造一个组件,1.2 注册一个组件,1.3  实例化Vue()即引用Vue() <!DOCTYPE html> <html lang=" ...

  7. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

  8. Vue.js简单记录

    官网:https://cn.vuejs.org/ https://cn.vuejs.org/v2/api/#methods v-bind 缩写 <!-- 完整语法 --> <a v- ...

  9. Vue.js简单实践

    直接上代码,一个简单的新闻列表页面(.cshtml): @section CssSection{ <style> [v-cloak] { display: none; } </sty ...

随机推荐

  1. xcode工程编译错误之iOS解决CUICatalog: Invalid asset name supplied问题

    [问题分析]: 这个问题其实是老问题,产生原因就是因为在使用的时候 [UIImage imageNamed:]时,图片不存在或者传入的图片名为nil. [解决方法]: 添加一个系统断点,来判断如果图片 ...

  2. Spark MLlib之使用Breeze操作矩阵向量

    在使用Breeze 库时,需要导入相关包: import breeze.linalg._ import breeze.numerics._ Breeze创建函数 //全0矩阵 DenseMatrix. ...

  3. 这5个实用技巧,教你设计出更好的App

    三年前,谷歌公司分享了一项研究:用户平均会安装36个app在手机上,但每天都使用的只有9个.据统计,只有4%的app会被使用一年以上. 所以,能运用基本用户体验设计原则来设计出更好的app,对公司大有 ...

  4. SpringBoot框架的使用

    什么是SpringBoot Spring Boot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目.大多数SpringBoot项目只需要很少的配置文件. SpringBoo ...

  5. Java过关测验

    库存物资管理系统一.背景资料:1.有一个存放商品的仓库,每天都有商品出库和入库.2.每种商品都有名称.生产厂家.型号.规格等.3.出入库时必须填写出入库单据,单据包括商品名称.生产厂家.型号.规格.数 ...

  6. TCP、UDP以及HTTP的简单讲解

    先来一个讲TCP.UDP和HTTP关系的 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议.在传输层中有T ...

  7. ECMAScript6 入门教程 初学记录let命令 块级作用域

    一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...

  8. acm 2015北京网络赛 F Couple Trees 主席树+树链剖分

    提交 题意:给了两棵树,他们的跟都是1,然后询问,u,v 表 示在第一棵树上在u点往根节点走 , 第二棵树在v点往根节点走,然后求他们能到达的最早的那个共同的点 解: 我们将第一棵树进行书链剖,然后第 ...

  9. 【Spark-core学习之九】 Spark案例

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  10. Python 两个星号(**)的 参数

    将参数以字典的形式导入