亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

初學(xué)Vue（一） -- Vue簡(jiǎn)單入門

Alliot / 2936人閱讀

摘要：可以進(jìn)行計(jì)算從開始計(jì)數(shù)雙向綁定數(shù)據(jù)和輸出綁定事件書寫區(qū)事件區(qū)域，所有事件控制寫在這里有簡(jiǎn)寫形式可以直接把替換為，。

vue - 國(guó)人開發(fā)制作的

類似于 view 的發(fā)音

vue經(jīng)過(guò)了幾次大的版本波動(dòng)

0.x 0.6版本

1.x 版本

2.x 版本 - 現(xiàn)在常用的

為什么要介紹版本改動(dòng)呢，因?yàn)椴煌姹菊Z(yǔ)法和用法有差別，用起來(lái)比較麻煩

react 因?yàn)榘鏅?quán)原因，導(dǎo)致百度等企業(yè)轉(zhuǎn)用vue，導(dǎo)致vue突然火起來(lái)，也有支持國(guó)人的成分，當(dāng)然其中的也缺不了它的確好用。

完整版演示代碼

正式部分

vue學(xué)習(xí)建議先學(xué)會(huì)js，json

有的人覺得vue或angular不夠jquery方便，首先，vue和angular是數(shù)據(jù)驅(qū)動(dòng)的，而jquery是事件驅(qū)動(dòng)的，也就是說(shuō)用jquery需要想著給賦予事件，而vue與angular只要想著數(shù)據(jù)怎么變化就行了。

vue1.0下載

vue2.0下載

vue使用 
html部分：
//首先當(dāng)然是引入vue.js文件


//vue標(biāo)準(zhǔn)是要用兩對(duì)花括號(hào)圈住數(shù)據(jù)名的
{{msg}}


js部分：
//使用vue要先new 一個(gè)vue對(duì)象出來(lái)傳入json格式的數(shù)據(jù)

{{}} -> 必須在作用域里面放入輸出的模板，模板里面放入data里面你自己定義的變量

注意：只有ie8 以上的瀏覽器才能兼容vue

如何選取class或id為作用域 

    {{msg}}
常用指令

類似于angular 的常用指令有 ng-show /ng-repeat，vue當(dāng)然也有。

v-show：類似于display，true就是顯示false就是隱藏

v-for：循環(huán)輸出數(shù)組或json數(shù)據(jù)

    
{{i}}{{$index}}

    
{{i}}

    
{{key}}=>{{value}}

    
{{$key}}=>{{i}}

v-for: {{$index}} -> 索引值，{{$key}} -> key值

因?yàn)閖son是鍵值對(duì)，可以理解為數(shù)組的索引與值的關(guān)系，所以可以用不同方式訪問(wèn)。

{{$index}}可以進(jìn)行計(jì)算 => {{$index+10}} 從10開始計(jì)數(shù)

v-model：雙向綁定 -- 數(shù)據(jù)和輸出綁定 

    
        
    {{msg}}
Vue事件書寫區(qū)

v-on有簡(jiǎn)寫形式@ ,可以直接把v-on替換為@，@click="change"。

事件對(duì)象：event

查看事件對(duì)象

這些演示里面的html部分關(guān)于body與html的樣式設(shè)置是必須的，不然body與html會(huì)按內(nèi)容的大小填充，而不是布滿整個(gè)頁(yè)面

html部分：

//這里是必須設(shè)置這個(gè)樣式，不然body的大小是根據(jù)頁(yè)面內(nèi)容調(diào)整大小的

