任你躁在线精品免费,中国xxx农村性视频,锕锕锕锕锕锕锕www好湿

Vue筆記系列
2、Vue.js漸進
 3、Vue.js進階

Vue.js的概述

如官網所說，Vue.js是一款輕量級的以數據驅動的漸進式JavaScript 框架。

Vue.js數據驅動的原理在于View層的視圖發生改變時，Vue會通過DOM Listeners來監聽并改變Model層的數據。反之，當Model層的數據發生改變時，也會通過Data Bingings來監聽并改變View層的展示。從而實現雙向數據綁定的功能。
例如：jQuery通過操作DOM來改變頁面的顯示，而Vue通過操作數據來實現頁面的更新與展示。這樣我們就能很直觀的理解數據驅動的意思了。

上面介紹到的是Vue.js的原理，下面再來科普一下MVVM這個概念（一像素寫的《Vue.js 和 MVVM 小細節》），可以讓你更好的理解Vue,但是沒有太大的實踐作用，但是可以裝B，更重要的是可以在面試的時候裝B。

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。
Vue.js 就是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注于View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性。

起步

雖然對node.js和webpack了解，并在項目中使用過了，但還是嘗試從最基本的了解Vue開始，充分體驗一下這漸進過程，直接下載并使用<script>引入
或者使用CDN引入

<script src="https://unpkg.com/vue/dist/vue.js">

聲明式渲染

官網首先強調，Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統

簡單的html結構，id是start

兩對大括號的“Mustache”語法很面熟，在jsx或者arttemplate等一般的渲染引擎類似。

<div id="start">
    {{message}}
</div>

聲明Vue對象

引入了vue.js，Vue會被注冊為一個全局變量。在實例化 Vue 時，需要傳入一個選項對象，它可以包含數據、模板、掛載元素、方法、生命周期鉤子等選項。

var start = new Vue({
        el: "#start",
        data: {
            message: "helloWorld,helloVue!"
        }
    })

el:Vue需要操作的元素節點
data屬性:每個 Vue 實例都會代理其 data對象里所有的屬性。注意只有這些被代理的屬性是響應的。如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。
除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $
start .$el === document.getElementById('start') // -> true
start這個實例然后.$el，就相當于Vue構造函數傳入的el。

start的前臺展示

現在數據和 DOM 已經被綁定在一起，所有的元素都是響應式的。在瀏覽器控制臺修改start.message,頁面會相應更新。

message更改為first App

Vue常用指令介紹

指令帶有前綴 v-，以表示它們是 Vue.js 提供的特殊屬性。

1、v-text (更新元素的文本內容)

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

2、v-html (更新元素的innerHTML)

注意:內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。

<div v-html="html"></div>

3、v-if (根據表達式的值的真假條件渲染元素)

<h1 v-if="ok">Yes</h1>
相當于
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}

上面的代碼，如果ok為false，則h1不會被渲染出來。
現在只是切換一個元素，如果要同時操作多個，可以在要操作的元素外面包一層，例如下面用div

<div v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
<!-- 如果ok為flase,那么h1和兩個p都不會渲染 -->

當然，有if肯定就有else。

v-else (指令給 v-if或 v-show添加一個 “else” 塊)

可以看出，v-else不只是可以搭配v-if，還可以搭配v-show
必須注意 ：v-else元素必須緊跟在 v-if或 v-show元素的后面——否則它不能被識別。

<div v-if="Math.random() > 0.5">
    Sorry
</div>
<div v-else>
    Not sorry
</div>
<!-- 隨機切換兩種展示結果 -->

4、v-show (根據條件展示元素)

剛在上面提到了v-show，趁熱打鐵來了解一下，用法跟v-if是一樣的，不同的是有 v-show的元素會始終渲染并保持在 DOM 中。v-show是簡單的切換元素的 CSS 屬性 display。
官網說v-show不支持 <template>語法。我試了一下

<template v-show="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
</template>
<!--嗯，果然不好用，雖然ok是false，依然會把里面的所有東西都渲染出來 -->

下面說一下v-if和v-show的區別
v-if：是真實的條件渲染，切換時銷毀和重建，第一次如果判斷條件為假，是什么都不做的，官方稱為懶惰性。
v-show：元素始終被編譯并保留，只是簡單地基于 CSS 切換
總結一下， v-if有更高的切換消耗而 v-show有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show較好，如果在運行時條件不大可能改變則使用** v-if**較好。

