vue 簡易學習

好記性不如爛筆頭

　　最近公司新出一個框架，採用的是先後端分離的開發方式，後端用的是springboot+mybatis(還有額外的zk、緩存、日誌等待)，前端採用的是vue+es6，因爲之前對vue只知其名，不知其意，今天主動去學習了一下vue的基本語法，在此作個記錄，方便本身平時查閱及知識分享。若是你們想詳細瞭解，請查閱 https://vuejs.bootcss.com/v2/guide/

　　vue 的基本語法爲：

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

Vue({
   el:"#app" ,
   .....
})

　　其中，el中相關聯的id爲app的節點，咱們稱之爲掛載點，而掛載點中的內容，稱爲模版(template)。

1 插值

　　文本設值：使用文原本進行數據綁定最多見的就是使用Mustache語法(雙大括號)，也稱之爲插值表達式，如{{msg}}。該語法不能進行HTML內容的設值，全部的內容都會被編譯成文本格式。v-text指令一樣可以達到相同效果。

　　HTML設值： 使用 v-html='msg'的方式，將內容輸出爲真正的HTML。如：

<span v-html="rawHtml"></span>

　　內嵌表達式：在vue中，對於全部的數據綁定，都提供了JavaScript表達式支持，如：{{msg === 'yes'?'是':'否'}}、{{msg + '，你好！'}}、{{msg.split('').reverse().toString()}}

2 指令

　　在vue中，指令(Directives)是帶有 v- 前綴的特殊特性。指令的職責是，當表達式值改變時，將其產生的連帶影響，響應式的做用域DOM。如： v-if='seen' (seen爲true時執行)

　　一些指令可以接收一個參數，在指令名稱以後以冒號 表示，如：

// 綁定href屬性
v-bind:href='https://www.cnblogs.com/www-123456/'
// 綁定click事件
v-on:click='click()'

　　v-bind：經常使用於對元素屬性的綁定添加。能夠縮寫爲 :href='xxx'

　　v-click：經常使用於對元素事件進行綁定添加。能夠縮寫爲 @click='xxx'

3 計算屬性

　　模版內的表達式很是便利，可是放入太多，會使代碼變得難以理解，而且不能重用(程序猿都是懶人)。因此，對於任何複雜邏輯，你都應該使用計算屬性。

　　計算屬性時基於它們的依賴進行緩存。只有相關依賴發生改變時，它們纔會從新求值。這意味這隻要值沒有改變，屢次訪問同一個屬性值，計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

<div>
    <p>{{msg}}</p>
    <p>{{reversedMsg}}</p>
</div>


var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.msg.split('').reverse().join('')
    }
  }
})

　　vue 爲計算屬性提供了getter、setter。計算屬性默認只有getter方法。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

4 偵聽器

　　經過 vue 的 watch 選項，來相應數據的變化。當要在數據變化時執行異步式或開銷較大的操做時，這個方式最有用。如：

<script>
var vm= new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 若是 `question` 發生改變，這個函數就會運行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }
})
</script>

5 class與style綁定

　　操做元素的class列表和內聯樣式是數據綁定的一個常見需求。由於他們都爲屬性。全部能夠用 v-bind 來進行綁定: 只須要經過表達式計算出字符串結果便可。使用 v-bind 來對class 和 style 進行綁定是，除了字符串以外，還能夠hi對象和數組。如：

v-bind:class="{active:isActive,'text-dange':hasError}"
// data爲：data():{isActive:true,hasError:false}
// 結果爲：class='active'

v-bind:class="[activeClass, textClass]"

v-bind:style="{color:activeColor,fontSize:fonsize}"

v-bind:style="styleObj"
// data爲：data():{styleObj:{color:'red',fontsize:'14px'}}

6 條件渲染

　　v-if：當值爲true時，該元素快渲染

　　v-else-if：vue 2.1.0新增

　　v-else

<div v-if="type==='A'">A</div>

<div v-else-if="type==='B'">B</div>

<div v-else>other</div>

　　v-show：

<div v-show="yes">yes</div>

　　v-if 是惰性的，只有當條件爲true，纔會開始渲染條件快。v-show在初始化就進行了渲染，只是切換元素效果進行宣示與隱藏。

7 列表渲染

　　使用 v-for 指令遍歷數組和對象，語法以下：

