1.想要将内容只显示一部分,超过的部分用 ... 代替
<template>
<div v-theme="'wide'" id="show-blogs">
<h1>博客总览</h1>
<div v-for="blog in blogs" class='single-blog'>
<h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
<article>
{{blog.body | snippet}}
</article>
</div>
</div>
</template>
自定义一个 snippet ,在main.js中(这是全局的写法)
//自定义过滤器
Vue.filter("snippet",function(value){
return value.slice(0,100) + " ..."
})
在本页面中写(这是本页面的写法)
filters:{
'snippet':function(value){
return value.slice(0,100) + " ..."
}
2.vue 3.x 安装axios
npm i -S axios
安装好了之后,在main.js中引用
import axios from 'axios'
Vue.prototype.axios = axios; //这样之后可以用this这样的方式使用axios
在vue.config.js中,没有这个文件就新建一个
module.exports = {
devServer:{
proxy:{
// 要是代理的是本地接口要放在上面
'/api':{
'target':'http://12.12.12.12',
'changeOrigin':true
}
}
}
}
用法:
get方法:
this.axios.get('/api/qqq').then((res)=>{
})
post方法:
<template>
<div class="login_body">
<div>
<input v-model="username" class="login_text" type="text" placeHolder="账户名/手机号/Email" >
</div>
<div>
<input v-model="password" class="login_text" type="password" placeHolder="请输入您的密码" >
</div>
<div class="login_btn">
<input type="submit" value="登录" @touchstart="handleToLogin">
</div>
<div class="login_link">
<a href="#">立即注册</a>
<a href="#">找回密码</a>
</div>
</div>
</template>
<script>
export default {
name : 'Login',
data(){
return{
username:'',
password:''
}
},
methods:{
handleToLogin(){
this.axios.post('/api2/login',{
username : this.username,
password : this.password
}).then((res)=>{
console.log(res)
})
}
}
}
</script>
3. tap 和 touchstart 的区别
touchstart 在点击和滑动的时候都会触发点击事件
tap只有在点击的时候才会触发事件,滑动的时候是不触发的
为什么不用 click 呢,因为 click 在移动端是有延迟的,延迟200~300ms,所以在移动端不用 click
由于tap事件在vue中是没有的,所以要安装插件 better-scroller
npm i -S better-scroll