Vue常用命令

2022-05-21 22:12:09 字數 2246 閱讀 8501

指令 (directives) 是帶有「v-」字首的特殊屬性。每乙個指令在vue中都有固定的作用。

在vue中,提供了很多指令,常用的有:v-if、v-model、v-for等等。

指令會在vm物件的data屬性的資料發生變化時,會同時改變元素中的其控制的內容或屬性。

因為vue的歷史版本原因,所以有一部分指令都有兩種寫法:

vue1.x寫法             vue2.x的寫法

v-html ----> } # vue2.x 也支援v-html,輸出html**的內容

v-bind:屬性名 ----> :屬性

v-on:事件名 ----> @事件名

格式:

《標籤名 :標籤屬性="data屬性">}

**

顯示wifi密碼效果:

顯示密碼

有兩種事件操作的寫法,@事件名 和 v-on:事件名

按鈕

按鈕2

總結:

1. 使用@事件名來進行事件的繫結

語法:2. 繫結的事件的事件名,全部都是js的事件名:

@submit ---> onsubmit

@focus ---> onfocus

....

例如:完成**購物車中的商品增加減少數量

步驟:給vue物件新增運算元據的方法

在標籤中使用指令呼叫運算元據的方法

+-

格式:

值可以是字串、物件、物件名、陣列

乙個段落

乙個段落

改變字型顏色

第二個段落

**執行效果:

總結:

1. 給元素繫結class類名,最常用的就是第二種。

vue物件的data資料:

data:

}html元素:

2222

最終瀏覽器效果:

2222

格式1:值是json物件,物件寫在元素的:style屬性中

標籤元素:

data資料如下:

data:

格式2:值是物件變數名,物件在data中進行宣告

標籤元素:

data資料如下:

data:

}格式3:值是陣列

標籤元素:

data資料如下:

data: ,

style2:

}

國內新聞

國際新聞

銀河新聞

國內新聞列表

國際新聞列表

銀河新聞列表

**執行效果:

vue中提供了兩個指令可以用於判斷是否要顯示元素,分別是v-if和v-show。

標籤元素:

data資料:

data:

v-else指令來表示 v-if 的「else 塊」,v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面,否則它將不會被識別。

標籤元素:

data資料:

data:

可以出現多個v-else-if語句,但是v-else-if之前必須有乙個v-if開頭。後面可以跟著v-else,也可以沒有。

標籤元素:

data資料:

data:

用法和v-if大致一樣,區別在於2點:

v-show後面不能v-else或者v-else-if

v-show隱藏元素時,使用的是display:none來隱藏的,而v-if是直接從html文件中移除元素[ dom操作中的remove ]

標籤元素:

data資料:

data:

在vue中,可以通過v-for指令可以將一組資料渲染到頁面中,資料可以是陣列或者物件。

資料是陣列:資料是物件:

docker常用命令 Docker 常用命令筆錄

格式docker run 選項 映象 命令 引數.示例docker run it rm ubuntu 16.04 bash 示例解釋 it 這是兩個引數,乙個是 i,表示互動式操作,乙個是 t表示終端 rm 這個引數是說容器退出後隨之將其刪除 ubuntu 16.04 這是指用ubuntu 16.0...

常用命令 Git 常用命令大全

安裝教程可參照 廖雪峰老師的安裝教程。git config 在git中,使用git config 命令來配置 git 的配置檔案,git配置級別主要有3類 1 倉庫級別 local 本地 git 倉庫級別配置檔案,作用於當前倉庫。優先順序最高 2 使用者級別 global,全域性配置檔案,作用於所有...

Linux常用命令 vi vim常用命令介紹

vi vim是linux系統自帶的乙個功能豐富的文字編輯器 命令字元 介紹dd 雙擊d 剪下當前行 num dd 雙擊d 剪下當前行 例如10dd可以刪除10行 yy拷貝當前行 p將內容貼上至游標所示位置 命令 說明 set number 頁面顯 hi 檢視當前系統提供的高亮模式 match col...