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. Fiddler (进阶)内置命令与断点

    Fiddler 内置命令与断点 命令 对应请求项 介绍 示例 ? All 问号后边跟一个字符串,可以匹配出包含这个字符串的请求 ?google > Body 大于号后面跟一个数字,可以匹配出请求 ...

  2. SPOJ Distinct Substrings SA

    正解:SA 解题报告: 传送门! 啊先给个翻译趴QwQ大概就是说给个字符串,求互不相等的子串的个数 算是道小水题辣趴,,,并不难想到的呢QAQ只是因为是新知识所以巩固下而已QAQ 然后就显然考虑合法方 ...

  3. angular--获取时间方法services

    写了一些公用方法获取自然周.传入开始和结束日期,获取中间全部日期等方法 .service('DateServices', [function () { // 获取某年自然周的方法 (如果是当年,只返回 ...

  4. Ext 修改内容之后 不做任何动作 再次修改时的数据是原来第一次修改前的数据

    转自  http://blog.csdn.net/jaune161/article/details/18220257 在项目开发中遇到这样一个问题,点击Grid中的一条记录并修改,修改完后保存并且刷新 ...

  5. Spring Boot 入门day01

    一.Spring Boot入门 1.Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特 ...

  6. ivew定制主题 less ^3.0 时报错 .bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options?

    按照 ivew 提供的方法定制主题,创建一个 less 文件,在其中覆盖变量,再在 main.js 中引入.戳这里 出现报错: 问题貌似是在于 less 版本...两种解决方法: 1.打开项目pack ...

  7. Parco_Love_gcd

    传送门 出题人说正解为RMQ,鄙人实在太蒟蒻了,不会呀只能暴力…… #include <bits/stdc++.h> using namespace std; #define ll lon ...

  8. java 知识点

    1. java泛型 避免编译错误 (ArrayList定义时候)    避免强制类型装换 2 多态的体现 实现多态主要有以下三种方式:1. 接口实现 2. 继承父类重写方法 3. 同一类中进行方法重载 ...

  9. [转载]资深程序员点评当前某些对Lotus Domino 的不实评论

    实现机关办公自动化工作需要计算机技术的支持,在计算机软件范围中,有网络操作系统软件.数据库软件和开发工具等基本系统软件,在此基础上开发出适合本单位使用的应用软件.对如何选用系统软件,笔者没有发言权,但 ...

  10. Python 第五阶段 学习记录之----rabbmit

    消息服务器rabbmit RabbitMQ 消息队列 python里有两个Q, threading queue.不同线程间数据交互 进程Queue: 不同进程间交互这个说法是错误的. 这个是用于父进程 ...