前言:
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...