Vue的小例子

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