天天看點
傳回

vue （vue2.0）使用總結(從大體結構總結)

 vue變量

所有的 vue變量 ，必須在data：中有注冊（哪怕内容是空，相當于聲明這個是變量，是vue變量而不是js變量）。這裡的變量也可以運算。（注意：所有的架構一定要注意js變量和架構的變量，js變量和架構的變量是可以互相轉換，擷取的。架構的變量有這個架構變量的定義方法，如東信公司的DD變量的定義；如vue變量必須在data中定義（注冊）或者methods（方法注冊的地方））

 vue函數

所有的方法事件函數，必須在methods中。methods中函數的  this指向vm，擷取data中的值可以直接 this.name獲得和修改。

　　其它的地方在執行個體建立之前（如生命周期beforeCreate函數中，全局中）擷取data的值，必須指明對象，vm.name  擷取。

　　vue中可以調用外面全局的方法，外面全局環境中也可以調用vue中的方法，使用vm.fun。（這樣就解決了，vue中不能jQuery操作DOM的問題了）

資料綁定方法

  參考   https://www.cnblogs.com/fly_dragon/p/6218675.html

　　1、文本資料：  

　　　　　　1、 {{ }}方法  ：     eg：<span>Hello {{ name }}</span>

　　　　　　2、v-html 指令  ：   如果是标簽内所有的文本

　　 2、屬性綁定：       文法   

<标簽 v-bind:屬性名="要綁定的Vue對象的data裡的屬性名"></标簽>

　　　　　　指令中綁定的資料，不能使用   {{  }}方法，直接填 

data裡的屬性名就可以了。

　　　　　　注意： 

v-bind：value綁定的表單的值，不能雙向資料綁定，v-model可以。

　　3、class屬性：（class和style是多屬性值屬性，是以vue除了上面的文法，又另外做了處理）

 　　　　　1、綁定樣式對象   ： 

代碼：
<div v-bind:class="{ active: isActive }"></div>
解釋：
當 isActive為 true時， div就會具有了active樣式類，如果 isActive為false，那麼div就去掉active樣式類。      
直接在html屬性中的雙引号内寫對象，還是很不爽，也沒有智能提示，很容易寫錯。 Vue可以讓我們直接把綁定的class字元串指向data的一個對象，這樣就非常友善了，
既可以有智能提示，又可以很複雜進行編輯，不用擔心煩人的""了。

<div id="app">
  <div class="static"
     v-bind:class="classObject">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  });
</script>

　　　　　　2、綁定樣式數組  ：

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

　　　　     3、style屬性

　　　　　　　　CSS屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）

<div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">

   var app = new Vue({         
      el: '#app',               
      data: {                   
        size: 19,
        width: 200,
        bgcolor: 'red'
      }
    });

　　　　4、表單選中值的綁定用 v-model   ，比如select标簽選中的值是什麼和v-model綁定

　　　　5、v-model是雙向資料綁定，v-bind是單向的資料綁定。下面兩個是等效的

 　　　　　　 參考 詳解 v-model ：  https://www.jianshu.com/p/4147d3ed2e60

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

　　　　6、v-model綁定的不一定是表單的value屬性值（一般都是value屬性值，Radio和Checkbox有所不同），

　　　　　　如：單選Checkbox中v-model綁定的是checked屬性值，原生标簽中隻要就這個屬性有就是被選中的。用vue通過v-model綁定的變量就可以知道是不是選中。

　　　　　　　　參考 ： https://www.cnblogs.com/dyfbk/p/6868350.html

計算屬性 computed ：https://www.cnblogs.com/gunelark/p/8492468.html

　　總結：計算屬性 預設隻有getter，不過在需要時你也可以提供一個setter （setter 是反過來執行的函數，當計算屬性值被改變，執行setter 函數）　  

computed: {
    totle: {
      set (val) { // totle 值的改變會觸發這裡的函數。但是下get函數引起的totle改變除外
        console.log('set')
        this.msg += 'dfd' // 這裡msg改變會引起get函數的執行。隻要get函數中使用到的vue資料發生變化都會觸發get函數的執行。
      },
      get () { // 這裡引起的 totle 值改變，不會觸發set裡面的函數。
        console.log('get') // 正式開發，這裡是不推薦有其他業務代碼的，隻有一個 return資料
        return this.msg + this.tt
      }
    }
  }

清單渲染

　　　1、清單渲染中的 vue 變量，凡不是一 object.name 形式的變量，渲染出來的結果是一樣的。是以如果每一列可能不同的，都必須轉化為object.name形式的變量。

　　　2、vue循環渲染可以和條件渲染結合起來使用的

事件綁定  

綁定一個事件
<button v-on:click="say">Say</button>

綁定多個事件
<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)">

有修飾符的綁定事件
<a v-on:click.stop='doThis'></a>

 vue.js移除綁定的點選事件   ：  https://blog.csdn.net/tsingsn/article/details/77196167

過濾器

在vue2.0裡 管道符‘ | '隻能用在 mousetache(插值) 和 v-bind 中。（v-model的資料怎麼使用過濾器還不清楚）

 vue裡面的vue變量名和方法名還有過濾器名字都不能相同，全局作用域中都可以通過vue對象直接擷取到。

new Vue({  
        el: '#app',  
        data: {   
        },  
        filters: {  
            capitalize: function (value) {  
                return value.charAt(0).toUpperCase() + value.slice(1);  
            }  
        }  
    });

