初學Vue（一） -- Vue簡單入門

Alliot 發布于2019-08-23 18:05 / 2887人閱讀

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

vue - 國人開發制作的

類似于 view 的發音

vue經過了幾次大的版本波動

0.x 0.6版本

1.x 版本

2.x 版本 - 現在常用的

為什么要介紹版本改動呢，因為不同版本語法和用法有差別，用起來比較麻煩

react 因為版權原因，導致百度等企業轉用vue，導致vue突然火起來，也有支持國人的成分，當然其中的也缺不了它的確好用。

完整版演示代碼

正式部分

vue學習建議先學會js，json

有的人覺得vue或angular不夠jquery方便，首先，vue和angular是數據驅動的，而jquery是事件驅動的，也就是說用jquery需要想著給賦予事件，而vue與angular只要想著數據怎么變化就行了。

vue1.0下載

vue2.0下載

vue使用

html部分：
//首先當然是引入vue.js文件


//vue標準是要用兩對花括號圈住數據名的
{{msg}}


js部分：
//使用vue要先new 一個vue對象出來傳入json格式的數據

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

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

如何選取class或id為作用域


    {{msg}}

常用指令

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

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

v-for：循環輸出數組或json數據

    {{i}}{{$index}}
    {{i}}
    {{key}}=>{{value}}
    {{$key}}=>{{i}}

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

因為json是鍵值對，可以理解為數組的索引與值的關系，所以可以用不同方式訪問。

{{$index}}可以進行計算 => {{$index+10}} 從10開始計數

v-model：雙向綁定 -- 數據和輸出綁定


    
        
    {{msg}}

Vue事件書寫區

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

事件對象：event

查看事件對象

這些演示里面的html部分關于body與html的樣式設置是必須的，不然body與html會按內容的大小填充，而不是布滿整個頁面

html部分：

//這里是必須設置這個樣式，不然body的大小是根據頁面內容調整大小的

`@click="show"是可以傳遞參數給事件的，當它傳遞參數時，事件處理的形參不再默認為是時間對象，當我們傳遞參數給事件又想看事件對象時可以用$event

html部分：



js部分：

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

先來看下事件冒泡沒有阻止的情況

這些演示里面的html部分關于body與html的樣式設置是必須的，不然body與html會按內容的大小填充，而不是布滿整個頁面

html部分：



    


js部分：

event.cancelBubble=true;

html部分：



    


js部分：

event.stopProgation();

html部分：



    


js部分：

直接在click后接.stop

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

html部分：



    


js部分：

阻止默認事件 -- 兩種默認事件阻止方式

event.preventDefault();

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

html部分：
    


            
js部分：

@click.prevent="";

html部分：
    


            
js部分：

鍵盤事件 -- 鍵盤監控事件利用keydown/up來監控用戶按下了什么按鍵

鍵盤監控事件

html部分：
    


    
js部分：

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

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

html部分：
    


    
js部分：

可以組合鍵使用

html部分：
    


    
js部分：

云服務器 GPU云服務器 vue入門教程 Vue_Vue Vue vue3 學習筆記 (五)——vue3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104659.html

初學vue.js記錄

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

enda 2019-08-22 15:34 評論0 收藏0
vuex其實超簡單,只需3步

摘要：每一條被記錄，都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中中的異步函數中的回調讓這不可能完成因為當觸發的時候，回調函數還沒有被調用，不知道什么時候回調函數實際上被調用實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。前言之前幾個項目中,都多多少少碰到一些組件之間需要通信的地方,而因為種種原因,event bus 的成本反而比vuex還高, 所以技術選型上選用了 v...

binta 2019-08-02 11:53 評論0 收藏0
vuex其實超簡單,只需3步

摘要：每一條被記錄，都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中中的異步函數中的回調讓這不可能完成因為當觸發的時候，回調函數還沒有被調用，不知道什么時候回調函數實際上被調用實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。前言之前幾個項目中,都多多少少碰到一些組件之間需要通信的地方,而因為種種原因,event bus 的成本反而比vuex還高, 所以技術選型上選用了 v...

summerpxy 2019-08-23 12:38 評論0 收藏0
超簡單入門Vuex小示例

摘要：寫在前面本文旨在通過一個簡單的例子，練習的幾個常用方法，使初學者以最快的速度跑起來一個的示例。生成基于的項目基于腳手架生成一個項目常用命令項目名進入項目目錄，使用先試著跑一下。子組件可以修改父組件和自己的數據。寫在前面本文旨在通過一個簡單的例子，練習vuex的幾個常用方法，使初學者以最快的速度跑起來一個vue + vuex的示例。學習vuex需要你知道vue的一些基礎知識和用法。...

linkin 2019-08-22 13:52 評論0 收藏0