簡單提一下2.1.0 新增了一個 v-else-if ,也可以跟** v-else **搭配，用作 v-if 的 else-if 塊。可以鏈式的多次使用。這個就很好理解了，貼一段官方代碼：

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

/*是不是很像？
if(){
}else if(){
}else {
}*/

5、v-for(基于源數據多次渲染元素或模板塊特定語法：`alias in expression`)

通俗點說就是，遍歷一個數組，數組里面放的是一個個的對象。
基本用法

<!-- html -->
<ul id="example-1">
  <li v-for="word in words">
      {{ word.text }}
  </li>
</ul>

//javascript
var example1 = new Vue({
        el: '#example-1',
        data: {
            words: [
                {text: 'a' },
                {text: 'b' },
                {text: 'c' }
            ]
        }
    })

結果

v-for,可以遍歷數組，對象，甚至是整數（可以當做循環的次數來用），其中遍歷的參數可以是value，index，如果是對象還有key。

<!-- 數組 -->
<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>
<!-- 整數-->
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
結果為：1 2 3 4 5 6 7 8 9 10

提示：數組的變異方法，push()、pop()、shift()、unshift()、splice()、sort()、reverse()，可以觸發視圖更新。并且，官網稱，如果你想讓展現方式達到你的預期，建議盡可能使用 v-for來提供 key。
注意：Vue 不能檢測以下變動的數組
1、當你利用索引直接設置一個項時，例如上面的example1.words[0] = {text: 'A'}
解決方法：
用一下兩種方法，觸發狀態更新。

// Vue.set
Vue.set(example1.items, 0, {text: 'A'})
// Array.prototype.splice`
example1.items.splice(0,1, {text: 'A'})

2、當你修改數組的長度時，例如： example1.words.length = newLength
解決方法：
？？？官方稱使用splice，我試了一下，如果輸入的長度小于原有的長度，可以實現截取數組的效果來觸發視圖更新，但是如果輸入的長度大于原有的長度，就不會讓原數組更改而觸發更新了，如果有新的進展，我會過來修改。

example1.items.splice(newLength)

6.v-on(綁定事件監聽器)

簡單說，就是監聽 DOM 事件來觸發一些 JavaScript 代碼。

事件類型由參數指定，例如：click、submit等等。
表達式可以是一個方法的名字或一個內聯語句，這個內聯跟樣式的內聯一樣，就是直接在DOM元素上寫邏輯，如下：

<button type="button" v-on:click = "num += 1">點擊增加1</button>

v-on還有縮寫@

<button type="button" @click = "num += 1">點擊增加1</button> //把上面的一行代碼縮寫的是這個樣子的

在官網上可以看到這么一段話，在監聽原生 DOM 事件時，方法以事件為唯一的參數。如下：

