首頁  >  文章  >  web前端  >  深入淺析Vue中的範本語法:插值和指令

深入淺析Vue中的範本語法:插值和指令

青灯夜游
青灯夜游轉載
2021-11-17 19:42:422174瀏覽

這篇文章帶大家了解Vue中的範本語法,介紹一下插值語法、指令語法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

深入淺析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-????
  • 【相關推薦:《
vue.js教程

》】#下面我們來介紹幾個常用的指令文法.

2. 指令語法:強制資料綁定

v-bind:

#功能:指定變化的屬性值

完整寫法
v-bind:xxx='yyy'  // yyy会作为表达式解析执行

簡潔寫法

:xxx='yyy'

單向資料綁定

    語法:
  • v-bind:href ="xxx"

    或簡寫為:href ="xxx"#​​

  • 特點:資料只能從data 流向頁面
  • 雙向資料綁定指令
v-model

    語法:
  • 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、與內插語法的差異:

(1).

v-html

會取代節點中所有的內容,
    {{ xx}}
  • 則不會。 (2).v-html可以辨識html結構。
  • 3、嚴重註意:v-html
  • 有安全性問題! ! ! !

(1). 在網站上動態渲染任意HTML是非常危險的,容易導致XSS攻擊。

(2). 一定要在可信的內容上使用
    v-html
  • ,永遠不要用在使用者提交的內容上!
  • <body>
        <div id=&#39;app&#39;>
    
            <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(&#39;abc&#39;)">test2</button> <!--可以传参数 -->
            <button @click="test2(msg)">test2</button>
        </div>
    
    
    
        <script src="../js/vue.js"></script>
        <script>
            new Vue({
                el: &#39;#app&#39;,
                data: {
                    msg: &#39;<a href="http:www.baidu.com">I Will Back!</a>&#39;,
                    imgUrl: "https://cn.vuejs.org/images/logo.png"
                },
                methods: {
                    test1() {
                        alert(&#39;heheh&#39;);
                    },
                    test2(content){
                        alert(content);
                    }
                }
    
            })
        </script>
    </body>
5. 條件渲染指令

深入淺析Vue中的範本語法:插值和指令

#移除標籤刪除

##v -if

v-else
  • 寫法:
#v-if="表達式"

  1. #v-else-if="表達式"
  2. v-else="表達式"
  3. 適用於:切換頻率較低的場景。 特點:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求結構不能被「打斷」。
  4. 新增樣式隱藏(display: none)

v-show

寫法:
    v-show= "表達式"
  • 適用於:切換頻率較高的場景。 特點:不展示的DOM元素未被移除,僅是使用樣式隱藏掉
【備註】使用v-if的時候,元素可能無法取得到,而使用v-show一定可以獲得。

比较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: &#39;#demo&#39;,
            data: {
                ok: false,
            }
        })
    </script>
</body>

深入淺析Vue中的範本語法:插值和指令

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刪除