Vue Vue簡單介紹

2021-10-09 21:17:12 字數 1639 閱讀 2824

前言:

vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。

vue.js起步

每個 vue 應用都需要通過例項化 vue 來實現。語法格式如下:

var vm =

newvue

()

vue.js模板語法

1.插值

1)文字

資料繫結最常見的形式就是使用 }(雙大括號)的文字插值:

>

>

}div

>

div>

>

newvue(}

)script

>

2)html

雙大括號會將資料解釋為普通文字,而非 html **。為了輸出真正的 html,你需要使用 v-html

>

v-html

="html"

>

p>

div>

data :

})

3)v-model

v-model通常用於表單元件的繫結,例如input,select等。它與v-text的區別在於它實現的表單元件的雙向繫結,如果用於表單控制項以外標籤是沒有用的。

>

v-model

="message "

/>

div>

data :

})

4)屬性

html 屬性中的值應使用 v-bind 指令。

>

for=

"r1"

>

修改顏色label

>

type

="checkbox"

v-model

="use"

id="r1"

>

>

>

v-bind:class=""

>

v-bind:class 指令

div>

div>

>

newvue(}

);script

>

2.指令

指令是帶有 v- 字首的特殊屬性。

指令用於在表示式的值改變時,將某些行為應用到 dom 上。

3.縮寫

v-bind 縮寫

v-bind:href

="url"

>

a>

:href

="url"

>

a>

v-on 縮寫

v-on:click

="dosomething"

>

a>

@click

="dosomething"

>

a>

Vue Vue元件簡單使用

現在的有些web應用都非常龐大,web開發也越來越元件化 模組化,我們需要在使用vue的時候去寫一些元件,避免重複造輪子,提高元件的復用和開發效率。乙個元件就好像一塊積木,多個元件的層層堆疊 擺放最終形成乙個完整的系統。元件的好處在於降低了各個模組之間的耦合性,以至於我們在維護專案時不會太心累。高度...

初學VUE VUE啟動流程

package.json 在執行npm run dev的時候 啟動vue專案的時候 會在當前專案的目錄中找到package.json,包含一些專案的版本資訊 專案依賴及npm版本要求等 dependencies 專案依賴 devdependencies node npm版本要求 engines br...

入門vue (vue的安裝)

1.安裝node.js 2.基於node.js,利用 npm映象安裝相關依賴 在cmd裡直接輸入 npm install g cnpm registry 回車,等待安裝.3.安裝全域性vue cli腳手架,用於幫助搭建所需的模板框架 在cmd裡 1 輸入 cnpm install g vue cli...