Vue基础-模版语法

一.Vue组件

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

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

<template>
 <div>{{ msg }}</div>
 </template>

 <script>
 export default {
 data: function() {
 return { msg: 'hello world vue' }
 },
 methods: {
 doSth: function() {
 console.log('do some things')
 }
 }
 }
 </script>

 <style scoped>
 </style>

二.模版语法

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

<span>{{ msg }}</span>

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

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

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

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