`@click="show"是可以傳遞參數(shù)給事件的，當(dāng)它傳遞參數(shù)時(shí)，事件處理的形參不再默認(rèn)為是時(shí)間對(duì)象，當(dāng)我們傳遞參數(shù)給事件又想看事件對(duì)象時(shí)可以用$event 

html部分：



js部分：
事件冒泡：事件冒泡的三種阻止方法

先來(lái)看下事件冒泡沒(méi)有阻止的情況

這些演示里面的html部分關(guān)于body與html的樣式設(shè)置是必須的，不然body與html會(huì)按內(nèi)容的大小填充，而不是布滿整個(gè)頁(yè)面

html部分：



    



js部分：

event.cancelBubble=true;

html部分：



    



js部分：

event.stopProgation();

html部分：



    



js部分：

直接在click后接.stop

其中，上面兩個(gè)event都是原生方法，所以雖然能用，但是還是不夠方便，所以這里使用vue方法來(lái)

html部分：



    



js部分：
阻止默認(rèn)事件 -- 兩種默認(rèn)事件阻止方式

event.preventDefault();

這個(gè)是原生js方法，能用但是也不夠vue方法方便

html部分：
    


            
js部分：

@click.prevent="";

html部分：
    


            
js部分：
鍵盤事件 -- 鍵盤監(jiān)控事件利用keydown/up來(lái)監(jiān)控用戶按下了什么按鍵

鍵盤監(jiān)控事件

html部分：
    


    
js部分：

event.keyCode監(jiān)控用戶按鍵的ASCII碼，可以通過(guò)查看keyCode來(lái)賦予不同按鍵不同事件，例如通過(guò)console.log(event.keyCode);可以看到按鍵A的鍵值是65，那么我們可以設(shè)置只有當(dāng)按下A鍵時(shí)才顯示的事件

@keydown.65等效于if(e.keyCode==65) 

html部分：
    


    
js部分：

可以組合鍵使用

html部分：
    


    
js部分：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104659.html

相關(guān)文章

  • 初學(xué)vue.js記錄

    摘要：初學(xué)應(yīng)該學(xué)習(xí)哪些知識(shí)主要學(xué)習(xí)基礎(chǔ)知識(shí)。接下來(lái)要學(xué)習(xí)如何寫函數(shù)，計(jì)算屬性。事件處理與修飾符事件通過(guò)指令來(lái)綁定，在中事件為事件名，所以是很好記憶的。這時(shí)可通過(guò)來(lái)獲取父組件傳遞的值并寫入模板，父組件可通過(guò)在子組件寫入屬性的方式傳遞數(shù)據(jù)。 前言 本人剛開始學(xué)習(xí)vue.js幾天，做了一些練習(xí)之后，鑒于每隔一段時(shí)間就把學(xué)習(xí)過(guò)的內(nèi)容總結(jié)一番，故此寫下此文章。初學(xué)Vue.js應(yīng)該學(xué)習(xí)哪些知識(shí) 1、 v...

    enda 評(píng)論0 收藏0

  • vuex其實(shí)超簡(jiǎn)單,只需3步

    摘要：每一條被記錄，都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中中的異步函數(shù)中的回調(diào)讓這不可能完成因?yàn)楫?dāng)觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒(méi)有被調(diào)用，不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。 前言 之前幾個(gè)項(xiàng)目中,都多多少少碰到一些組件之間需要通信的地方,而因?yàn)榉N種原因,event bus 的成本反而比vuex還高, 所以技術(shù)選型上選用了 v...

    binta 評(píng)論0 收藏0

  • vuex其實(shí)超簡(jiǎn)單,只需3步

    摘要：每一條被記錄，都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中中的異步函數(shù)中的回調(diào)讓這不可能完成因?yàn)楫?dāng)觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒(méi)有被調(diào)用，不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。 前言 之前幾個(gè)項(xiàng)目中,都多多少少碰到一些組件之間需要通信的地方,而因?yàn)榉N種原因,event bus 的成本反而比vuex還高, 所以技術(shù)選型上選用了 v...

    summerpxy 評(píng)論0 收藏0

  • 超簡(jiǎn)單入門Vuex小示例

    摘要：寫在前面本文旨在通過(guò)一個(gè)簡(jiǎn)單的例子，練習(xí)的幾個(gè)常用方法，使初學(xué)者以最快的速度跑起來(lái)一個(gè)的示例。生成基于的項(xiàng)目基于腳手架生成一個(gè)項(xiàng)目常用命令項(xiàng)目名進(jìn)入項(xiàng)目目錄，使用先試著跑一下。子組件可以修改父組件和自己的數(shù)據(jù)。 寫在前面 本文旨在通過(guò)一個(gè)簡(jiǎn)單的例子，練習(xí)vuex的幾個(gè)常用方法，使初學(xué)者以最快的速度跑起來(lái)一個(gè)vue + vuex的示例。 學(xué)習(xí)vuex需要你知道vue的一些基礎(chǔ)知識(shí)和用法。...

    linkin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<