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. linux 防火墙 iptables 目录

    linux iptables 防火墙简介 Linux 防火墙:Netfilter iptables 自动化部署iptables防火墙脚本

  2. Asp.net 程序连接orcle如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,

    本人使用orcale11g 安装orcale 之类以及navicat配置在这里不提,之后会写一篇文章来说明. 到此已经安装和配置navicat访问数据正常,但是运行Asp.net  程序报错 问题如下 ...

  3. js根据年月得到当前这个月总共有多少天

    let curmonth; var curDay=this.getday(this.year,this.month); if(this.month >=10) { var curDate = t ...

  4. Oracle 11.2.0.4 RAC重建EM案例

    环境:Oracle 11.2.0.4 RAC 重建EM 背景:客户之前的EM已经被损坏,需要重建EM 重建EM的方案有很多,其中最简单的方法是:直接使用emca重建,oracle用户下,只需一条命令搞 ...

  5. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  6. skywalking学习之路---skywalking环境从零搭建部署

    介绍 SkyWalking项目是由华为大牛吴晟开源的个人项目,目前已经加入Apache孵化器.SkyWalking项目的核心目标是针对微服务.Cloud Native.容器化架构提供应用性能监控和分布 ...

  7. 融云开发漫谈:你是否了解Go语言并发编程的第一要义?

    2007年诞生的Go语言,凭借其近C的执行性能和近解析型语言的开发效率,以及近乎完美的编译速度,席卷全球.Go语言相关书籍也如雨后春笋般涌现,前不久,一本名为<Go语言并发之道>的书籍被翻 ...

  8. Python数据分析Pandas库方法简介

    Pandas 入门 Pandas简介 背景:pandas是一个Python包,提供快速,灵活和富有表现力的数据结构,旨在使“关系”或“标记”数据的使用既简单又直观.它旨在成为在Python中进行实际, ...

  9. hihoCoder 1394 : 网络流四·最小路径覆盖

    题目链接:https://hihocoder.com/problemset/problem/1394 题目说是网络流,但是其实就是求有向无环图的最小路径覆盖. 不会网络流,只好用二分匹配了. 把每个点 ...

  10. Docker Kubernetes 介绍 or 工作原理

    Kubernetes 介绍 Kubernetes是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernetes也叫K8S. K8S是Google内部一个叫Borg的容 ...