Vue基础-模版语法

一.Vue组件

Vue组件包含template、script、style三个部分:

template是Vue组件的视图部分,等同于html的DOM树
script是Vue组件的逻辑部分,其中包含了和页面交互的数据(data)以及要调用的方法(methods)等
style是Vue组件的样式部分,存放了生成html页面需要的css样式



 

 

二.模版语法

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

{{ msg }}

直接用双大括号形式将对应数据对象中的msg属性值替换到相应的位置,这里有几个注意点

1.双括号中可以是数据对象的属性,也可以是单个表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

2.该模版语法不可用于HTML特性中,HTML标签的class、style等属性中不可用该表达式,可以对应的使用v-bind标签替代

你可能感兴趣的:(Vue基础-模版语法)