Vue

{{ }}：插值；插值里面只能寫表達式，不能寫語句

指令：

v-text=“js值”：渲染text內(nèi)容

v-html=“js值”：渲染html內(nèi)容

v-for=“item in js值 / item of js值 / ( item, index ) in js值”：循環(huán)創(chuàng)建dom

v-if="js條件"：滿足條件就創(chuàng)建dom；v-else跟在v-if后

v-show="js條件"：滿足條件就顯示，不滿足就添加css樣式display: none;跟v-if不同的是，標簽一直會存在。

v-on:click="函數(shù)名/表達式"：綁定事件調(diào)用函數(shù)/執(zhí)行表達式；可簡寫為@click；函數(shù)名可以加括號，可不加括號，不加括號，事件默認獲取的是event，加括號可以傳遞任意參數(shù)，如果要獲取event就傳$event

@keyup.ctrl.enter：按ctrl+enter觸發(fā)事件；

v-bind:title="js值"：使用Vue定義的變量設(shè)為title的值；可簡寫為:title

v-cloak：配合css代碼；當Vue代碼還沒加載完成時，此時標簽樣式就會應(yīng)用css里[v-cloak]{ }的樣式，Vue代碼加載完后就會取消掉css里的樣式

v-model：

多個復(fù)選框，綁定到同一個數(shù)組：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

原理：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" @change="checkedEvent">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" @change="checkedEvent">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" @change="checkedEvent">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
  methods: {
    checkedEvent (e) {
    //記錄value值   
    const v = e.target.value
         //查看數(shù)組中是否有此value值
          if(this.checkedNames.includes(v)){
            this.checkedNames = this.checkedNames.filter(item => {
                //filter()把傳入的函數(shù)依次作用于每個元素，然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。
              return item !== v
            })
          }
          else{
            this.checkedNames.push(v);
          }
        }
    }
})

Vue中style樣式

<div :class="{a: true, b: false}"></div>//應(yīng)用a的樣式
<div :class="{a: true, b: true}"></div>//應(yīng)用b的樣式

注意：

Vue里面的方法必須寫在methods里面

Vue里面的this指Vue的實例

computed：計算屬性

? 它是有依賴緩存的，只有它所依賴的數(shù)據(jù)發(fā)生了改變，才會重新計算。這個計算出來的值，是可以直接當成data來用的，也就是說在用的時候，不需要添加()。這個必須要有一個return值

? 計算屬性是基于它們的響應(yīng)式依賴進行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。

methods：方法

? 每次有數(shù)據(jù)更改，只要在模板里有使用這個方法，這個方法就會執(zhí)行。它是 沒有緩存的。

? 每當觸發(fā)重新渲染時，調(diào)用方法將總會再次執(zhí)行函數(shù)。

watch：偵聽屬性

? 觀測已有數(shù)據(jù)的。

? 當你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動，不能亂用

filters：過濾器

? 可被用于一些常見的文本格式化。

<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 可以串聯(lián) 
{{ message | filterA | filterB }}
-->
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

ajax

const app = new Vue({
      el: '#app',
      data: {
        todos: []
      },
      // 一般的ajax請求都會放在這里面來做，這個是固定的，后面會講到的生命周期中的一個方法
      created() {
        fetch('https://jsonplaceholder.typicode.com/todos')
          .then(response => response.json())
          .then(json => this.todos = json)
      }
    })

axios

基于promise用于瀏覽器和node.js的http客戶端+

axios.get('https://jsonplaceholder.typicode.com/todos')
          .then(resp => {
            // 這里是和后端約定好的一個狀態(tài)，可以是任何的key, 只要約定好就行。
            if (resp.status === 200) {
              // 這里才是成功的邏輯
              this.todos = resp.data
            } else {
              // 處理錯誤的邏輯
            }
          })
          .catch(err => {
            // 處理錯誤的邏輯
          })

自定義配置創(chuàng)建實例

axios.create([config])

const ajax = axios.create({
      baseURL: 'https://jsonplaceholder.typicode.com'
    })
   ajax.get('/todos')
          .then(resp => {
            // 這里是和后端約定好的一個狀態(tài)，可以是任何的key, 只要約定好就行。
            if (resp.status === 200) {
              // 這里才是成功的邏輯
              setTimeout(() => {
                this.todos = resp.data
                this.isLoading = false
              }, 3000)
            } else {
              // 處理錯誤的邏輯
            }
          })
          .catch(err => {
            // 處理錯誤的邏輯
          })

當做項目時，需要把外部引用的東西擴展到Vue上就用此方法

// 在Vue這個對象的原型上擴展一個$http 讓它指向于axios, 那么在實例上就可以直接使用this.$http來使用axios了
    Vue.prototype.$http = axios