vue基礎語法

時間  2020-12-13
標籤 javascript css html vue java ios web 正則表達式 vue-router 編程 欄目 JavaScript 简体版
原文   原文鏈接

插值操做

Mustache

(雙大括號)javascript

V-once

元素只渲染一次,不會隨着數據改變而改變
<h2 v-once>{{message}}</h2>

v-html

按照html格式解析
<div id="app">
  <h2>{{url}}</h2>//結果是<a href="http://www.baidu.com">百度一下</a>
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

v-text

和mustache同樣
<div id="app">
  <h2>{{message}}, 李銀河!</h2>
  <h2 v-text="message">, 李銀河!</h2>
</div>

v-pre

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>//直接顯示message
</div>

v-cloak

<style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 在vue解析以前, div中有一個屬性v-cloak
  // 在vue解析以後, div中沒有一個屬性v-cloak
  //vue來不及渲染,直接顯示源代碼,加這個屬性就行

綁定屬性

v-bind

<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>
//圖片的連接src、網站的連接href、動態綁定一些類、樣式

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
      aHref: 'http://www.baidu.com'
    }
  })
</script>
<h2 class="title" v-bind:class="{active: isActive}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>

	<h2 class="title" :class="[active]">{{message}}</h2>

  <button v-on:click="btnClick">按鈕</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClasses: function () {
        return {active: this.isActive}
      }
    }
  })
</script>

:style

<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
  })
</script>

計算屬性

計算屬性和methods的區別:css

計算屬性會進行緩存，若是屢次使用時，計算屬性只會調用一次。html

computed: {
      // fullName: function () {
      //   return this.firstName + ' ' + this.lastName
      // }
      // name: 'coderwhy'
      // 計算屬性通常是沒有set方法, 只讀屬性.
      fullName: {
        set: function(newValue) {
          // console.log('-----', newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get: function () {
          return this.firstName + ' ' + this.lastName
        }
      },
}

事件監聽

參數問題

<div id="app">
  <!--1.事件調用的方法沒有參數-->
  <button @click="btn1Click()">按鈕1</button>
  <button @click="btn1Click">按鈕1</button>

  <!--2.在事件定義時, 寫方法時省略了小括號, 可是方法自己是須要一個參數的, 這個時候, Vue會默認將瀏覽器生產的event事件對象做爲參數傳入到方法-->
  <!--<button @click="btn2Click(123)">按鈕2</button>-->
  <!--<button @click="btn2Click()">按鈕2</button>-->
  <button @click="btn2Click">按鈕2</button>

  <!--3.方法定義時, 咱們須要event對象, 同時又須要其餘參數-->
  <!-- 在調用方式, 如何手動的獲取到瀏覽器參數的event對象: $event-->
  <button @click="btn3Click(abc, $event)">按鈕3</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      abc: 123
    },
    methods: {
      btn1Click() {
        console.log("btn1Click");
      },
      btn2Click(event) {
        console.log('--------', event);
      },
      btn3Click(abc, event) {
        console.log('++++++++', abc, event);
      }
    }
  })

  // 若是函數須要參數,可是沒有傳入, 那麼函數的形參爲undefined
  // function abc(name) {
  //   console.log(name);
  // }
  //
  // abc()
</script>

修飾符

<div id="app">
  <!--1. .stop修飾符的使用-->
  <div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按鈕</button>
  </div>

  <!--2. .prevent修飾符的使用-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!--3. .監聽某個鍵盤的鍵帽-->
  <input type="text" @keyup.enter="keyUp">

  <!--4. .once修飾符的使用-->
  <button @click.once="btn2Click">按鈕2</button>
</div>

條件判斷

key的問題

//切換類型後還會保留原來的內容,由於vue在進行dom渲染時,會複用存在的元素,而不是建立新的元素,添加不一樣的能夠就能解決這個問題
<div id="app">
  <span v-if="isUser">
    <label for="username">用戶帳號</label>
    <input type="text" id="username" placeholder="用戶帳號" >
  </span>
  <span v-else>
    <label for="email">用戶郵箱</label>
    <input type="text" id="email" placeholder="用戶郵箱" >
  </span>
  <button @click="isUser = !isUser">切換類型</button>