<button v-on:click="doThis"></button>
// 在 `methods` 對象中定義方法
  methods: {
    doThis: function (event) {
      // `this` 在方法里指當前 Vue 實例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
//我們可以看到在方法中可以使用原生的DOM事件event對象。

接下來還有一句，如果使用內聯語句，語句可以訪問一個 $event 屬性。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
//用$event傳入后，我們就可以在內聯語句處理器中使用event進行操作了。
methods: {
  warn: function (message, event) {
    // 現在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}
//但是我在內聯語句中不傳入$event，在調用的方法中也不寫入形參event，結果是也能拿到event對象,當然這是在谷歌和高版本的IE下，火狐瀏覽器會報錯
<button v-on:click="warn('Form cannot be submitted yet.')">Submit</button>
methods: {
  warn: function (message) { // 不寫入event，谷歌和高版本IE依然能拿到event對象，火狐會報錯。
    // 現在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}

事件修飾符
官網說：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節，那我想阻止冒泡或者阻止默認事件怎么辦？ Vue.js 為 v-on 提供了事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。
可以看官網的詳解，不做贅述。事件修飾符
按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

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

全部的按鍵別名：

enter
tab
delete (捕獲 “刪除” 和 “退格” 鍵)
esc
space
up
down
left
right
從此再也不用記數字了。并且可以通過全局 config.keyCodes對象自定義按鍵修飾符別名：

/ /可以使用 v-on:keyup.f2
Vue.config.keyCodes.f2= 113 
//要注意是全局對象Vue調用的。

新增的可以配合其他操作一起用的鍵名：

ctrl
alt
shift
meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
//？？？試了一下，并不是只有alt+c能觸發，只要是最后一個鍵按得是c，就能觸發,會繼續關注。

7.v-bind(動態地綁定一個或多個特性)

有縮寫，縮寫是一個冒號　** : **

<!-- 縮寫 -->
![](imageSrc)

在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。
當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測并添加相應的前綴。
？？？試了一下并沒有按照預期的自動添加前綴，會持續關注。
注意： .once 和 .sync 修飾符在2.0已經移除。

8.v-model(在表單控件或者組件上創建雙向綁定)

它會根據控件類型自動選取正確的方法來更新元素。 v-model 本質上不過是語法糖，它負責監聽用戶的輸入事件以更新數據，并特別處理一些極端的例子。

v-model 并不關心表單控件初始化所生成的值。因為它會選擇 Vue 實例數據來作為具體的值。
修飾符：
.lazy - 取代 input監聽 change事件，例如文本輸入框就不會在輸入時就改變視圖，需要失去焦點時才會改變視圖。
.number - 輸入字符串轉為數字，如果原值的轉換結果為 NaN 則返回原值。
.trim - 輸入首尾空格過濾

9.v-pre(跳過，不編譯)

跳過這個元素和它的子元素的編譯過程。跳過大量沒有指令的節點會加快編譯。注意這個指令 不需要表達式

<span v-pre>{{ this will not be compiled }}</span>

//會連同花括號一直展示出來：{{ this will not be compiled }}

10.v-cloak（不需要表達式）

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。以后如果真的用到會再來詳談。

10.v-once（不需要表達式）

只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節點將被視為靜態內容并跳過。這可以用于優化更新性能。
v-once這個指令留白的Vue 2 | Part 3 常用指令合集說的還是挺好的。

以上是關于Vue.js的概述和指令筆記，后續會有進階和覺得文檔中可以拿來出來嘮叨嘮叨的東西再寫幾篇出來。
最后，歡迎各位看官留言交流和指正。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue.js入門

Vue.js入門

Vue.js的概述

起步

聲明式渲染

簡單的html結構，id是start

聲明Vue對象

Vue常用指令介紹

1、v-text (更新元素的文本內容)

2、v-html (更新元素的innerHTML)

3、v-if (根據表達式的值的真假條件渲染元素)

v-else (指令給 v-if或 v-show添加一個 “else” 塊)

4、v-show (根據條件展示元素)

5、v-for(基于源數據多次渲染元素或模板塊特定語法：`alias in expression`)

6.v-on(綁定事件監聽器)

7.v-bind(動態地綁定一個或多個特性)

8.v-model(在表單控件或者組件上創建雙向綁定)

9.v-pre(跳過，不編譯)

10.v-cloak（不需要表達式）

10.v-once（不需要表達式）

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Vue.js入門

Vue.js的概述

起步

聲明式渲染

簡單的html結構，id是start

聲明Vue對象

Vue常用指令介紹

1、v-text (更新元素的文本內容)

2、v-html (更新元素的innerHTML)

3、v-if (根據表達式的值的真假條件渲染元素)

v-else (指令給 v-if或 v-show添加一個 “else” 塊)

4、v-show (根據條件展示元素)

5、v-for(基于源數據多次渲染元素或模板塊 特定語法：alias in expression)

6.v-on(綁定事件監聽器)

7.v-bind(動態地綁定一個或多個特性)

8.v-model(在表單控件或者組件上創建雙向綁定)

9.v-pre(跳過，不編譯)

10.v-cloak（不需要表達式）

10.v-once（不需要表達式）

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

簡單的html結構，id是start

1、v-text (更新元素的文本內容)

2、v-html (更新元素的innerHTML)

3、v-if (根據表達式的值的真假條件渲染元素)

5、v-for(基于源數據多次渲染元素或模板塊特定語法：`alias in expression`)

9.v-pre(跳過，不編譯)