父子間傳值
1、父元件可以使用 props 把資料傳給子元件。
2、子元件可以使用 $emit 觸發父元件的自定義事件。
父傳子：
1 父元件 data(){
return{
msg:"兒子兒子，我是你爸爸",
}
},複製程式碼2 父元件
import Child from "./Child"
<Child :title="msg" />
3 子元件
<div>
{{ title }}
</div>
4 子元件
props:['title'],
還可指定型別：
props：{
title:String,
title2:[String,Number],
num:{
type:Number,
default:5 【預設值】
},複製程式碼}
複製程式碼子傳父：
1 子元件
<button @click="sendMsg">按鈕</button>複製程式碼2 子元件
data(){
return{
info:"嗯嗯嗯"
}
},複製程式碼3 子元件
methods:{
sendMsg(){
this.$emit("info",this.info) 【引數1：key 引數2：資料】
},
}複製程式碼4 父元件
<div>
{{ info }}
<Child @info="handlerMsg" />
</div>複製程式碼5 父元件
data(){
return{
info:""
}
},複製程式碼6 父元件
methods:{
handlerMsg(data){
this.info = data;
}複製程式碼vuex
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。
它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。複製程式碼什麼情況下使用vuex
雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。
確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。
一個簡單的 global event bus 就足夠您所需了。
但是，如果您需要構建是一箇中大型單頁應用，
您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇。複製程式碼Actions
Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意非同步操作。複製程式碼簡單操作：
1 cnpm install vuex --save
2 建立一個store倉庫：
在src下建一個store資料夾：
在store下建index.js：
import Vue from "vue"
import Vuex from 'vuex'
Vue.use(Vuex)複製程式碼export default new Vuex.Store({
});
複製程式碼3 main.js下：
import store from "./store"
new Vue({
store,
})
複製程式碼4 在倉庫中定義資料：
用state，定義了count：10
export default new Vuex.Store({
state: {
count: 10
},});複製程式碼5 在倉庫中定義方法：
用mutations分別定義了count 的++和--
export default new Vuex.Store({
state: {
count: 10
},
mutations: {
increment(state) {
state.count++;
},
decrease(state) {
state.count--;
}
},});複製程式碼6 在元件裡用到++ 的事件觸發處定義方法：
methods:{
add(){
// this.$store.commit("increment");
this.$store.dispatch("increment");
}複製程式碼7 在元件裡用到--的事件觸發處定義方法：
methods:{
min(){
// this.$store.commit("decrease");
this.$store.dispatch("decrease");
}
},複製程式碼8 如果要做條件判斷，例如購物車，在倉庫中：
export default new Vuex.Store({
state: {
count: 10
},
mutations: {
increment(state) {
state.count++;
},
decrease(state) {
state.count--;
}
},
getters: { getState(state) {
return state.count > 0 ? state.count : 0
}
}
});複製程式碼9 在需要共享conut這個資料的組建裡：
獲取到getState，放至標籤裡{{ getCount }}
computed:{
getCount(){
// return this.$store.state.count;
return this.$store.getters.getState;
}
},複製程式碼過渡與動畫
1 在css過渡和動畫中自動應用class
過渡類名：
v-enter：進入開始
v-enter-active：執行過程中
v-enter-to：結束動畫
v-leave：離開開始
v-leave-active：離開過程
v-leave-to：離開結束複製程式碼例：一
<transition name="fade"><p v-show="show">哈哈</p></transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>複製程式碼二：
<transition name="hello">
<p v-show="showAnim">嘿嘿</p>
</transition>
<style>
.hello-enter-active{
animation:bounce-in 1s ease;
}
.hello-leave-active{
animation:bounce-in 1s ease reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
</style>複製程式碼2可以配合css動畫庫
<transition name="world" enter-active-class="animated flip"
leave-active-class="animated flip">
<p v-show="libs">呵呵</p>
</transition>複製程式碼axios
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
1.cnpm install axios --save
2.main.js裡：
import Axios from "axios"
Vue.prototype.$axios = Axios複製程式碼3.請求
get請求：
this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
params:{
type:"junshi",
count:30
}
})
.then(res => {
this.newsData = res.data;
console.log(res.data);
})
.catch(error => {
console.log(error);
})
post請求：
form-data:?name=iwen&age=20
x-www-form-urlencoded:{name:"iwen",age:20}
注意：axios接受的post請求引數的格式是form-data格式
this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php", qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
}))
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error);
})複製程式碼4.全域性的axios配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';複製程式碼其他
1. <style scoped></style>
scoped：樣式只在當前元件內生效。
2. 插槽：
單個插槽，具名插槽，作用域插槽（資料是子傳父）
3.自定義指令：
建立一個自定義指令：
例：自動聚焦
directives:{
focus:{
inserted: function (el) {
el.focus()
}
},複製程式碼<input v-focus type="text">複製程式碼4.過濾：
給數字前加符號：
{{ price | moneyChange }}複製程式碼filters:{
moneyChange(value){
if(typeof value === "number"){
return "￥"+value;
}
return value;
},複製程式碼data(){
return{
price:20,
}
},複製程式碼5.資料模擬
Mock：資料模擬
1.自己建立JSON檔案。使用get請求形式訪問資料
優點：方便，快捷
缺點：只能存在get請求
2.專案中整合伺服器，模擬各種介面
優點：模擬真實線上環境
缺點：增加開發成本
3.直接使用線上資料
優點：真實
缺點：不一定每個專案都存在
4.資料模擬庫
http://mockjs.com/
MockJS:
語法：
'list|1-10': [{
'id|+1': 1
}]
1.'name|1': array
從屬性值 array 中隨機選取 1 個元素，作為最終值。
2.'name|+1': array
從屬性值 array 中順序選取 1 個元素，作為最終值。
3.'name|min-max': array
通過重複屬性值 array 生成一個新陣列，重複次數大於等於 min，小於等於 max。
4.'name|count': array
通過重複屬性值 array 生成一個新陣列，重複次數為 count。複製程式碼