指令

vue實例簡單介紹

<script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
        el: '#app',  	 	//el表示要控制的元素區域
        data: {			//data表示要綁定的數據
            flag: true
        },
        methods: {}		//存放事件處理函數
    });
</script>

v-cloak

不需要表達式,這個指令保持在元素上直到關聯實例結束編譯。

和 CSS 規則如 [v-cloak] { display: none }一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到實例準備完畢

示例:

加載時不會顯示,直到加載完成後才顯示

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

解決問題:

可以解決插值表達式閃爍的問題

v-text

更新元素的內容。如果要更新部分的內容，需要使用 {{ Mustache }} 插值表達式。

示例:

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
<!-- 
兩種方式的區別 
1插值表達式會有閃爍問題,而v-text沒有;
2差值表達式更新部分內容(當前自己的佔位符),而v-text更新元素內所有內容;
3如果內容時html語句,兩者都不會解析,只會當普通文本輸出
-->

v-html

更新元素的 innerHTML 。

注意：

內容按普通 HTML 插入 - 不會作爲 Vue 模板進行編譯。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用組件來替代。

在網站上動態渲染任意 HTML 是非常危險的，因爲容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

在單文件組件裏，scoped 的樣式不會應用在 v-html 內部，因爲那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內容設置帶作用域的 CSS，你可以替換爲 CSS Modules 或用一個額外的全局

示例:

<body>
    <div id="box">
        <span v-html="msg"></span>
    </div>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#box',
            data: {
                msg: '<p>123546</p>'
            }
        });
    </script>
</body>

v-bind

動態地綁定一個或多個特性，或一個組件 prop 到表達式。

三種用法;

直接使用指令v-bind
使用簡化指令:
在綁定的時候，拼接綁定內容：:title="btnTitle + ', 這是追加的內容'"

示例:

<body>
    <div id="box">
        <!--普通寫法-->
        <a v-bind:href="msg">有問題   找百度--->普通寫法</a>
        <!--簡寫寫法--> <br />
        <a :href="msg">有問題   找百度 -->簡寫</a>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#box',
            data: {
                msg: 'http://www.baidu.com'
            }
        });
    </script>
</body>

v-on (注意:this指向)

1.縮寫 @

2.事件修飾符

.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
.left - (2.2.0) 只當點擊鼠標左鍵時觸發。
.right - (2.2.0) 只當點擊鼠標右鍵時觸發。
.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器

用法
綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

注意:

在開發時 ,注意this指向問題;

function函數會改變this的指向;如果要使用 ,需要在函數外面接收一下,然後在函數中使用;

es6的箭頭函數就可以解決this指向問題,在箭頭函數外部的this,在函數內使用時指向不會被改變

示例

<body>
    <div id="box">
        <input type="button" value="on事件綁定one" v-on:click="click_one" />	<!--普通書寫方式-->
        <input type="button" value="on事件綁定two" @click="click_two" />		<!--簡寫方式-->
        <input type="button" value="on事件綁定three" @click="click_three()" />	<!--方法名帶括號可以傳遞參數,不帶括號也不會報錯,也可以正常運行-->
        <input type="button" value="on事件綁定four" @click="click_four" />
        <a  href="http://www.baidu.com" @click.prevent.once="click_five">on事件綁定five</a>
        <!--on的事件修飾符可以鏈式使用比如@click.prevent.once="click_five"-->
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#box',
            data: {},
            methods:{
                //注意:vue不提倡使用dom操作;當然如果作爲開發者想用誰也管不了
                //vue綁定的事件處理函數都要書寫在methods這個對象中;當執行時自動回到vm實例的methods中尋找,找不到就會拋出異常
                click_one:function(){alert('one')},
                click_two:function(){alert('two')},
                click_three:function(){alert('three')},
                click_four(){alert('four')},
                //這裏的方法可以使用鍵值對的方式寫;也可以像click_four函數這樣簡寫
                click_five(){alert('five')}
            }
        });
    </script>
	</body>

v-model (表單數據雙向綁定)

修飾符:

.lazy - 取代 input 監聽 change 事件
.number - 輸入字符串轉爲有效的數字
.trim - 輸入首尾空格過濾

v-model作用:在表單控件或者組件上創建雙向綁定,實現數據的雙向綁定

示例

