vue对移动端用户支持不是很友好,于是第三方开发了针对移动用户的组件:
饿了么:MInt-UI,ElementUI(pc端)
开源团队:MUI
MintUI:
(1)toast:
methods:{
show(){
var mytoast = this.$toast({
message:“数据等待中…”,
position:“top”,
/duration:-1,/
className:"mySty",//自定义样式
})
setTimeout(()=>{
mytoast.close()
},2000)
}
},
created(){
this.show()
}
(2)图片懒加载:加载图片时转圈
var app = new Vue({
el:"#app",
data:function () {
return {
list:["img/t1.png","img/t2.png","img/t3.png","img/t4.png"]
}
}
})
<div id="app">
<ul >
<li v-for="item in list">
![在这里插入图片描述]()
</li>
</ul>
</div>
<style>
ul li img{
width:100%;
}
ul li{
list-style: none;
background: #333;
}
ul li img[lazy=loading]{
width:100%;
height:100px;/*转圈的高度*/
margin: auto;
}
</style>
脚手架:自动创建项目的目录结构,本地调试,热加载(代码修改后,浏览器自动更新),代码部署。
引入mint-ui:
下载:npm i mint-ui
在main.js里:
//引入mintui的header组件
import { Header,Swipe,SwipeItem } from "mint-ui"
//注册。
Vue.component(Header.name,Header)
Vue.component(Swipe.name,Swipe)
Vue.component(SwipeItem.name,SwipeItem)
引入vue-resource:(和axios功能一样,发送ajax请求。)
下载:npm i vue-resource
引入:import vueResource from "vue-resource"
注册:Vue.use(vueResource)
引入cors模块(服务器端解觉跨域问题)
下载包:npm i cors
服务器端的app.js:
const cors = require "cors"
app.use(cors({
origin:[
"http://localhost:8082","http://127.0.0.1:8082"
],credentials:true
}))
npm i bao -g:会将包安装到默认目录:
C:\Users\gyj\AppData\Roaming\npm\node_modules
没加-g则会安装到当前目录。
//配置服务器根目录,写在main.js里,这是vue-resource提供的。
Vue.http.options.root = 'http://127.0.0.1:3000/'
//请求时:
methods:{
getImg(){
this.$http.get("goodslist").then(result=>{//此处只需要简写即可。
this.list = result.body
})
},
//时间过滤器
Vue.filter("dateFilter",function (val) {//val为数据库里查出来的时间数据。
var date = new Date(val)
var year = date.getFullYear()
var month = date.getMonth()+1
var d = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
month<10&&(month="0"+month)
date<10&&(date="0"+date)
hour<10&&(hour="0"+hour)
minute<10&&(minute="0"+minute)
return `${year}-${month}-${d} ${hour}:${minute}`
})