Vue模板語法、事件和表單使用

時間 2019-11-26

標籤 vue 模板語法事件表單使用欄目 HTML 简体版

原文原文鏈接

模板語法

文本綁定，兩個大括號，中間加上data裏面的數據，message裏面不只能夠是變量還能夠是表達式

<body>
      <div id="main">
        // 變量
        {{ message }}
        <br/>
        // 表達式
        {{ number + 1}}
      </div>
  </body>

  <script>
    const vm = new Vue({
      el: '#main',
      data: {
        message: 'Welcome to Chivalrous Island!',
        number: 7
      },
    })
  </script>

JS表達式（計算、拼接、只能是單個表達式）
插入HTML代碼（慎用！防止XSS攻擊），咱們能夠直接在data裏面定義html代碼，可是它存在一個安全隱患，好比咱們將下面的 dangerHTMl: "<span>0085</span>" 這句代碼改變一下 dangerHTML: "<span onclick='alert(0085)'>0085</span>" ，這時候的當咱們點擊時它執行了它裏面的一個代碼會彈出一個框，這是很危險的。像不少個XSS攻擊就是用的這種方法，因此對於v-html咱們仍是要慎用。
```
<div v-html="dangerHTMl"></div>

  data: {
      ...
      dangerHTMl: "<span>0085</span>"
  }
```

綁定，把data裏面的數據綁定到元素的屬性上，最多見的就是id
```
<div v-bind:id="id" v-html="dangerHTML"></div>

	data: {
		...
		id: 'oldId'
	}
```

當data裏面的數據改變時，它的Id也會隨之改變。css

<div v-bind:id="id">
	<button v-on:click="changeId">changeId</button>
</div>

methods: {
      changeId: function() {
        this.id = 'newId';
      }
}

除了Id的綁定以外，還有其餘的一些綁定：html

v-bind:disabled => :disabled，一個元素的屬性經常使用於表單，好比一些輸入框，按鈕，以下：這個時候的按鈕就是一個不可點擊的狀態了。
```
<button v-bind:disabled="idDisabled" v-on:click="changeId">changeId</button>
```
v-bind:href 簡寫 :href，連接
v-on:click 簡寫 @ + click，點擊

計算屬性（緩存機制）

data: {
      json: {
        key1: 1,
        key2: 2
      }
    },
    methods: {
      ...
      computed: {
        getJsonkey1: function() {
          return this.json.key1;
        }
      },
      // 計算屬性的緩存須要藉助watch函數的監聽
      watch: {
        json: {
          handler: function(newVal,preVal){
            console.log(JSON.stringify(preVal));
            console.log(JSON.stringify(newVal));
          },
          deep: true,
        }
      }
    }

在vue裏面監聽json須要深度監聽，由於它們是在同一個內存空間裏面，地址是同樣的。vue

這個時候打印出來的，咱們會發現它們的新值和舊值都是同樣的，這是因爲它們是同一個內存地址咱們訪問時值已經改變。若是咱們要改變兩次的值不同，那麼咱們須要用到計算屬性裏面的緩存。json

好比先不監聽json，而是監聽getJsonkey1的方法，將watch的json變成getJsonkey1，這樣的話咱們就能夠獲得先後的兩個值。緩存

條件渲染

v-if，判斷元素是否要渲染，會複用元素(不想複用須要添加key)
v-else-if
v-else

if else if else

testVIf: 'A',

  <button v-if="testVIf === 'A'">A</button>
  <button v-else-if="testVIf === 'B'">B</button>
  <!-- 當判斷條件都不知足時顯示
  <button v-else>C</button>

v-show，它和v-if 的區別在於，當v-if條件不知足時，那麼整個元素都不會被渲染，可是當v-show不知足時，它只是不顯示元素，至關於css display的none。它們兩的用法是徹底同樣的。

事件處理

主要分爲點擊事件和鍵盤事件。安全

v-on:click，簡寫屬性 @ + click
v-on:click.stop，阻止單擊事件繼續傳播
```
<button v-on:click.stop="doAgain"></button>
```
v-on:submit.prevent，提交事件再也不重載頁面
```
<form v-on:submit.prevent="onSubmit"></form>
```

v-on:click.stop.prevent，修飾符能夠串聯

<button v-on:click.stop.prevent="contact"></button>

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

按鍵修飾符（鍵盤事件）：函數

v-on:keyup
```
keyup(e) {
		alert(JSON.stringify(e));
	}

	<input v-on:keyup.enter="keyup" type="text">
```
keyup監聽的是一個全部的鍵盤事件，若是咱們只想監聽某一個事件，那麼咱們能夠在 v-on:keyup 後面添加下面屬性，而後點擊觸發便可。除此以外，對於下面的某一事件監聽咱們能夠輸入它對應的鍵盤碼，好比enter對應的是13，v-on:keyup.13="keyup" 一樣的咱們也是點擊enter觸發事件。
v-on:keyup.enter，監聽回車鍵
v-on:keyup.tab
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.space
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right

雙向數據綁定（表單處理）

例如一個輸入框，當咱們輸入一個值時，咱們綁定的數據會變，而當咱們手動的去改動這個值的時候，輸入框裏面的值也會隨之改變。this

v-model，不只能夠綁定value，還能夠綁定表單裏面的一些其餘屬性checked和selected，表單元素除了輸入框以外好比複選框、單選框、下拉框都是能夠的。spa

輸入框數據的雙向綁定：雙向綁定

<input v-model="inputValue" type="text">

<!-- 點擊事件 -->
<button @click="changeInputValue">changeInputValue</button>

data: {
	...
	inputValue: 10805,
}
methods: {
	...
    // 當咱們點擊按鈕時，觸發changeInputValue，實現累加
    changeInputValue: function() {
        this.inputValue++;
    }
}
watch: {
	...
	inputValue: function() {
        console.log(this.inputValue);
	}
}

複選框：

<input v-model="checkboxValue" type="checkbox">

data: {
    // 默認選中
    checkboxValue: true
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。