即
}作用:在檢視中渲染資料
注意: - 模板中是js環境(必須放表示式或值),不會去放語句。
- 模板中的變數和函式必須是例項中的屬性或者方法
- 對於js全域性函式,有些可以使用,有些不可以,即(白名單):
對於全域性window下的方法vue設定了白名單,只有在白名單下的方法,模板才可以使用。
`白名單`
: 'infinity,undefined,nan,isfinite,isnan,'+'parsefloat,parseint,decodeuri,decodeuricomponent
,encodeuri,encodeuricomponent,'+'math,number,date,array,object,boolean,string,regexp,map,
set,json,intl,' +'require'(摘自官網)
- if結構不能用,if-else也不能
if可以用邏輯運算子代替,即(&& 和 ||),這裡涉及到短路運算(不懂的小夥伴可以私聊哦)
if-else可以用三目運算子,即 a>b?c:d
作用:擴充套件了普通html屬性的功能(其用法跟自定義屬性相同)
語法:v-指令名=
"值"具體常用的vue指令有:
+ v-model
將表單控制項的value屬性與vue中的資料進行`雙向繫結`
+ v-text
將元素的文字內容與乙個vue的資料進行繫結
這裡需要注意的是:
}模板引擎和v-text都不會渲染富文字資料
+ v-html
同v-text,但v-html會渲染富文字資料
+ v-bind
將乙個普通的任意標籤的屬性(可以是自定義屬性)的值與vue的乙個資料進行繫結,可以簡寫成 :屬性
+ v-on
將vue元素的事件與vue的方法進行繫結,可以簡寫成 @事件
繫結方法為:
"fn"
>按鈕<
/button>
newvue(}
})"fn()"
>按鈕<
/button>
// 需要傳參的時候
newvue(}
})方法中改變資料
this
.資料 = 值
eg:,
methods:}}
另外,vue還給我們提供了事件修飾符:
.stop 阻止事件冒泡
.prevent 阻止預設事件
.capture 事件捕獲階段提前觸發
.self 只能自己觸發,其後代元素無法觸發
.once 事件只觸發一次
總結
以上就是常見指令,即
《元素 v-指令=「***」>
指令的值需要寫在引號中,且:
1.為js環境
2.裡面可以寫表示式,不能用語句
3.全域性函式中只能使用白名單中的
即相當於模板中的語法,但v-model有點特殊,小夥伴們可以摸索一下。
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...
04vue 模板語法 指令
指令 directives 是帶有v 字首的特殊屬性。即 vue給html元素增加了一些自定義屬性,這些自定義是屬性是以 v 開頭的屬性 v text 更新元素的 textcontent。如果要更新部分的 textcontent 需要使用 插值。v html 更新元素的 innerhtml v sh...
vue的模板語法
vue 指令元件 模板語法支援性還是很高的,資料型別都是支援的,但是不支援 輸出語法 console.log alert 格式 v mustache語法 v msg v v html 將乙個資料展示在乙個dom內容中,innerhtml html屬性 v bind 單項資料繫結 v text 非轉義...