</div>
<div id="app">
  <span v-if="isUser">
    <label for="username">用戶帳號</label>
    <input type="text" id="username" placeholder="用戶帳號" key="username">
  </span>
  <span v-else>
    <label for="email">用戶郵箱</label>
    <input type="text" id="email" placeholder="用戶郵箱" key="email">
  </span>
  <button @click="isUser = !isUser">切換類型</button>
</div>

v-if和v-show的區別

v-if:條件爲false,不會存在dom中vue

v-show:條件爲false,會添加行內樣式display:nonejava

循環遍歷

遍歷數組

<div id="app">
  <!--1.在遍歷的過程當中,沒有使用索引值(下標值)-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

  <!--2.在遍歷的過程當中, 獲取索引值-->
  <ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>
</div>

遍歷對象

<div id="app">
  <!--1.在遍歷對象的過程當中, 若是隻是獲取一個值, 那麼獲取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>


  <!--2.獲取key和value 格式: (value, key) -->
  <ul>
    <li v-for="(value, key) in info">{{value}}-{{key}}</li>
  </ul>


  <!--3.獲取key和value和index 格式: (value, key, index) -->
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      }
    }
  })
</script>

遍歷時添加key

//能夠高效更新虛擬dom
<ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>

檢查數組更新

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
// 1.push方法
        // this.letters.push('aaa')
         this.letters.push('aaaa', 'bbbb', 'cccc')

        // 2.pop(): 刪除數組中的最後一個元素
         this.letters.pop();

        // 3.shift(): 刪除數組中的第一個元素
         this.letters.shift();

        // 4.unshift(): 在數組最前面添加元素
        // this.letters.unshift()
         this.letters.unshift('aaa', 'bbb', 'ccc')

        // 5.splice做用: 刪除元素/插入元素/替換元素
        // 刪除元素: 第二個參數傳入你要刪除幾個元素(若是沒有傳,就刪除後面全部的元素)
        // 替換元素: 第二個參數, 表示咱們要替換幾個元素, 後面是用於替換前面的元素
        // 插入元素: 第二個參數, 傳入0, 而且後面跟上要插入的元素
        // splice(start)
        // splice(start):
				
				//第二個參數:不傳=刪除後面全部,傳3=替換3個,傳0=插入的元素
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 0, 'x', 'y', 'z')

        // 5.sort()
         this.letters.sort()

        // 6.reverse()
         this.letters.reverse()

        // 注意: 經過索引值修改數組中的元素
        // this.letters[0] = 'bbbbbb';
        // this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的對象, 索引值, 修改後的值)
        // Vue.set(this.letters, 0, 'bbbbbb')

雙向綁定

v-model的原理

首先須要實時獲取數據,那麼就須要:vlalue.
而後修改數據時,同步到data.那麼就須要@input方法實時把數據發到data
<div id="app">
  <!--<input type="text" v-model="message">-->
  <input type="text" :value="message" @input="valueChange">
  <!-- <input type="text" :value="message" @input="message = $event.target.value"> -->
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

修飾符

<div id="app">
  <!--1.修飾符: lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>


  <!--2.修飾符: number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修飾符: trim-->
  <input type="text" v-model.trim="name">
  <h2>您輸入的名字:{{name}}</h2>
</div>

組件化開發

步驟解析

  1. Vue.extend()建立一個組件構造器,同時傳入自定義組件模板
  2. Vue.component()註冊組件,並給他起一個標籤名.因此須要傳組件構造器和標籤名
  3. 掛載Vue的實例下,不然不會生效

組件數據返回值

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>當前計數: {{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  // 1.註冊組件
  const obj = {
    counter: 0
  }
  Vue.component('cpn', {
    template: '#cpn',
    // data() {
    //   return {
    //     counter: 0
    //   }
    // },
    data() {
      return obj
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

props基本用法

//在這裏傳值,message是父組件的數據對象
<cpn :cmessage="message" :cmovies="movies"></cpn>


//數組中的字符串就是傳遞時的名稱
props: ['cmovies', 'cmessage']
  
//這種能夠設置默認值,類型
props: {
      // 1.類型限制
      // cmovies: Array,
      // cmessage: String,

      // 2.提供一些默認值, 以及必傳值
      cmessage: {
        type: String,
        default: 'aaaaaaaa',
        required: true
      },
      // 類型是對象或者數組時, 默認值必須是一個函數
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
}

子組件向父組件傳值

自定義事件流程
1.在子組件經過$emit()來觸發事件
2.在父組件經過v-on來監聽子組件的事件
<!--父組件模板-->
<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子組件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  // 1.子組件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '熱門推薦'},
          {id: 'bbb', name: '手機數碼'},
          {id: 'ccc', name: '家用家電'},
          {id: 'ddd', name: '電腦辦公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // 發射事件: 自定義事件
        this.$emit('item-click', item)
      }
    }
  }

  // 2.父組件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })
</script>

組件訪問

<div id="app">
  <cpn></cpn>
  <cpn></cpn>

  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按鈕</button>
</div>

<template id="cpn">
  <div>我是子組件</div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        // 1.$children
        console.log(this.$children);
        for (let c of this.$children) {
          console.log(c.name);
          c.showMessage();
        }

        // 2.$refs => 對象類型, 默認是一個空的對象 ref='bbb'
        console.log(this.$refs.aaa.name);
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '我是子組件的name'
          }
        },
        methods: {
          showMessage() {
            console.log('showMessage');
          }
        }
      },
    }
  })
