Vue學習 第一天

2021-10-23 05:12:22 字數 2008 閱讀 9394

>


}<


/p>


<


!-- 將資料填充到html標籤中 --


>


"color: yellow;"


>


}<


/p>


<


/div>


"./vue.js"


>


<


/script>


var myvue =


newvue(}


)<


/script>
這樣，乙個簡單的「hello world」就出現了。

接著vue的特色-資料雙向繫結。也就是資料模型(model)與檢視(view)元件的協同。

這裡就引出了指令的概念，指令 (directives) 是帶有 v- 字首的特殊 attribute。

// 此時的**如下


>


// v-model


"text" v-model=


"msg"


>


}<


/div>


<


/div>


"./vue.js"


>


<


/script>


var myvue =


newvue(}


)<


/script>
一些指令能夠接收乙個「引數」，在指令名稱之後以冒號表示。v-bind 指令可以用於響應式地更新 html屬性：

//  href 是引數，通知 v-bind 指令將該元素的 href 屬性 與表示式 url 的值繫結


// v-bind 縮寫成  :


"">


<


/a>
還有乙個 v-on 指令，它用於監聽 dom 事件：

// click代表事件 ， handle代表函式


// v-on 縮寫成 @


// 1.如果事件直接繫結函式名稱,那麼缺省會傳遞事件物件作為事件函式的第乙個引數


// 2.如果事件繫結函式呼叫,那麼事件物件必須作為最後乙個引數顯示傳遞,並且事件物件的名稱必須是


"handle"


>click<


/button>


"handle1(1, 2, $event)"


>click<


/button>


"./vue.js"


>


<


/script>


var myvue =


newvue(,


methods:


,                handle1:


function


(p, p1, event)},


})<


/script>
還有一些分支 結構

v-if、v-else if、v-else

// 相當於 if


"score >= 90"


>


<


/div>


// 相當於 else if


else-if


="score >= 80 && score < 90"


>中<


/div>


// 相當於 else 


else


>差<


/div>
最後乙個 遍歷使用 v-for

>


for=


"(item,index) in numbers"


:key1=


"index"


>


}<


/li>


<


/div>


"./vue.js"


>


var myvue =


newvue(,


,]},


})<


/script>

學習vue第一天

一.框架和庫的區別。框架 是一套完整的解決方案 對專案的侵入性較大，專案如果需要更換框架，則需要重新架構整個專案。例如 node 的 express框架 庫 外掛程式 提供某乙個小功能，對專案的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求.例如 jquery zepot 移...

Vue基礎第一天

foreach function value,index 4 1.filter 過濾器 filter function item,index let arr 1,2,3,4,5,arr.filter function item,index 4 2.map 對映 對於陣列的對映map function...

Vue筆記第一天

v if和v show v if 如果為true 相當於div.style.display block 如果為false 相當於div.style.display none 陣列 物件的插值v for v for item,index in arrs v for 的優先順序高於v if v show...