Live Template
1、工具
idea是本人最喜歡的開發工具，安裝和破解也非常簡單。（見博客）
2、自定義的 Live Template
- hget
let params = {type: 'TIP'}
this.$http.get('/v1/xx', {params})
.then(res =>{
console.log(res)
if (res.status === 200){
this.tipInfo = res.data;
this.$message({type: 'success',message: '請求成功!'});
}
})
.catch(err=>{
let {response} = err
if (response){
this.$message.error(response.data.message);
return false;
}else {
console.log(err)
}
})
- hpost
let params = {type: 'TIP'}
this.$http.post('/v1/xx', params)
.then(res =>{
console.log(res)
if (res.status === 200){
this.tipInfo = res.data;
this.$message({type: 'success',message: '請求成功!'});
}
})
.catch(err=>{
let {response} = err
if (response){
this.$message.error(response.data.message);
return false;
}else {
console.log(err)
}
})
①、
post/delete/put請求和get請求的區別是：get請求的參數要是 {params:{..}}格式，而post/delete/put請求沒有params,直接傳{..}對象。
②、 使用上面$http發起請求，前提是封裝了axios工具。
- storeuser
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
user: {
username: ""
}
},
getters: {
getUser(state){
return state.user;
}
},
mutations: {
updateUser(state,user){
state.user = user;
}
},
actions: {
asyncUpdateUser(content, user){
content.commit('updateUser', user);
}
}
})
vuex 模板
- vue
<template>
<div></div>
</template>
<script>
//這里可以導入其他文件，如：組件、工具js、第三方插件js、json文件、圖片文件等
//例如：import [組件名稱] from [組件路徑];
export default {
//import引入的組件需要注入到對象中才可以使用
components: {},
//父子組件傳遞數據
props: {},
data(){
//這里存放數據
return {};
},
//計算屬性，類似於data概念
computed: {},
//偵聽器，監聽data中的數據變化
watch: {},
//方法集合
methods: {
},
//生命周期 - 創建完成（可訪問當前this實例）
created() {},
//生命周期 - 掛載完成（可訪問DOM元素）
mounted(){
},
//生命周期 - 創建之前
beforeCreated(){},
//生命周期 - 掛載之前
beforeMount(){},
//生命周期 - 創建之前
beforeCreated(){},
//生命周期 - 更新之前
beforeUpdate(){},
//生命周期 - 更新之后
updated(){},
//生命周期 - 銷毀之前
beforeDestroy(){},
//生命周期 - 銷毀完成
destroyed(){},
//如果頁面有keep-alive緩存功能，這個函數a會觸發
activated(){},
}
</script>
<style lang="scss" scoped>
/*@import url(); 引入公共的css類*/
</style>
vue 單頁面模板
- vuehtm
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{a}}</h1>
<button v-on:click="b">點擊</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
a: 666
},
methods: {
b() {
this.a--;
}
}
})
</script>
</body>
</html>
html中簡單的vue對象模板
3、添加步驟
安裝下圖步驟進行即可：
