An in-depth analysis of template syntax in Vue: interpolation and directives

青灯夜游

Release： 2021-11-17 19:42:42

forward

2206 people have browsed it

This article takes you through the template syntax in Vue and introduces interpolation syntax and instruction syntax. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

An in-depth analysis of template syntax in Vue: interpolation and directives

Vue has a lot of template syntax that is particularly easy to use. You can write some template syntax defined by Vue in HTML to quickly display data, binding methods, etc. This is one of the reasons why Vue is so quick to get started with.

1. Understanding of templates

Let’s first understand what is a template?

The template is a dynamic html page, which contains some js syntax codes

Vue’s template syntax is divided into two types, They are:

[Interpolation syntax] Double brace expression ("Mustache" syntax) [One]
[Instruction syntax] Instruction (custom label starting with v- Attributes) [Many]

1. Interpolation syntax:

Function: Used to parse the content of the tag body and output data to the page
Writing method: {{xxx}}, xxx is a js expression, and all attributes in the data can be read directly, and the method of the object can be called.
Remarks: Write js expression inside : js code with return value, instead of js statement

2. Instruction syntax:

Function: used to parse tags (Including: tag attributes, tag body content, binding events...)
Example: v-bind:href="xxx" or abbreviated as :href ="xxx", xxx also needs to write js expressions, and can directly read all attributes in data
Note: There are many instructions in Vue, and the forms are: v-????

[Related recommendation: "vue.js tutorial"]

Let’s introduce a few commonly used instructions. grammar.

2. Command syntax: Force data binding `v-bind:`

Function: Specify the changed attribute value

Complete writing method

v-bind:xxx=&#39;yyy&#39;  // yyy会作为表达式解析执行

Copy after login

Concise writing method

:xxx=&#39;yyy&#39;

Copy after login

One-way data binding

Syntax: v-bind:href ="xxx" or abbreviated as :href ="xxx"
Features: Data can only flow from data to page

Two-way data binding instruction`v-model`

Syntax: v-mode:value="xxx" or abbreviated as v -model="xxx"
Features: Data can not only flow from data to page, but also from page to data

##3 . Instruction syntax: Bind event listener

v-on:

Function: Bind the callback function of the specified event name

Complete writing method

v-on:click=&#39;xxx&#39;
v-on:keyup=&#39;xxx(参数)&#39;
v-on:keyup.enter=&#39;xxx&#39;

Copy after login

Concise writing

@click=&#39;xxx&#39;
@keyup=&#39;xxx&#39;
@keyup.enter=&#39;xxx&#39;

Copy after login

4. v-text and v-html

v-text

Function: Render text content to the node where it is located. The difference between
and interpolation syntax:
v-text will replace the content in the node, but {{xx}} will not.

v-html

1. Function: Render content containing html structure to the specified node.

2. The difference from interpolation syntax:

v-html will replace all the content in the node, {{ xx}} will not.
v-htmlcan identify html structure.

3. Serious attention:

v-htmlhas security issues! ! ! !

v-html on trusted content, never on user-submitted content!

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

Copy after login

An in-depth analysis of template syntax in Vue: interpolation and directives

5. Conditional rendering instructions

Remove tag delete

##v -if

v-else

##v-else="expression"
Applies to: Toggle Less frequent scenarios. Features: DOM elements that are not displayed are removed directly. Note: v-if can be used together with: v-else-if and v-else, but the structure must not be "interrupted".

Add style hiding (display: none)

v-show

Writing:

is suitable for: scenarios with high switching frequency. Features: DOM elements that are not displayed have not been removed, they are just hidden using styles

[Remarks] When using v-if, the element may not be obtained, but it can definitely be obtained using 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>

Copy after login

An in-depth analysis of template syntax in Vue: interpolation and directives

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 }

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of An in-depth analysis of template syntax in Vue: interpolation and directives. For more information, please follow other related articles on the PHP Chinese website!