</script>
//子組件訪問父組件
//不推薦使用,耦合過高了

// 1.訪問父組件$parent
 console.log(this.$parent);
 console.log(this.$parent.name);

// 2.訪問根組件$root
console.log(this.$root);
console.log(this.$root.message);

插槽slot

封裝原則:保留共性,將不一樣暴露爲插槽ios

  • 若是有多個值, 同時放入到組件進行替換時, 一塊兒做爲替換元素

插槽做業域

父組件替換插槽的標籤,內容由子組件提供web

<div id="app">
  <cpn></cpn>

  <cpn>
    <!--目的是獲取子組件中的pLanguages-->
    <template slot-scope="slot">
      <!-- <span v-for="item in slot.data"> - {{item}}</span> -->
      <!-- <span>{{slot.data.join(' - ')}}</span> -->
    </template>
  </cpn>

</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }
      }
    }
  })
</script>

Webpack

導入

// 1.使用commonjs的模塊化規範
const {add, mul} = require('./js/mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用ES6的模塊化的規範
import {name, age, height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

// 3.依賴css文件
require('./css/normal.css')

Vue-router

history.pushStath({},'','/home')  //有歷史記錄
historyreplaceState({},'','/foo/bar')	//沒歷史記錄

history.back() 等價於 history.go(-1)
history.forward() 則等價於 history.go(1)

使用vue-router步驟

  1. 建立router實例並掛載到vue實例中
  2. 建立路由組件
  3. 配置路由映射關係:組件和路徑的映射關係
  4. 使用路由:經過<router-link>和<router-view>
router實例
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'

//注入插件
Vue.use(VueRouter)

//定義路由
const routes =[
  {path:'',redirect:'/home'},
  {path:'/home',component:Home},
  {path:'/about',component:About}
]

//建立router實例
const router = new VueRout({
  routes,
  mode:'history',
  linkActiveClass:'active'
})
export default router
掛載到vue實例中
import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el:'#app',
  router,
  render:h=>h(App)
})
使用路由
<template>
  <div id="app">
    <router-link to="/home">首頁</router-link>
		<router-link to="/about">關於</router-link>
		<router-view></router-view>
		//能夠用這種方法替代組件
		//<button @click="homeClick">首頁</button>
    //<button @click="aboutClick">關於</button>
	</div>
</template>

export default{
  name:'App',
  methods:{
    homeClick(){
      //至關於pushstate
      this.$router.push('/home')
    },
    aboutClick(){
      this.$router.replace('/about')
    }
  }
}

router-link

tag: tag能夠指定<router-link>以後渲染成什麼組件, 好比上面的代碼會被渲染成一個<li>元素, 而不是<a>
replace: replace不會留下history記錄, 因此指定replace的狀況下, 後退鍵返回不能返回到上一個頁面中
active-class: 當<router-link>對應的路由匹配成功時, 會自動給當前元素設置一個router-link-active的class

		<router-link to="/home" tag="button" replace active-class="active">首頁</router-link>
    <router-link to="/about" tag="button" replace active-class="active">關於</router-link>

動態路由

//router
routes這麼配置
{
    path: '/user/:id',
    component: User,
    meta: {
      title: '用戶'
    },
},
//地址這麼寫
<router-link to="/user/123">用戶</router-link>
//路由對應的組件
<h2>{{userId}}</h2>

<h2>{{$route.params.id}}</h2>

//這樣也行

computed: {
      userId() {
        return this.$route.params.id
      }
},

