深入淺析Vue中的範本語法：插值和指令
- 青灯夜游轉載
- 2021-11-17 19:42:422171瀏覽
這篇文章帶大家了解Vue中的範本語法，介紹一下插值語法、指令語法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
Vue有很多模板語法特別好用，就是在HTML中寫一些Vue定義的一些模板語法，可以快速的展現數據，綁定方法等。這也就是Vue上手很快的原因之一。
1. 模板的理解
我們先來理解要理解什麼是模板？
範本就是動態html頁面，這裡麵包含了一些js語法程式碼
Vue的範本語法分成兩種，分別是：
- 【插值語法】雙大括號表達式（「Mustache」語法）【一個】
- 【指令語法】指令（以v-開頭的自訂標籤屬性）【很多】
1、插值語法：
- 功能：用於解析標籤體內容，向頁面輸出資料
- 寫法：
{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性，可以呼叫物件的方法 - 備註：裡面寫js表達式：有傳回值的js程式碼，而不是js語句
#2、指令語法：
- 功能：用於解析標籤（包括：標籤屬性、標籤體內容、綁定事件.....）
- 範例：
v-bind:href="xxx"### 或 簡寫為:href ="xxx"###，xxx同樣要寫js表達式，並且可以直接讀取到data中的所有屬性#備註：Vue中有很多的指令，且形式都是： v-????
2. 指令語法：強制資料綁定
v-bind:完整寫法
v-bind:xxx='yyy' // yyy会作为表达式解析执行
簡潔寫法
:xxx='yyy'
單向資料綁定
- 語法：
- v-bind:href ="xxx"
或簡寫為
:href ="xxx"#特點：資料只能從data 流向頁面 - 雙向資料綁定指令
- 語法：
- v-mode:value="xxx"### 或簡稱為
v -model="xxx"
特點：資料不僅能從data 流向頁面，還能從頁面流向data - 3 . 指令語法：綁定事件監聽 v-on:
簡潔寫法完整寫法
v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
@click='xxx' @keyup='xxx' @keyup.enter='xxx'4. v-text與v-html
#v-text
##作用：向其所在的節點渲染文字內容。
-
與內插語法的差異：
v-text 會替換掉節點中的內容， - {{xx}}
則不會。
v-html
1、作用：在指定節點中渲染包含html結構的內容。 2、與內插語法的差異：
v-html
會取代節點中所有的內容，- {{ xx}}
- 則不會。
(2).v-html可以辨識html結構。 -
3、嚴重註意：v-html 有安全性問題！ ！ ！ ！
(1). 在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊。
- v-html
- ，永遠不要用在使用者提交的內容上！
<body> <div id='app'> <h2>1. 大括号表达式</h2> <p>{{msg}}</p> <!--textContent --> <p>{{msg.toUpperCase()}}</p> <p v-html="msg"></p> <!--innerHTML --> <p v-text="msg"></p> <!--textContent --> <p v-text="msg.toUpperCase()"></p> <h2>2. 指令一： 强制数据绑定</h2> <img src="imgUrl" alt="Vue"> <!--无法显示图片，没有识别成js表达式 --> <img v-bind:src="imgUrl" alt="Vue"> <!--属性值识别成js表达式 --> <img :src="imgUrl" alt="Vue"> <h2>3. 指令二： 绑定事件监听</h2> <button v-on:click="test1">test1</button> <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <!--可以传参数 --> <button @click="test2(msg)">test2</button> </div> <script src="../js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '<a href="http:www.baidu.com">I Will Back!</a>', imgUrl: "https://cn.vuejs.org/images/logo.png" }, methods: { test1() { alert('heheh'); }, test2(content){ alert(content); } } }) </script> </body>
##v -ifv-else
- 寫法：
- #v-else-if="表達式"
- v-else="表達式"
- 適用於：切換頻率較低的場景。
特點：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求結構不能被「打斷」。
v-show寫法：
- v-show= "表達式"
- 適用於：切換頻率較高的場景。 特點：不展示的DOM元素未被移除，僅是使用樣式隱藏掉
比较v-if与v-show
v-if是控制元素是否加载到页面上（有性能开销） v-show是控制元素的显示与隐藏 （初始创建时加载一次）
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, v-if 的所有子节点不会解析
<body>
<div id="demo">
<p v-if="ok">成功了</p> <!-- 移除标签删除 -->
<p v-else>失败了</p>
<p v-show="ok">又成功了</p> <!-- 添加样式隐藏 -->
<p v-show="!ok">又失败了</p>
<button @click="ok = !ok">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
ok: false,
}
})
</script>
</body>
6. 总结
一些常用的指令
-
v-text: 更新元素的 textContent -
v-html: 更新元素的 innerHTML -
v-if: 如果为true, 当前标签才会输出到页面 -
v-else: 如果为false, 当前标签才会输出到页面 -
v-show: 通过控制display样式来控制显示/隐藏 -
v-for: 遍历数组/对象 -
v-on: 绑定事件监听, 一般简写为@ -
v-bind: 强制绑定解析表达式, 可以省略v-bind -
v-model: 双向数据绑定 -
ref: 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象 -
v-cloak: 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
更多编程相关知识，请访问：编程入门！！
以上是深入淺析Vue中的範本語法：插值和指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除