vue指令相關的

龍恩0707發表於2017-05-29

閱讀目錄

1.v-text

1. v-text {string} 更新元素的textContent 如下程式碼：
<span v-text='msg'></span>

<span>{{ msg }}</span>

如下demo程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-text='msg'></span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: 'aa'
      }
    })
  </script>
</html>

檢視demo

回到頂部

2.v-html

2. v-html {string} 更新元素的 innerHTML.
作用是：在網站上動態渲染任意的html是非常危險的，因為容易導致XSS攻擊，在可信的內容使用v-html,可以防止發生。
還有一個地方就是後端返回的json資料，如果包含html這些標籤的話，如果按照普通的html文字插入的話，會把html標籤顯示出來，但是使用v-html可以
很好的解決這個問題，如下demo：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-html='innerhtml'></span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        innerhtml: 'aaaaaa<i style="color: red;">122334</i>'
      }
    })
  </script>
</html>

檢視demo

回到頂部

3.v-show

作用是：根據表示式是否有值，切換元素的 display css屬性。
如下程式碼空字串的話，就不顯示內容，但是如果字串有任何值的話，都顯示內容。

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-show='msg'>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

檢視demo

回到頂部

4.v-if

作用：根據表示式的是否有值來渲染元素，在切換元素時及它的資料繫結/元件被銷燬並且重建。
如下demo

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-if='msg'>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

檢視demo

回到頂部

5.v-if vs v-show

他們之間的區別是：v-if 是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
比如如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-show='msg'>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

v-show 顯示和隱藏直接 display:none, 頁面的程式碼不會被銷燬，如下程式碼：
<div id="demo"><span style="display: none;">1111111</span></div>
但是 v-if 不一樣，它會重新建立和重新銷燬，比如如果為false的話，span標籤不會顯示出來。
所以如果需要頻繁的切換顯示和隱藏的話，使用v-show比較好，如果使用的條件不太可能發生變化的情況下，使用v-if比較好。

回到頂部

6.v-else

作用是：前一兄弟元素必須有 v-if，含義是：如果.... 否則....
如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-if='msg'>1111</div>
      <div v-else>2222</div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

檢視demo

回到頂部

7.v-for

7. v-for {Array | Object | number | string }
基於源資料多次渲染元素或模板塊，就是遍歷元素的意思；
如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-for='item in msg'>
        {{ item.text }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: [{'text': 1}, {'text': 2}]
      }
    })
  </script>
</html>

檢視demo

當然也可以對陣列進行遍歷，我們可以為陣列索引指定別名。

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-for='(item, index) in msg'>
        {{ item }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: [1, 2, 3]
      }
    })
  </script>
</html>

// 總之可以如下遍歷：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
// v-for 預設行為試著不改變整體，而是替換元素。迫使其重新排序的元素,您需要提供一個 key 的特殊屬性:
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

回到頂部

8.v-on

8. v-on
縮寫：@
型別 Function
引數： event(required)
修飾符：
.stop 呼叫 event.stopPropagation()
.prevent 呼叫 event.preventDefault()
.capture 新增事件使用 capture模式
.self 只當事件是從監聽器元素本身觸發時才觸發回撥。
.{keyCode | keyAlias} 只當事件是從特定鍵觸發時才觸發的回撥。
.native 監聽元件根元素的原生事件。
.once 只觸發一次回撥。
.left 當點選滑鼠左鍵時觸發
.right 當點選滑鼠右鍵時觸發。
.middle 當點選滑鼠中鍵時觸發。

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止預設行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止預設行為，沒有表示式 -->
<form @submit.prevent></form>
<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵程式碼 -->
<input @keyup.13="onEnter">
<!-- 點選回撥只會觸發一次 -->
<button v-on:click.once="doThis"></button>

// 在子元件上監聽自定義事件（當子元件觸發 “my-event” 時將呼叫事件處理器）
<my-component @my-event="handleThis"></my-component>
<!-- 內聯語句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 元件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-for='(item, index) in msg' :key='item.id' @click='dothis'>
        {{ item }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: [1, 2, 3]
      },
      methods: {
        dothis: function() {
          alert(1)
        }
      }
    })
  </script>
