vue中的模板语法是什么

本文小编为大家详细介绍"vue中的模板语法是什么"，内容详细，步骤清晰，细节处理妥当，希望这篇"vue中的模板语法是什么"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一、模板语法

模板语法分为插值语法和指令语法两种。

1.插值语法

插值语法是用两个大括号来表示的，用于解释标签体内容，{{xxx}}里面的xxx必须要是js表达式，xxx就可以在被解析后去自动读取实例中定义的属性了。（学习视频分享：vuejs教程）

· 标签体：<>这个位置就是标签体<>，举个栗子

插值语法
 [插值语法就是标签体]
Hello,{{name}}
 [Hello,{{name}}就是标签体 ]

· js表达式：可以产生一个值的，举几个例子就明白了

• name

• 1+1

• ok ? 'YES' : 'NO'

· js代码（语句）是一种特殊的js代码，会产生一个值 js代码（语句）：举几个比较常见的例子

• if(){}

• for(){}

2.指令语法

指令语法以v-开头，你应该不会陌生，包括v-for、v-on、v-bind......

它的作用是解析标签（包括标签属性，标签体内容，绑定事件），功能就非常强大了，我们这里举个v-bind的使用案例，它是用来绑定属性的，v-on则是用于绑定事件：

            
插值语法
            
Hello,{{name}}
            
指令语法
            点我点我！            
                {{index+1}}. {{item.toUpperCase() }}