Vue2.0裡過濾器容易踩到的坑  ：　https://blog.csdn.net/sinat_36555135/article/details/70678478

常用生命周期

執行個體生命周期鈎子（微信小程式架構和它類似） ：  可以把周期鈎子  看做  不同時期的人口函數

　　　　參考  ：  https://cn.vuejs.org/v2/guide/instance.html#執行個體生命周期鈎子  或  https://segmentfault.com/a/1190000008010666

常用的生命周期有：

　　1、beforeCreate （2.0版本前叫 init）  ：  在執行個體開始初始化時同步調用。此時資料觀測、事件等都尚未初始化。

　　2、mounted   （2.0版本前叫 ready）   ：  在編譯結束和$el第一次插入文檔之後調用

　　　　vue生命周期中執行函數不可出現vue對象（如vm，vm = new Vue()），因為在 new Vue()過程還沒有完成vm的指派（此時的vm是undefined），是以此時内部執行語句出現 vm ，變量就會報錯。

　   3、

destroyed ：在執行個體被銷毀之後調用。單頁面用中頁面跳轉時元件頁面就會被銷毀。定時器的功能相當于另外開了一個程序，vue元件銷毀，并不能結束定時器的程式。需要手動清除定時器，一般都是在銷毀的生命周期中執行。

watch  監聽資料變化

參考  ：  https://blog.csdn.net/lemon_zhao/article/details/52191527

注意：watch中監聽的資料的事件函數，如果是methods中的方法，隻能使用字元串，這裡不能使用vm.fun對象擷取。

　　　v-bind綁定的資料，視圖改變不一定使vue變量同步改變，是以不會觸發watch中的函數。

new Vue({
  el: '#app',
  data: {
    name: ""
  },
  methods: {
    queryTrendData: function() {
    }
  },
  watch: {
    'name': 'queryTrendData',
  }
});

路由 插件（Vue-router）： https://router.vuejs.org/zh/api/#router-link

1、

<router-link>

 元件

2、

<router-view>

 元件

vuex 狀态管理 

1、為什麼使用vuex ： https://www.cnblogs.com/goloving/p/9080005.html

vuex的功能 和 localstorage 的作用是一樣，把資料在一個所有頁面都可以存取的地方。但是vuex的資料具有響應式（類似資料雙向綁定），而 localstorage 的資料是固定的，必須手動設定。

2、使用方法：  https://www.cnblogs.com/first-time/p/6815036.html  或  https://www.cnblogs.com/liningstyle/p/8335129.html （推薦這個，比較清晰）

 　 簡單使用 ：

　　　　　　1、擷取state 資料  ：     

<

p

>{{$store.state.count}}</

p

> 或 

　　　　　　　　　　　　　　　　 

<

p

>{{$store.state.Heade.count}}</

p

>（使用了modules對象管理）

　　　　　　2、設定state 資料  （mutations 設定，所有的資料同步改變）： 設定 state 的資料，需要用到 Store 對象的 mutations 選項中的函數實作。在頁面中改變 state 的資料，是通過執行 mutations 對應的方法去改變的。

<a href="javascript:;"@click="$store.commit('Count',10)">click</a>     // 這裡 Count 是 mutations 對象下的函數

　　　　　　3、設定state 資料  （actions 設定，解決上邊所有資料同步改變）

<a href="javascript:;" @click="$store.dispatch('Acount')">click</a>

關于vue中的$符号總結一下 

參考  ：  https://blog.csdn.net/m_oman/article/details/80412877  或  https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7

注：合理的使用vue是不應該和jQuery一起使用的。

vue使用知識總結：

1、router-link  介紹  ：  https://blog.csdn.net/tanga842428/article/details/53052970

2、（猜測）模闆是挂載在 錨點元素上的；元件隻能放在模闆中。

3、帶參數的路由跳轉（主要是通過點選事件，觸發路由跳轉函數） ：   https://blog.csdn.net/kuangshp128/article/details/77280799  或 https://www.cnblogs.com/crazycode2/p/7685424.html  （推薦）

<div class="take_person clearfix" @click="goPage('/personList','2')">點選</div>      
goPage (url, id, userId) {   // url 是 路由位址，後面的參數都是需要現代的資料
            this.$router.push({ 
                path: url,
                query: { 
                    id: id, 
                    userId: userId 
                }
            })
        }

 4、（個人體會）前端的開發解耦性對于後期的維護很友善，思路也比較清晰。是以vue的開發，個人以為好的代碼規法如下：

　　a、把調接口的接口都放在一個js檔案，封裝到對應的函數中，這個js檔案，隻是配置好url。

// 訂單詳情查詢 
export function getOrderDetail (obj) {
    const url = STAGE_BASE_URL + 'hzeg-order-service/od/getOrderDetail'
    return axios.get(url, {
        params: obj
    }).then((res) => {
        return Promise.resolve(res.data)
    })
}

　　b、調用這個接口的函數，放到vue的 methods 中的函數中，再次封裝。

　　c、vue周期函數，隻負責程式流程（即隻是調用相應的方法，執行程式），不寫程式實作。

 5、vue前端面試題 ： https://www.cnblogs.com/sichaoyun/p/8406194.html  或  https://baijiahao.baidu.com/s?id=1612362349849989689&wfr=spider&for=pc

轉載于:https://www.cnblogs.com/wfblog/p/9183888.html

javascript 前端
上一篇: XX系統實施過程問題總結
下一篇: sort()函數到底是怎樣進行數字排序的

繼續閱讀