vue新手入门

Vue

模板

export default {
    components: {
    },
    data () {
        return {
            sightpos: ''
        }
    },
    computed: {
        ISHOME () {
        }
    },
    methods: {
        goBack () {
            this.$router.go(-1)
        }
    },
    created () {
    	this.isHot = this.$route.query.isHot
        this.getDataList()
    }
}
</script>

注册vuetUI

// main.js
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

全局组件

1.创建组件

<script>
export default {
	name: "component_name"
}
</script>

2.导入+注册+使用组件

<template>
	<component_name/>
</template>
<script>
import component_name from ...
components: {
	component_name
}
</script>

事件

1.v-bind

:href="url" 
:class="{XX:XX,}"
:style="{XX:XX,}"

2.v-if

<div v-if="...">
<div v-else-if="...">
<div v-else>

3.v-show

<h1 v-show="hasError">

export default {
	data () {
		return {
			hasError: true
		}
	}
}

4.v-for

<li v-for="item in items" :key="item.id">{{item}}</li>
<li v-for="(item,index) in items" :key="index">{{index}}-{{item.xx}}</li>
<li v-for="(value,key,index) in items" :key="index">{{index}}-{{key}}:{{value}}</li>

5.v-on

@click='FunctionName'
@click='counter += 1'
@click.stop // 阻止冒泡
@click.prevent // 阻止默认
@click.once //只触发一次
@keyup // 按键
@keyup.enter // 回车键
@keyup.delete // 删除键

6.v-model

v-model.trim // 首位空白
v-model.number // 转为数值

过滤器

1.全局使用filter

// src/utils/filters
function unameFormat (name) {
  if (!name) {
    return name
  }
  return name.substr(0, 2) + '***'
}

export {
  unameFormat
}

// main.js
import * as filters from './utils/filters'
// 注册过滤器
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

2.组件内使用filter

export default {
	filters: {
		XX: function(X) {
			...
		}
	}
}

父子通信

1.父到子

• 子

  {{ username }}
  
  export default {
  	props:['username']
  	props: {
  		username: {
  			type:string,
  			required: true,
  			default:'XXX'
  		}
  	}
  }
  

• 父

  <XXX :username="username"/>
  <XXX :username="'XXX'"/>
  
  export default {
  	data () {
  		return {
  			username:"XXX"
  		}
  	}
  }
  

2.子到父

• 子

  this.$emit('myEvent', {name: XXX})
  

• 父

  <XXX @myEvent="doSomething"/>
  export default {
  	methods: {
  		doSomething(data) {
  			...
  		}
  	}
  }
  

ajax.js

import axios from 'axios'
import qs from 'qs'

export const ajax = axios.create({
  headers: {
    source: 'h5',
    icode: 'J2E7C529C06C2D882',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  // 对请求进行格式化
  transformRequest: function (data, headers) {
    return qs.stringify(data)
  },
  // 携带cookie
  withCredentials: true
})

ajax.interceptors.request.use(function (config) {
  console.log('拦截到了request')
  window.app.$toast.loading({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner'
  })
  return config
}, function (error) {
  window.app.$toast.clear()
  return Promise.reject(error)
})

ajax.interceptors.response.use(function (response) {
  console.log('拦截到了respone')
  window.app.$toast.clear()
  return response
}, function (error) {
  if (error.response) {
    if (error.response.status === 406) {
      window.app.$notify({
        message: '未登录，跳转到登录界面',
        type: 'danger'
      })
      window.app.$router.replace({ name: 'Login' })
    } else if (error.response.status === 404) {
      window.app.$toast.clear()
      window.app.$notify({
        message: '服务器正忙',
        type: 'danger'
      })
    } else if (error.response.status === 400) {
      const data = error.response.data
      let msg = data.error_msg ? data.error_msg : '参数错误'
      if (data.error_list) {
        const keys = Object.keys(data.error_list)
        const errObj = data.error_list[keys[0]][0]
        msg = `${errObj.message}, ${errObj.code}`
      }
      window.app.$notify(msg)
    }
    return Promise.reject(error)
  }
})

代理问题

// apis.js
/**
 * 存放所有的接口地址
 */
const baseUrl = 'http://localhost:8080/api'
/**
 * 用户账户相关的接口
 */

const AccountsApis = {
  loginUrl: baseUrl + '/account/user/api/login',
  logoutUrl: baseUrl + '/account/user/logout',
  profileUrl: baseUrl + '/account/user/api/info',
  registerUrl: baseUrl + '/account/user/api/register'
}

const SightApis = {
  sightUrl: baseUrl + '/sight/sight/list/',
  sightDetailtUrl: baseUrl + '/sight/sight/detail/{#id}',
  sightTicketUrl: baseUrl + '/sight/sight/ticket/list/{#id}',
  sightCommentUrl: baseUrl + '/sight/sight/comment/list/{#id}',
  sightImageListUrl: baseUrl + '/tapi/sight/image/list/{#id}'
}

const SystemApis = {
  bannerUrl: baseUrl + '/system/slider/list/',
  smsUrl: baseUrl + '/account/user/api/sms'
}

export {
  AccountsApis,
  SystemApis,
  SightApis
}

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}