# 介绍

模板语法
文件结构

# 模板语法

在官网文档开始介绍的开头，有这么一句话

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

单单这一句话就有好几个名词，简化一下可以这么理解：

vue.js 允许采用模板语法（{{}}）来将数据渲染进 DOM 里。

<div id="app">
  {{message}}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上例来自于官网，可以看出，官网都是基于引入 CND 的方式来举的例子，即引入 vue 的<script>标签。不过我准备通过 vue-cli 脚手架生成的项目来进行讲解，所以本文后面的例子都是基于vue-cli生成的项目进行举例。

上例中,el代表（element）把页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。而{{}}就是 vue 提供的模板语法，用来渲染数据使用的。{{}}里面放入data中的变量，即可渲染对应的值。如果你不想用{{}}的形式，可以通过delimiters进行改变。

new Vue({
  delimiters: ['${', '}']
})

经过以上设置后，渲染变量不在通过{{}}，而是${}。

这里先打开我们初始化好的名为test的 vue 项目，打开命令行工具，输入npm run serve（vue 3.x 以上） | npm run dev（vue 2.x）即可启动项目按提示在浏览器输入路径即可访问项目。

这里为了简化操作，直接修改src/components/HelloWorld.vue文件，初始化为:

<template>
  <div></div>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<style></style>

那么上例可以重写为：

<template>
  <div>{{message}}</div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
</script>

<style></style>

注意这里有点区别，在 vue 项目里，每个页面都是由一个或多个.vue文件组成的，而每个.vue文件里面，分别由<template> <script> <style>标签组成。

# 文件结构

# template

<template>标签里面存放的就是我们的html代码，以后所有关于html的代码都需要放在template里面。同时，为了保证 vue 能够正常的渲染 dom 树结构，每个组件必须只有一个根元素，也就意味着大部分情况下，<template>标签里面只能有一个<div>标签。

为了测试一下，我把页面改为：

警告

<template>
  <div>{{message}}</div>
  <div>{{message}}</div>
</template>

果不其然，页面报错了。所以，各位朋友以后写的时候一定要注意，<template>标签下只能有一个“根”标签哦。

# script

<script>标签里面存放的是我们的javascript代码啦，通过es6的export方式导出。如果没有学习过 es6 的朋友看不懂没关系，页面结构是固定模式，每个页面都需要这样初始化。但是，对于一个合格的前端来说， es6 语法是必须要会的，所以各位要抓紧学习啦。

细心的朋友可能注意到，<script>标签里面的data在两个例子中有些区别，一个是data {} 一个是data() {}。如果学过 es6 语法的朋友肯定知道data() {}代表一个函数，一个对象的函数。如果用 es5 的语法是这样的data: function() {}。

那么为什么需要声明一个函数呢？官网有解释。因为我们在写代码的时候，需要新建多个.vue文件，如果没有以函数的方式声明，就会影响到其他文件的变量，所以我们应该以函数的方式声明：

// es6
export default {
  data() {
    return {
      message: 'hello'
    }
  }
}

// es5
export default {
  data: function() {
    return {
      message: 'hello'
    }
  }
}

以上两种方式都可以。但是如果不使用函数声明，浏览器控制台会报错。

# style

<style>标签用来声明 css 样式，这个不需要多介绍。不过<style>标签和上面的data有共同的特性，即所有的类名是共通的。Vue 通过提供scoped属性，可以让 css 只存在于当前组件内。用法为:

<style scoped>
  #app {
    // ... some css
  }
</style>

Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在 <style> 标签内

所以，如果你想要使用sass、less和stylus的话，只需要指定一个lang属性，即：

<style scoped lang="less">
  #app {
    // ... some css
  }
</style>

使用上述预处理器的时候，需要先安装对应的包和 loader 哦，如: npm install less less-loader -S。

到目前为止，你已经学会了创建一个基本的文件结构，并且了解了各个标签的使用。下面即将开始学习 Vue 具体功能的使用。

← 安装指令 →