前端 vue框架

2021-08-27 18:19:38 字數 1181 閱讀 2437

model         模型 - 資料

view          檢視 - html 標籤,樣式

viewmodel   用來結合模型和檢視 - 決定資料展示在哪個標籤上

vue中的資料和頁面上標籤內容是'繫結'在一起的,模型資料發生了變動,頁面檢視也會相應變化。這種特性稱之為`響應式`框架。

{}}佔位,到模型中找相應的資料進行展示, 匹配的是模型資料的屬性名稱 -->

> 注意:

1. 繫結時,要把乙個統一的父標籤與vue物件進行繫結

2. 不要把vue物件和html或body標籤繫結,建議和乙個div標籤繫結

`}` 中的表示式可以進行簡單的運算,例如:

```}

}```

為了不要直接在檢視執行這些過於複雜的計算,可以把這些計算的邏輯通過`計算屬性`來表示

{}}佔位,到模型中找相應的資料進行展示, 匹配的是模型資料的屬性名稱 -->}}

} , }, }

條件成立,在檢視上就顯示此標籤,否則檢視上不會有這個標籤

} , }, }

0">

}}}}

暫無商品

v-show 指令 根據條件決定表示是否顯示,

與v-if的區別在於,條件不成立時,標籤根本不會出現

v-show是條件不成立時,隱藏了標籤

v-show不能配合v-else 使用

要實現標籤屬性的繫結,必須使用v-bind 指令

0">

}}}{}} 語法只能用來佔位內容,不能作為標籤的屬性(特性)

要繫結標籤的屬性,需要使用 v-bind:屬性名="變數"

簡化寫法(省略了v-bind):

:屬性名="變數"

-->

繫結後,在js中對資料的修改會動態的改變檢視中的顯示。

要想讓檢視中修改影響到js中的資料,需要雙向繫結v-model。

簡化寫法: @事件名

還可以實現引數傳遞

-->

v-bind:屬性名 只能實現單向的繫結:模型的修改能夠立刻反應到檢視,但檢視的修改不能影響模型

v-model:屬性名 能夠實現雙向繫結:不僅有v-bind的功能,而且檢視的修改也能影響模型了

前端框架 Vue

test 函式呼叫表示式var obj var arr 123,bai obj.name 屬性呼叫表示式 arr 0 屬性呼叫表示式let name wutao name 變數呼叫表示式123 數值字面量表示式 wtao 字串字面量表示式 true 布林字面量表示式 null 空表示式 undefi...

前端框架Vue

由於 npm 安裝速度慢,本教程使用了 的映象及其命令 cnpm,安裝使用介紹參照 使用 npm 映象。npm 版本需要大於 3.0,如果低於此版本需要公升級它 檢視版本 npm v 2.3.0 公升級 npm cnpm install npm g 公升級或安裝 cnpm npm install c...

前端框架之Vue介紹

庫只是乙個工具,供我們使用 框架是具有思維的,有它自己生態系統 前端這個崗位是從後端慢慢分出來 jq 2010前 mvc思想 軟體架構 為什麼前端要從後端引入mvc這個思想?cmd mvc衍生架構 vue mvvm angular2.0 mvvm 2016年 如何高效的將伺服器資料渲染到前端介面 如...