這篇文章帶大家了解Vue中的範本語法,介紹一下插值語法、指令語法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
Vue有很多模板語法特別好用,就是在HTML中寫一些Vue定義的一些模板語法,可以快速的展現數據,綁定方法等。這也就是Vue上手很快的原因之一。
我們先來理解要理解什麼是模板?
範本就是動態html頁面,這裡麵包含了一些js語法程式碼
Vue的範本語法分成兩種,分別是:
1、插值語法:
{{xxx}}
,xxx是js表達式,且可以直接讀取到data中的所有屬性,可以呼叫物件的方法#2、指令語法:
v-bind:href="xxx"### 或 簡寫為
:href ="xxx"###,xxx同樣要寫js表達式,並且可以直接讀取到data中的所有屬性
#備註:Vue中有很多的指令,且形式都是:
2. 指令語法:強制資料綁定
v-bind:
完整寫法
v-bind:xxx='yyy' // yyy会作为表达式解析执行
簡潔寫法
:xxx='yyy'
單向資料綁定
或簡寫為:href ="xxx"#
v -model="xxx"
功能:綁定指定事件名的回呼函數簡潔寫法完整寫法
v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'登入後複製
@click='xxx' @keyup='xxx' @keyup.enter='xxx'
##作用:向其所在的節點渲染文字內容。
與內插語法的差異:
v-text則不會。
1、作用:在指定節點中渲染包含html結構的內容。2、與內插語法的差異:
v-html
會取代節點中所有的內容,
(2).v-html
可以辨識html結構。3、嚴重註意:
v-html(1). 在網站上動態渲染任意HTML是非常危險的,容易導致XSS攻擊。
1. 大括号表达式
{{msg}}
{{msg.toUpperCase()}}
2. 指令一: 强制数据绑定
![]()
![]()
![]()
3. 指令二: 绑定事件监听
##v -if v-else
v-show寫法:
v-if
是控制元素是否加载到页面上(有性能开销)v-show
是控制元素的显示与隐藏 (初始创建时加载一次)
成功了
失败了
又成功了
又失败了
一些常用的指令
v-text
: 更新元素的 textContentv-html
: 更新元素的 innerHTMLv-if
: 如果为true, 当前标签才会输出到页面v-else
: 如果为false, 当前标签才会输出到页面v-show
: 通过控制display样式来控制显示/隐藏v-for
: 遍历数组/对象v-on
: 绑定事件监听, 一般简写为@v-bind
: 强制绑定解析表达式, 可以省略v-bindv-model
: 双向数据绑定ref
: 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象v-cloak
: 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }更多编程相关知识,请访问:编程入门!!
以上是深入淺析Vue中的範本語法:插值和指令的詳細內容。更多資訊請關注PHP中文網其他相關文章!