// items 爲一個可遍歷對象
v-for="item in items"
v-for="(item, index) in items"
v-for="item of items"
// object爲 key/value 格式對象
v-for="value in object"
v-for='(key, value) in object'

8 事件處理　

v-on:click="count += 1"

v-on:click='click()'

var vm=new Vue({
   el:"#app",
   data:{count:1} ,
   methods:{
       click:function(){
            this.count += 1;
        }
   }
})

　　事件修飾符：.stop .prevent .capture .self .once .passive

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的狀況 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
不要把  和  一塊兒使用，由於  將會被忽略，同時瀏覽器可能會向你展現一個警告。請記住， 會告訴瀏覽器你不想阻止事件的默認行爲。.passive.prevent.prevent.passive

　　按鍵修飾符：.enter .tab .delete .esc .space .up .down .left .right

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 縮寫語法 -->
<input @keyup.enter="submit">

// 能夠經過全局 config.keyCodes 對象自定義按鍵修飾符別名,可使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

　　鼠標按鍵修飾符：.left .right .middle

8 表單輸入綁定

　　基礎語法：

　　v-model="value1"     -> 雙向綁定

　　值綁定：

// 當選中是，vm.toggle == 'yes'，當沒有選中是 vm.toggle == 'no'
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
    
<input type="radio" id="one" value="One" v-model="picked">

<select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

　　修飾符：

<!-- 在「change」時而非「input」時更新 -->
<input v-model.lazy="msg" >

<!--若是想自動將用戶的輸入值轉爲數值類型，能夠給 v-model 添加 number 修飾符-->
<input v-model.number="age" type="number">

<!--若是要自動過濾用戶輸入的首尾空白字符，能夠給 v-model 添加 trim 修飾符-->
<input v-model.trim="msg">

 9 組件基礎

　　每個組件都是一個Vue實例。這句話很是重要。

　　組件的註冊方式分爲兩種，全局註冊、局部註冊。

　　全局註冊：註冊以後能夠用在任何新建立的Vue根實例(new Vue)的模版中。在全部子組件中也是如此。好比：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
<div id="app">
  <component-a></component-a>
  <component-b>

  　　<component-c></component-c>

　</component-b> 
</div>

　　局部註冊：經過一個普通的JavaScript對象來定義組件，而後在父組件中使用components 選項來定義你想要使用的組件。注意：局部註冊的組件在其子組件中不可用。

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

　　9.1 傳參

　　父組件向子組件傳值是經過屬性的方法，即便用父組件的屬性，在子組件中經過props來接受。

　　子組件向父組件傳遞參數是經過發佈訂閱方式。子組件發佈一個事件(this.$emit(event,arg))。父組件監聽子組件方法的事件 @event。

　　this.$emit(event,arg)：綁定一個自定義事件event，當這個語句被執行時，會將參數arg 傳遞給父組件，父組件經過 @event 監聽並接受該參數。

 

 

下面是我本身寫的一個列子：

<!DOCTYPE html>
<html>
<head>
    <title>vue學習</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="text" v-model="inputData" />
        <button @click="headearClick">提交</button>
        <ul>
            <li v-for="item in list" :title="item">{{item}}</li>
        </ul>
        <br />
        <br />
        要刪除的值：<input type="number" v-model.number="number" />
        <component-a :data="number" @delete="headearDelete"></component-a>
    </div>
</body>
<script type="text/javascript">
    Vue.component("component-a", {
        props: ["data","index"],
        template: '<button @click="click" title="刪除無序列表中與輸入框值相等">刪除</button>',
        methods: {
            click: function() {
                this.$emit("delete", this.data);
            }
        }
    })

    new Vue({
        el: "#app",
        data: {
            inputData: "",
            list: [],
            number: ''
        },
        methods: {
            headearClick() {
                if(this.inputData != ""){
                    this.list.push(this.inputData);
                    this.inputData = "";
                }
            },
            headearDelete(data) {
                var arr = [];
                for (var i = 0, len = this.list.length; i < len; i++) {
                    if(data != this.list[i]){
                        arr.push(this.list[i]);
                    }
                }
                this.list = arr;
                this.number = '';
            }
        }
    })
</script>
</html>

注意：我在該代碼中引入了vue.js ，小夥伴們能夠在 vue的教程https://cn.vuejs.org/v2/guide/installation.html 中查看下載，即 https://vuejs.org/js/vue.js