vue模板语法

在vue里数据绑定最常见的形式就是使用‘Mustache‘（双大括号）语法的文本插值

<spam>{{ msg }}</spam>

一般配合js中的data（）设置数据

export default {
  name: 'HelloWorld',
 data(){
  return{
    msg:"测试"
  }
 }
}

原始 HTML

双大括号会将数据解释为普通文本，而非HTML代码，为了输出正真的HTML代码，则需要使用v-html指令这里看到的 v-htmlattribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，span 的内容将会被替换为 msg属性的值，插值为纯 HTML——数据绑定将会被忽略

<p> {{ rawHtml }}</p>
<p> <span v-html="rawHtml"></span></p>

 data(){
  return{
    rawHtml:"<h1>我的大宝贝</h1>"
  }
 }

属性Attribute

Mustache语法不能在HTML attributes中使用,要想响应式的绑定一个attribute，应该使用v-bind指令

<div v-bind:id="class1"></div>

 data(){
  return{
    class1:"box"
  }
 }

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除

简写

因为v-bind非常常用，就有了特定的简写语法：

<h3 :class="class1"></h3>

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。

动态绑定多个Attribute属性

可以通过创建一个包含多个Attribute的JavaScript 对象

objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

通过一个不带参数的v-bind指令来绑定到单个元素上

<div v-bind="objectOfAttrs"></div>

使用JavaScript表达式

至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

 data() {
    return {
      flag:false//true
    }
  }

这些表达式都会被作为 JavaScript ，以组件为作用域解析执行。有个限制就是每个绑定只能包含单个表达式

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中 (双大括号)
• 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

仅支持表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

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