2. Vue语法插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

例如：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个
表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

具体验证

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入门</title>
      <script src="js/vue.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}}<!--Vue的插值表达式，将data中定义的数据显示到此处-->
         <!--三元运算符-->
         {{true, "OK", "No"}}
      </div>
   </body>
   <script>
      //view model
      //创建Vue对象 内部是json格式，所以是大括号
      new Vue({
         el:"#app", //由vue接管id为app区域
         data:{
            message:"Hello Vue!"//注意：此处不要加分号
         }
      });
   </script>
</html>

这里可以对tomcat重新热部署，使其修改资源后页面刷新同步更新，需要重新配置下

image.png

选择war exploded

image.png

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入门</title>
      <script src="js/vue.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}}<!--Vue的插值表达式，将data中定义的数据显示到此处-->
         <!--三元运算符-->
         {{true, "OK", "No"}}
         <!--数学运算-->
         {{number*3.14}}
      </div>
   </body>
   <script>
      //view model
      //创建Vue对象 内部是json格式，所以是大括号
      new Vue({
         el:"#app", //由vue接管id为app区域
         data:{
            message:"Hello Vue!",//注意：此处不要加分号   多条信息使用逗号分隔
            number:100
         }
      });
   </script>
</html>

image.png

验证无效语句

<!--声明变量，if语句等插值表达式不支持
{{var a = 1}}
{{if(a = 10){}}}
-->

无显示效果

image.png

2. Vue语法 插值表达式

推荐阅读更多精彩内容

2. Vue语法插值表达式