作者简介：一名计算机萌新、前来进行学习VUE,让我们一起进步吧。
座右铭：低头赶路，敬事如仪
个人主页：我叫于豆豆吖的主页
目录
前言
本章将会讲解Vue.JS的目录结与基础代码。
一.Vue.js 目录结构
1.目录解析
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
二.Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
// 选项
})三.Vue.js实现hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--插值表达式，绑定vue中的data数据-->
{
{message}}
</div>
<script src="vue.min.js"></script>
<script>
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {//3、定义页面中显示的模型数据
message: 'hello vue!'
}
})
</script>
</body>
</html>
四.Vue.js 模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
数据绑定最常见的形式就是使用 { {...}}（双大括号）的文本插值：
文本插值
<div id="app"> <p>{
{ message }}</p> </div>