路由懶加載

//在router這麼導入組件
const Home = () => import('../components/Home')

嵌套路由

步驟正則表達式

  1. 建立子組件,並在路由映射中配置
  2. 在組件內部使用<router-view>標籤
{
    path: '/home',
    component: Home,
    meta: {
      title: '首頁'
    },
    children: [
      //能夠配置默認路由
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
},
home組件
<router-link to="/home/news">新聞</router-link>
<router-link to="/home/message">消息</router-link>

<router-view></router-view>

傳遞參數

params的類型:

配置路由格式: /router/:id 傳遞的方式: 在path後面跟上對應的值 傳遞後造成的路徑: /router/123, /router/abcvue-router

query的類型:

配置路由格式: /router, 也就是普通配置 傳遞的方式: 對象中使用query的key做爲傳遞方式 傳遞後造成的路徑: /router?id=123, /router?id=abc編程

<router-link :to="'/user/'+userId">用戶</router-link>

<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">
js方式
profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.87
        }
      })
}

獲取參數

獲取參數是經過$route對象獲取

<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.height}}</h2>

<h2>{{$route.params.id}}</h2>

route和router區別

route能夠獲取name,path,query,params等

routers vueRouter的實例,導航到不一樣的URL就用$router.push()方法

導航守衛

導航鉤子的三個參數解析: to: 即將要進入的目標的路由對象. from: 當前導航即將要離開的路由對象. next: 調用該方法後, 才能進入下一個鉤子.

能夠利用beforeEach來完成標題的修改

步驟

  1. 在路由中添加標題
  2. 利用導航守衛修改標題
{
    path: '/about',
    component: About,
    meta: {
      title: '關於'//在這定義標題
    },
    beforeEnter: (to, from, next) => {	//建立路由獨享守衛
      // console.log('about beforeEnter');
      next()
    }
  },
// 前置守衛(guard)
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title//修改標題
  // console.log('執行完這行就執行afterEach方法');
  next()
})
// 後置鉤子(hook)不須要主動調用next()函數.
router.afterEach((to, from) => {
  // console.log('----');
})

Keep-alive

keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。

//include - 字符串或正則表達，只有匹配的組件會被緩存
//exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存
<keep-alive exclude="Profile,User">//不要隨便加空格
      <router-view/>
</keep-alive>

Promise

//普通方式
new Promise((resolve,reject){
    setTimeout(()=>{
      //成功執行resolve
      resolve('Hello World')
      //失敗執行reject
      reject("error message")
    })
}).then((data)=>{
  //處理代碼
  conssole.log(data)
}).catch((err)=>{
  //錯誤時執行這裏
  console.log(err)
})
//另一種方式,resolve和reject寫在then裏
new Promise((resolve,reject)){
  setTimeout(()=>{
    //正確時執行
    resolve('Hello')
    //錯誤時執行
    reject('error')
  },1000)
  
}.then(data=>{
  console.log(data)
},err=>{
  console.log(err)
})
//鏈式編程
new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    // 1.本身處理10行代碼
    console.log(res, '第一層的10行處理代碼');
  
    // 2.對結果進行第一次處理
    return new Promise((resolve, reject) => {
      // resolve(res + '111')
      reject('err')
    })
  }).then(res => {
    console.log(res, '第二層的10行處理代碼');
  
    return new Promise(resolve => {
      resolve(res + '222')
    })
  }).then(res => {
    console.log(res, '第三層的10行處理代碼');
  }).catch(err => {
    console.log(err);
  })
//普通寫法
return new Promise((resolve,reject)=>{
	resolve(res+'111')
})

//縮寫
return Promise.resolve(res+"111")

//省略
return res+'111'

異步操做

普通方式
1. 發送對象
	a.對象裏攜帶參數信息
	b.成功執行的方法
2.action裏發起async

//組件方法
updateInfo() {

  this.$store.dispatch('aUpdateInfo', {
    message: '我是攜帶的信息',
    success: () => {
      console.log('裏面已經完成了');
    }

}
                       
//action方法
 aUpdateInfo(context, payload) {
    setTimeout(() => {
      context.commit('updateInfo')
      console.log(payload.message);
      payload.success()
    }, 1000)
  }                      



promise方式
1.發送參數信息
2.action返回promise對象
	a.promise對象裏發起async
3.在組件執行then方法

//組件方法
updateInfo() {

  this.$store
  .dispatch('aUpdateInfo', '我是攜帶的信息')
  .then(res => {
    console.log('裏面完成了提交');
    console.log(res);
  })

}
                       
//action方法                                      
aUpdateInfo(context, payload) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit('updateInfo');
        console.log(payload);

        resolve('1111111')
      }, 1000)
    })
  }

