Vue.js

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

青灯夜游

Nov 17, 2021 pm 07:42 PM

vue

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会作为表达式解析执行

Concise writing method

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

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;

Concise writing

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

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

(2). Always use
v-html on trusted content, never on user-submitted content!

<body>
    <div id=&#39;app&#39;>

        <h2 id="nbsp-大括号表达式">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 id="nbsp-指令一-nbsp-强制数据绑定">2. 指令一： 强制数据绑定</h2>
        <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"   alt="Vue">  <!--无法显示图片，没有识别成js表达式 -->
        <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  v-bind: alt="Vue"> <!--属性值识别成js表达式 -->
        <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  : alt="Vue">


        <h2 id="nbsp-指令二-nbsp-绑定事件监听">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>

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

5. Conditional rendering instructions

Remove tag delete

##v -if

v-else
Writing:

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

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!

Statement

This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete

Vue.js vs. React: Which Framework is Right for You?May 01, 2025 am 12:21 AM

Vue.js is suitable for fast development and small projects, while React is more suitable for large and complex projects. 1.Vue.js is simple and easy to learn, suitable for rapid development and small projects. 2.React is powerful and suitable for large and complex projects. 3. The progressive features of Vue.js are suitable for gradually introducing functions. 4. React's componentized and virtual DOM performs well when dealing with complex UI and data-intensive applications.

Vue.js vs. React: A Comparative Analysis of JavaScript FrameworksApr 30, 2025 am 12:10 AM

Vue.js and React each have their own advantages and disadvantages. When choosing, you need to comprehensively consider team skills, project size and performance requirements. 1) Vue.js is suitable for fast development and small projects, with a low learning curve, but deep nested objects can cause performance problems. 2) React is suitable for large and complex applications, with a rich ecosystem, but frequent updates may lead to performance bottlenecks.

Vue.js vs. React: Use Cases and ApplicationsApr 29, 2025 am 12:36 AM

Vue.js is suitable for small to medium-sized projects, while React is suitable for large projects and complex application scenarios. 1) Vue.js is easy to use and is suitable for rapid prototyping and small applications. 2) React has more advantages in handling complex state management and performance optimization, and is suitable for large projects.

Vue.js vs. React: Comparing Performance and EfficiencyApr 28, 2025 am 12:12 AM

Vue.js and React each have their own advantages: Vue.js is suitable for small applications and rapid development, while React is suitable for large applications and complex state management. 1.Vue.js realizes automatic update through a responsive system, suitable for small applications. 2.React uses virtual DOM and diff algorithms, which are suitable for large and complex applications. When selecting a framework, you need to consider project requirements and team technology stack.

Vue.js vs. React: Community, Ecosystem, and SupportApr 27, 2025 am 12:24 AM

Vue.js and React each have their own advantages, and the choice should be based on project requirements and team technology stack. 1. Vue.js is community-friendly, providing rich learning resources, and the ecosystem includes official tools such as VueRouter, which are supported by the official team and the community. 2. The React community is biased towards enterprise applications, with a strong ecosystem, and supports provided by Facebook and its community, and has frequent updates.

React and Netflix: Exploring the RelationshipApr 26, 2025 am 12:11 AM

Netflix uses React to enhance user experience. 1) React's componentized features help Netflix split complex UI into manageable modules. 2) Virtual DOM optimizes UI updates and improves performance. 3) Combining Redux and GraphQL, Netflix efficiently manages application status and data flow.

Vue.js vs. Backend Frameworks: Clarifying the DistinctionApr 25, 2025 am 12:05 AM

Vue.js is a front-end framework, and the back-end framework is used to handle server-side logic. 1) Vue.js focuses on building user interfaces and simplifies development through componentized and responsive data binding. 2) Back-end frameworks such as Express and Django handle HTTP requests, database operations and business logic, and run on the server.

Vue.js and the Frontend Stack: Understanding the ConnectionsApr 24, 2025 am 12:19 AM

Vue.js is closely integrated with the front-end technology stack to improve development efficiency and user experience. 1) Construction tools: Integrate with Webpack and Rollup to achieve modular development. 2) State management: Integrate with Vuex to manage complex application status. 3) Routing: Integrate with VueRouter to realize single-page application routing. 4) CSS preprocessor: supports Sass and Less to improve style development efficiency.

See all articles