Vue基础 目录结构与代码

• 作者简介：一名计算机萌新、前来进行学习VUE,让我们一起进步吧。 

•  座右铭：低头赶路，敬事如仪

• 个人主页：我叫于豆豆吖的主页

目录

 前言

一.Vue.js 目录结构

1.目录解析

二.Vue.js 起步 

三.Vue.js实现hello world

四.Vue.js 模板语法

插值

文本

文本插值

---

 前言

本章将会讲解Vue.JS的目录结与基础代码。

一.Vue.js 目录结构

1.目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

二.Vue.js 起步 

 

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue({
  // 选项
})

三.Vue.js实现hello world

    
    
    


    

        
        {{message}}
    
    
    

四.Vue.js 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

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

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

文本插值

 
{{ message }}
 

---