vue的模板语法

一，前言

1.Vue的核心是使用模板语法，声明式的将data数据渲染进DOM系统。

2.模板语法是响应性data数据在dom中的声明的地方。

二，操作文本节点的模板语法

1.在vue中文本插值使用双大括号语法

<p> {{value}} </p>

2.在双大括号中，除了可以简单的传值外，还可以使用表达式，每个绑定都只能包含单个表达式。

<p> {{value.split().reserve().join()}} </p>

3.双括号里的值会被解析成普通文本,因此传入一个html元素，也当成普通的文本值。

三，操作属性节点的模板语法

1.在vue中操作属性使用的是指令系统的v-bind

<p v-bind:title="value"> {{value}} </p>

2.为了方便，v-bind指令可以使用缩写：

<p :title="value"> {{value}} </p>

3.使用指令v-bind后，后面的值可以是变量或者表达式根据data数据动态改变，

<a :herf="address">下载</a>  //address是变量

4.除了改变属性值之外，也可以动态改变属性的值，将属性使用[]包裹来添加动态属性

<a v-bind:[type]="address"> {{value.split().reserve().join()}} </a>

5.注意，当同时需要包含单引号和双引号时，若外部使用双引号，内部需要使用单引号，反之。