<body>
    <div id="box">
       <input type="text" value="" v-model.trim="msg"/>
        <!-- 當文本框中的值改變時,vm實例中data的數據也會改變,如果安裝了工具將會清楚的看到,我這裏將data的數據在span標籤裏面綁定了一次,演示效果不會差太多-->
       <span>這裏相當於data中的數據 ----> <span v-text="msg"></span></span>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#box',
            data: {
                msg:'數據雙向綁定'
            },
            methods:{}
        });
    </script>
</body>

v-for

基於源數據多次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression ，爲當前遍歷的元素提供別名：

<p v-for="item in list" :key="item.id">
	<input type="checkbox">{{item.id}} --- {{item.name}}
</p>

<!--item是給被遍歷的對象起立一個別名-->
<!--list時給被遍歷的對象-->

<p v-for="(item,index) in list" :key="item.id">
    <input type="checkbox">{{item.id}} --- {{item.name}}----{{ index }}
</p> 
<!--index是索引-->
<!--注意:list可以是數組,對象,數組對象,數字-->

<body>
    <div id="app">
        <div>
            <label>Id:<input type="text" v-model="id"></label>
            <label>Name:<input type="text" v-model="name"></label>
            <input type="button" value="添加" @click="add">
        </div>
        <!-- 注意： v-for 循環的時候，key 屬性只能使用 number或者string -->
        <!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
        <!-- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 -->
        <!--不綁定key會出現的問題:當添加時,如果前面的複選框是選中的,數據添加後,複選框選中的數據可能就不會是原來的數據,
就會導致很多問題,當在使用v-for的時候建議綁定kek-->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">{{item.id}} --- {{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [{
                    id: 1,
                    name: '李斯'
                },
                       {
                           id: 2,
                           name: '嬴政'
                       },
                       {
                           id: 3,
                           name: '趙高'
                       },
                       {
                           id: 4,
                           name: '韓非'
                       },
                       {
                           id: 5,
                           name: '荀子'
                       }
                      ]
            },
            methods: {
                add() { // 添加方法
                    this.list.unshift({
                        id: this.id,
                        name: this.name
                    })
                }
            }
        });
    </script>
</body>

v-show

根據表達式之真假值，切換元素的 display CSS 屬性。

當v-show="true" 時顯示當前元素
當v-show="false" 時隱藏當前元素

v-if

根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。如果元素是 <template> ，將提出它的內容作爲條件塊

v-show與v-if區別

<body>
  <div id="app">
    <!-- <input type="button" value="toggle" @click="toggle"> -->
    <input type="button" value="toggle" @click="flag=!flag">

    <!-- v-if 的特點：每次都會重新刪除或創建元素 -->
    <!-- v-show 的特點： 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式 -->

    <!-- v-if 有較高的切換性能消耗 -->
    <!-- v-show 有較高的初始渲染消耗 -->

    <!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show -->
    <!-- 如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if -->
    <h3 v-if="flag">這是用v-if控制的元素</h3>
    <h3 v-show="flag">這是用v-show控制的元素</h3>

  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
  </script>
</body>

自定義全局指令

一個指令定義對象可以提供如下幾個鉤子函數 (均爲可選)：

bind：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。如:樣式
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。如:綁定focus
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。
unbind：只調用一次，指令與元素解綁時調用。

鉤子函數參數

指令鉤子函數會被傳入以下參數：

el：指令所綁定的元素，可以用來直接操作 DOM 。
```
binding
```
：一個對象，包含以下屬性：
- name：指令名，不包括 v- 前綴。
- value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
- expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
- arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。移步 VNode API來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

 // 自定義全局指令 v-focus，爲綁定的元素自動獲取焦點：
    Vue.directive('focus', {  //focus表示自定義指令的名稱定義時不用加v-;但是使用時必須要加
      inserted: function (el) { // inserted 表示被綁定元素插入父節點時調用
        el.focus();
      }
    });

自定義私有指令

<script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        directives: {
            focus: {
                // 指令的定義
                inserted: function (el) {
                    el.focus()
                }
            },
            'font-weight': function(el) { // 自定義指令的簡寫形式，等同於定義了 bind 和 update 兩個鉤子函數
                el.style.fontWeight = 300;
            }
        }
    });
</script>

Vue指令

指令

v-cloak

v-text

v-html

v-bind

v-on (注意:this指向)

v-model (表單數據雙向綁定)

v-for

v-show

v-if

v-show與v-if區別

自定義全局指令

鉤子函數參數

自定義私有指令

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

vue+express+socket.io實現前後端保持長連接

Node環境安裝以及less的環境安裝

node基本模塊介紹

Mysql數據類型與類型選擇

Mysql及常用命令介紹

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結