作者简介：一名计算机萌新、前来进行学习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

<!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>

Vue基础目录结构与代码相关推荐

Vue项目目录结构介绍（三）
前言本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等. 1.基础目录和文件介绍在上一章,我们通过 vue-cli 创建了一个新的 ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
vue php 架构目录,Vue.js 目录结构
Vue.js 目录结构上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: 目录解析目录/文件说明build项目构建(webpack)相 ...
Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见学习Dart 基础知识移步这里安装flutter环境相关移步这里 flutter基础组件使用相关移步这里文章目录一 ...
muduo网络库：18---muduo简介之（muduo库的由来、编译安装、目录结构、代码结构、线程模型）
一.由来 2010年3月陈硕先生写了一篇<学之者生,用之者死--ACE历史与简评>(文章参阅:https://blog.csdn.net/Solstice/article/details/ ...
Vue项目目录结构介绍讲解
1.Vue单文件组件 node_modules:依赖的node工具包目录 public: 一般用于存放一些静态资源文件,例如图片,视频,音频等资源文件.需要特别注意的是webpack在进行打包的时候, ...
Vue.js 目录结构
目录解析目录/文件说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载的项目依赖模块 src ...
vue框架目录结构（全）
使用vue init webpack 项目名称命令创建的vue-cli2的项目目录目录说明: bulid:项目构建相关代码 config:配置目录,包括端口号等 node_modules:npm加载 ...
VUE项目目录结构说明
最近做一些Vue后端开发的简单项目,,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助 ...

Vue基础目录结构与代码

前言

一.Vue.js 目录结构

1.目录解析

二.Vue.js 起步

三.Vue.js实现hello world

四.Vue.js 模板语法

插值

文本

文本插值

Vue基础目录结构与代码相关推荐

最新文章

热门文章

Vue基础 目录结构与代码

前言

一.Vue.js 目录结构

1.目录解析

二.Vue.js 起步

三.Vue.js实现hello world

四.Vue.js 模板语法

插值

文本

文本插值

Vue基础 目录结构与代码相关推荐

最新文章

热门文章

Vue基础目录结构与代码

Vue基础目录结构与代码相关推荐