JLNTV_IPD/vue3-h5-quark-template
4
0
Fork 0
mirror of https://github.com/xsf0105/vue3-h5-template.git synced 2025-04-06 04:00:04 +08:00
Code Issues Projects Releases Wiki Activity

debug

Browse Source
This commit is contained in:
徐顺发 2017-04-24 14:13:34 +08:00
parent ced57dbccf
commit 7565e58113
4 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -10,6 +10,7 @@
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no"> <meta name="format-detection" content="address=no">
<title>vue2spa</title> <title>vue2spa</title>
<link rel="stylesheet" href="./static/reset.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
src/App.vue
View File

@ -14,7 +14,6 @@
</div> </div>
</template> </template>
<script> <script>
import './css/common.css'
import HeaderCompontent from './components/header.vue' import HeaderCompontent from './components/header.vue'
import FootComponent from './components/footer.vue' import FootComponent from './components/footer.vue'
export default{ export default{

46
src/pages/index.vue
View File

@ -1,10 +1,14 @@
<template> <template>
<div class="container"> <div class="container">
<h1>{{msg}}</h1> <button v-on:click="loadList">click me</button>
<button v-on:click="fn1()">点我看控制台</button> <ul>
<li v-for="item in listArr"> <li v-for="(item, index) in listArr">
<a href="javascript:;">{{item.name}}</a> <a :href="item.alt">{{index}} 《{{item.title}}》</a>
</li> </li>
</ul>
<div class="loading" v-if="loading">
Loading...
</div>
</div> </div>
</template> </template>
<script> <script>
@ -14,32 +18,28 @@
export default{ export default{
data () { data () {
return{ return{
msg:'这个页面包含了使用axios去请求ajax数据和其他事件方法', loading: false,
listArr: [], listArr: [],
} }
}, },
created () {
this.init();
},
methods: { methods: {
init: function() { loadList: function() {
var _this = this;
console.log("初始化加载数据开始..."); console.log("初始化加载数据开始...");
axios.get('https://api.github.com/repos/typecho-fans/plugins/contents/At', { var _this = this;
_this.loading = true;
axios.get('https://api.douban.com/v2/movie/top250', {
params: { params: {
// 需要的参数 count: 11
} }
}) })
.then(function (response) { .then(function (response) {
console.log(response,2); // console.log(response);
_this.listArr = response.data; _this.loading = false;
_this.listArr = response.data.subjects;
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
},
fn1: function() {
console.log("这是点击事件!");
} }
} }
} }
@ -56,5 +56,13 @@
margin: 0 auto; margin: 0 auto;
line-height: 30px; line-height: 30px;
} }
a{
color: blue;
}
ul{
margin-bottom: 60px;
}
li{
line-height: 28px;
}
</style> </style>

1
src/css/common.css → static/reset.css
View File

@ -14,7 +14,6 @@ a{ text-decoration:none; outline: none;}
a:hover{ text-decoration: none; } a:hover{ text-decoration: none; }
a:active, a:focus{ outline:none; } a:active, a:focus{ outline:none; }
b{ font-weight: normal; } b{ font-weight: normal; }
/*input ,button{ border: none; outline: none;}*/
input:not([type="radio"]){appearance:none;-webkit-appearance:none;-o-appearance:none;-moz-appearance:none;} input:not([type="radio"]){appearance:none;-webkit-appearance:none;-o-appearance:none;-moz-appearance:none;}
button:active{ button:active{
transform:scale(0.9); transform:scale(0.9);