vue學習筆記二

父子間傳值

一、父組件可使用 props 把數據傳給子組件。
二、子組件可使用 $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。複製代碼