vue之模板语法

模板语法是 ViewModel将数据以何种形式渲染带View层的规则

插值

一、标签内容

<!-- msg必须是vm的属性(绑定data就是响应数据)，不然无法渲染 -->
<span>{{msg}}</span>
<span v-html="htmlData"></span>

二、标签attribute

如果 dynamicId 的值是 null、undefined 或 false，则 id attribute 甚至不会被包含在渲染出来的 元素中（就是不会渲染attribute节点）

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

javascript表达式

其实就是标签内容或者属性节点可以直接用javascript表达式，但是需要注意，表达式内的变量仍然需要满足是Vue实例的属性

指令

v-bind用于响应式更新属性 => 缩写 ‘:’，v-on监听事件 => 缩写 '@'
有意思的是它们都可以动态绑定：

//attributeName 相当于摸版解析值，解析的值作为响应式更新属性的属性名
<a v-bind:[attributeName]="url"> ... </a>

多节点值绑定，模板值为对象

//<a v-bind="$props"> ... </a> 将父组件的props传给子组件
<a v-bind="attributeObj"> ... </a>
....
attributeObj: {
  id: 'id',
  name: 'name',
  href: 'a'
}

附录

学习循环和判断指令的小可爱点击这里 vue之条件和列表渲染