</html>

檢視demo

回到頂部

9.v-bind 和 v-model

9. v-bind
縮寫： :
型別 {any}
作用：動態地繫結一個或多個特性。
如下程式碼：

<!-- 繫結一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 繫結 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 繫結 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 繫結一個有屬性的物件 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符繫結 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 繫結. “prop” 必須在 my-component 中宣告。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model 指令用在<input>, <select>, <textarea> 上可以實現雙向繫結，vue例項中的data與其渲染的dom元素上的內容保持一致。

回到頂部

10.v-pre

10. v-pre
作用是：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始的Mustache標籤。跳過大量沒有指令的節點會加快編譯。
如下程式碼demo：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-pre>{{ msg }}</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: 'aaa'
      }
    })
  </script>
</html>

檢視demo

當加上 v-pre 時，程式碼標籤沒有編譯，直接顯示 msg內容，如果去掉v-pre時候，就會編譯。

回到頂部

11.v-once

只渲染元素和元件一次，隨後重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。可用於優化更新效能。

如下程式碼：

<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 元件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

vim的相關指令
2020-11-25
Linux相關的操作指令
2020-10-21
Linux
vue 相關收集
2019-12-05
Vue
DG相關指令碼
2016-09-14
指令碼
Monkey相關指令
2017-08-25
vue相關的UI元件庫
2018-06-26
VueUI元件
QTP - 指令碼相關收集
2014-03-18
QT指令碼
sql_trace相關指令碼
2023-09-24
SQL指令碼
vue-router相關配置
2022-05-19
Vue
vue原理相關總結
2022-02-11
Vue
計算機指令集的相關概念
2020-05-08
計算機
Vue的一些相關面試題
2023-01-13
Vue面試題
Oracle 效能相關常用指令碼(SQL)
2013-12-05
Oracle指令碼SQL
AllowOverride以及Options相關指令(轉)
2007-08-09
IDE
CE認證相關指令(轉載)
2007-07-29
刪除 AP 發票相關指令碼
2018-03-15
指令碼
webpack4-05-配置vue相關
2019-05-10
WebVue
記錄shell指令碼程式設計相關
2011-09-25
指令碼程式設計
解剖Nginx·自動指令碼篇（7）型別相關指令碼系列
2012-03-16
Nginx指令碼型別
基於vue開發活動頁-路由相關
2019-02-28
Vue路由
[Vue 2] 新版本探究之 performance 相關
2017-03-01
VueORM
搭建vue3版taro以及相關api
2024-03-15
VueAPI
解剖Nginx·自動指令碼篇（5）編譯器相關主指令碼
2012-03-14
Nginx指令碼編譯
全面瞭解Vue3的 reactive 和相關函式
2021-03-31
VueReact函式
Vue CLI 3 搭建的專案中路徑相關問題
2018-08-23
Vue
Vue（4）Vue指令的學習1
2021-06-27
Vue
Vue的內建指令
2018-09-04
Vue
VUE的系統指令
2018-11-27
Vue
vue中常用的指令
2018-09-25
Vue
ORACLE及OS相關監控指令碼 For AIX6.1
2011-02-10
Oracle指令碼AI
精讀Nginx·自動指令碼篇（5）編譯器相關主指令碼
2012-03-14
Nginx指令碼編譯
檢視Oracle基礎配置資訊和效能相關資訊的指令碼
2010-03-07
Oracle指令碼
vue基本指令
2020-12-21
Vue
【vue】常用指令
2021-01-01
Vue
解剖Nginx·自動指令碼篇（3）原始碼相關變數指令碼 auto/sources
2012-03-07
Nginx指令碼原始碼變數
檢查REDO日誌相關資訊並生成HTML檔案的指令碼
2013-10-09
HTML指令碼
面試題（五）常見vue相關面試題總結
2020-10-23
面試題Vue
千鋒長沙前端培訓：Vue相關面試題
2021-11-22
前端Vue面試題

vue指令相關的

相關文章