vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。
new
vue(
)
v-show
:根據表示式的真假值來顯示和隱藏元素
"vs"
>
"temp"
>如懿傳<
/p>
"ok"
>還珠格格<
/p>
<
/div>
var vs =
newvue(}
) window.
setinterval
(function()
,1000
)<
/script>
v-if
和v-else
:根據表示式的真假值來動態插入和移除元素
v-show
和v-if
v-else
同為顯示隱藏元素,其區別為:
v-html
:插入標籤
v-text
:插入文字
v-for
:根據條件渲染
"ab"
>
>
v-for
="(item,index) in arr"
>
}:}li
>
ul>
border
="1"
>
>
width
="100px"
>
編號th
>
width
="100px"
>
姓名th
>
width
="100px"
>
年齡th
>
width
="100px"
>
性別th
>
tr>
v-for
="item in tab"
>
>
}td>
>
}td>
>
}td>
>
}td>
tr>
table
>
div>
>
newvue(,
,]}}
)script
>
v-bind
:繫結元素,並由相應效果 (簡寫::設定值
)
'a'>
v-bind:href
="link"
v-bind:class=""
target
="_blank"
>
>
div>
>
newvue(}
)script
>
v-on
:繫結函式
"tupian"
>
"" v-on=
"">
<
/div>
newvue(,
methods:
, enter:
function()
}})<
/script>
v-model
:是將input的值和變數進行繫結 ——典型的資料雙向繫結
"***"
>
請選擇性別:<
/p>
="male"
>
"radio" value=
"男" id=
"male" v-model=
"gender" name=
"***"
>男<
/label>
="female"
>
"radio" value=
"女" id=
"female" v-model=
"gender" name=
"***"
>女<
/label>
性別:}
<
/p>
<
/div>
newvue(}
)<
/script>
v-once
:讓元素或元件值渲染一次,一但繫結,資料就不會改變
v-pre
:用於跳過該元素和其子元素的編譯過程。對於大量沒有指令的節點使用該指令,加快編譯速度
v-cloak
:指令解決初始化慢導致的頁面閃動
Vue常用指令及使用
指令是以資料去驅動dom行為,簡化dom操作。常用指令如下 v text innertext,不能解析文字中的html標籤 v html innerhtml,可解析文字中的html標籤 v show控制元素的顯示 隱藏 v if v else if v else滿足條件才顯示對應的元素 v for遍...
vue常用指令及原理
1 v if 判斷表示式是否為真,如果為真則插入dom。v show 則是通過控制css樣式來控制是否顯示。如果要顯示的元素中含有,使用 v show 可以在顯示之前提前載入,當值為 true 時就顯示。使用 v if 時會直到顯示時才開始載入。2 v for 指令可以用來遍歷乙個陣列或物件 對於陣...
Vue常用的指令及用法
v if 判斷是否隱藏 list.lenght 0 v if div else v else div v for 資料迴圈 item代表是迴圈的值 index代表是每一項 也可以說是下標 key 代表標識 for item,index in list key index p div v bind c...