Vue入门之Vue基本使用

2.基本使用

2.1插值表达式：{{}}

{{插值表达式}}

1.支持data区域数据的显示。例如：{{message}}

2.支持表达式的计算。例如：{{1+2+3}} 、 {{‘Hello’ + ’ World’}}

3.支持函数的调用。例如：{{‘Hello’.split(’’)}}

2.2标签体操作：v-text&v-html

2.3循环语句: v-for

2.4属性绑定–普通属性： v-bind:xxx

2.5属性绑定–class属性: v-bind:class

• 案例：隔行换色

  

  

2.6属性绑定–style属性: v-bind:style

2.7控制语句: v-show & v-if

2.8表单数据绑定: v-model

通过 v-model 可以完成数据双向绑定.

• 数据data区域 绑定 视图区域, 如果data数据区域的数据发生改变, 自动更新表单标签的显示

• 视图区域 绑定 数据data区域 , 如果表单标签的数据发生改变,自动更新data区域存放的数据.

  

  

  

• 案例：数据绑定–对象