all方法

Promise.all([

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'why', age: 18})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'kobe', age: 19})
      }, 1000)
    })
]).then(results => {
  console.log(results);
})

VueX

核心概念

  • State
  • getters
  • Mutation
  • action
  • module

getters

//普通寫法
powerCounter(state) {
    return state.counter * state.counter
}
//傳參數寫法
//在組件中這麼寫
<h2>{{$store.getters.moreAgeStu(12)}}</h2>
//getters這麼寫
moreAgeStu(state) {
    // return function (age) {
    //   return state.students.filter(s => s.age > age)
    // }
    return age => {
      return state.students.filter(s => s.age > age)
    }
}

mutation

//不傳參數寫法
//在組件這麼寫方法
subtraction() {
  this.$store.commit('decrement')
}
//在mutation這麼寫
decrement(state) {
    state.counter--
}
//傳參數寫法
//在組件中這麼寫方法
addCount(count) {
  // payload: 負載
  // 1.普通的提交封裝
  //這麼寫,payload就是參數
  // this.$store.commit('incrementCount', count)

  // 2.特殊的提交封裝
  //若是這麼寫,mutation要拿到參數須要payload.參數
  this.$store.commit({
    type: 'incrementCount',
    count
  })
},
  
//在mutation中這麼寫
incrementCount(state, payload) {
    // console.log(count);
    state.counter += payload.count
  },

響應規則

//能夠實時響應
Vue.set(state.info, 'address', '洛杉磯')
Vue.delete(state.info, 'age')


//不能夠實時響應
state.info['address'] = '洛杉磯'
delete state.info.age

action

沒參數

//調用action方法,在組件中這麼寫
asyncUpdateName() {
  this.$store.dispatch('aUpdateName')
}
//action方法
aUpdateName(context) {
      console.log(context);
      setTimeout(() => {
        context.commit('updateName', 'wangwu')
      }, 1000)
}

有參數時

//有參數
//在組件這麼寫
updateInfo() {
        // this.$store.dispatch('aUpdateInfo', {
        //   message: '我是攜帶的信息',
        //   success: () => {
        //     console.log('裏面已經完成了');
        //   }
        // })
        this.$store
          .dispatch('aUpdateInfo', '我是攜帶的信息')
          .then(res => {
            console.log('裏面完成了提交');
            console.log(res);
          })
  }
//在action這麼寫

  // aUpdateInfo(context, payload) {
  //   setTimeout(() => {
  //     context.commit('updateInfo')
  //     console.log(payload.message);
  //     payload.success()
  //   }, 1000)
  // },
  aUpdateInfo(context, payload) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit('updateInfo');
        console.log(payload);

        resolve('1111111')
      }, 1000)
    })
  }

module

//獲取a模塊的state
<h2>{{$store.state.a.name}}</h2>

//調用a模塊的mutation,getters直接調用就行,不用加模塊名

Getters接收根節點的數據

getters: {
    fullname(state) {
      return state.name + '11111'
    },
    fullname2(state, getters) {
      return getters.fullname + '2222'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
}

action接收根節點數據

//局部狀態經過 context.state 暴露出來，根節點狀態則爲 context.rootState
actions: {
    aUpdateName(context) {//也能夠用對象結構aUpdateName({state,commit,rootState}){}
      console.log(context);
      console.log("iiiii");
      setTimeout(() => {
        context.commit('updateName', 'wangwu')
      }, 1000)
    }
  }

axios

export function request(config) {
  // 1.建立axios的實例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.axios的攔截器
  // 2.1.請求攔截的做用
  instance.interceptors.request.use(config => {
    // console.log(config);
    // 1.好比config中的一些信息不符合服務器的要求

    // 2.好比每次發送網絡請求時, 都但願在界面中顯示一個請求的圖標

    // 3.某些網絡請求(好比登陸(token)), 必須攜帶一些特殊的信息
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.響應攔截
  instance.interceptors.response.use(res => {
    // console.log(res);
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.發送真正的網絡請求
  return instance(config)
}

Vue配置

添加別名

//vue.config.js文件
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程