Vue基础 目录结构与代码

最新推荐文章于 2024-03-21 10:50:13 发布
最新推荐文章于 2024-03-21 10:50:13 发布
阅读量1k 收藏 4
点赞数 2
分类专栏： Vue 文章标签： html 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74885516/article/details/129720931
版权
本文介绍了Vue.js的目录结构，包括build、config、src等关键目录的作用。接着，文章阐述了如何起步创建Vue应用，通过实例化Vue来实现基础的HelloWorld。此外，还探讨了Vue的模板语法，特别是文本插值的数据绑定方式。
摘要由CSDN通过智能技术生成

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

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

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

目录

 前言

一.Vue.js 目录结构

1.目录解析

二.Vue.js 起步 

三.Vue.js实现hello world

四.Vue.js 模板语法

插值

文本

文本插值

 前言

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

一.Vue.js 目录结构

1.目录解析

目录/文件说明
build项目构建(webpack)相关代码
config配置目录，包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
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基本代码结构
Yi_LittleRock的博客
04-15 2028
Vue基本代码结构 1.引入Vue.js文件 <script src="Vue.js"></script> 2.创建Vue实例对象 new Vue() var vm=new Vue({ el:"#app", //选择器的名称，表示当前new的Vue实例，要控制页面上的哪一个区域 data:{ //存放el中要用到的数据 msg:'hello world' //指令 } }) 通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。
vue后台管理基础版本代码
03-20
Vue 后台管理基础版本代码是基于 Vue3 的一个后台管理系统通用框架，旨在提供一个基本的起点，帮助开发者快速构建自己的后台应用。Vue.js 是一套用于构建用户界面的渐进式框架，以其轻量级、易学易用、组件化的特点...
vue项目代码设计目录【不定期更新ing】
柠檬不萌只是酸i
10-18 241
（1）src目录的文件： （2）常用的依赖文件： (2-1)stylus 依赖包 npm install stylus stylus-loader --save-dev // 使用 <style lang="stylus" rel="stylesheet/stylus"> stylus书写的语法 可以省略 {} 冒号 分号 继承父& （2-2）v...
vue 源码目录设计简述
m0_52544128的博客
04-25 218
学习vue.js的源码，首先要学习源码目录，vue.js的源码都在src目录下，目录结构如下： src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码 1.compiler compiler目录中主要存放编译相关
前端技术系列（一）Vue项目目录结构
wangchao4732的博客
05-16 2242
这只是一个简单的Vue项目目录结构示例，实际上，随着项目的复杂性增加和使用的工具和库的不同，目录结构可能会有所变化。Vue项目的目录结构通常是由Vue CLI（Vue命令行界面）生成的默认结构，它提供了一个基本的项目框架。通过将模板、脚本和样式集中在一个文件中，Vue文件提供了更高的可维护性和可读性，使得组件的开发更加方便和快速。：这是通过npm安装的第三方依赖库的目录，包含了项目所使用的所有依赖项。：这是存放可复用组件的目录，通常包含一些小型的、独立的Vue组件。
Vue的目录结构
起小点
03-04 1224
Vue.js中的目录结构 目录解析 目录文件 说明 build 内容项目构建(webpack)相关代码 config 配置目录，包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： 1. assets: 放置一些...
分析vue的目录和项目代码
ywj5200的专栏
04-04 412
前面一节我们讲了vue的项目搭建过程，这一节我们就来细说一下项目里面的文件。先大概说一下，后面有时间再详细说。 1.首先看主页面入口index.html页面： 我们可以看到，入口页面基本没有什么，就定义了一个div标签，绑定了一个id,用来设置作用域。 2.文件：HelloWorld.vue 这个文件也没什么可以说的，一个template的展示模板，一个script引入组件，还...
vue 文件目录结构详解
11-26
7. **src** - 源码目录，所有与应用相关的代码都放在这里： - `main.js` - 入口JS文件，用于初始化Vue实例和应用配置。 - `app.vue` - 根组件，整个应用的起点。 - `components` - 公共组件目录，存放可复用的Vue...
Vue2全部代码 Vue2案例代码 Vue2教程代码.rar
11-23
- **教程代码**：分步骤的代码实现，帮助你跟随教程逐步学习Vue2的基础到高级特性。 - **项目结构**：可能包含一个完整的Vue2项目结构，让你了解如何组织和管理Vue2项目。 - **配置文件**：如`.babelrc`、`vue....
基于vue的个人博客源代码
04-13
在"my_blog"这个项目中，我们可以预见到一些基本的Vue项目结构，包括`src`目录下的`components`（组件）、`views`（视图）、`router`（路由配置）、`store`（状态管理）等。每个文件夹都对应着Vue项目中的特定功能...
vue 脚手架目录
u014196765的博客
09-13 649
目录结构 这里捎带 脚手架的目录介绍，如果已经了解，轻飘过 一级目录 build: webpack 配置相关的目录，webpack 配置文件，已经配置好，如果想研究 webpack 可以基于这个进行研究 config: webpack 配置相关的目录 node_modules: npm install 安装的依赖代码库，这个不能动里面的代码，是根据 package.json 下载的...
hualinux 进阶 vue 5.4：用Element实现增删改查（五）vue实现代码
hualinux（阿华的linux）
04-18 330
目录 一、运行环境 1.1 安装vue router及axios 1.2 安装及引入element 二、elemnet实现增删除改查代码 三、运行效果 后端写了，现在写前端使用vue+vue router+element实现代码。 在《hualinux 进阶 vue 5.1：用Element实现增删改查（一）需求及分析》已经做了分析了，在这里我就不再讲了，直接上代码。 一、运行环境 1.1 安装vue router及axios 前端element实现代码，这个是基于《hualinu.
vue项目目录结构详解
最新发布
qq_20382175的博客
03-21 846
前后端分离后，开发前需要和后端同学定义好接口信息（请求地址，参数，返回信息等），前端通过 mock 的方式，即可开始编码，无需等待后端接口 ready。可以为每个组件编写单元测试，放在 test/unit/specs 目录下面, 单元测试用例的目录结构建议和测试的文件保持一致（相对于src），每个测试用例文件名以 .spec.js结尾。这样，如果 mock 目录下有定义了接口 /api/hello ，将会转发到 ​ ​http://172.16.36.90/:8083/api/hello​。
Vue项目的详细目录结构解析 vue-cli
weixin_49827467的博客
02-15 1858
vue-cli 目录详解
ruoyi-vue版本框架（二）源码目录结构的讲解，与底层子项目的讲解
一天不写代码难受的博客
01-17 2688
ruoyi
vue中目录详解
weixin_64315174的博客
03-02 2912
vue中目录详解
vue项目结构目录介绍
LEP2969171141的博客
03-02 7396
vue项目介绍
vue-cli 项目结构目录简介
热门推荐
chao2458的博客
07-30 1万+
上一篇文章介绍了怎样使用vue-cli搭建一个项目 ，那么这篇来大致的介绍一下整个项目的目录。 首先来看一下整个结构目录   接下来从上到下的看一下每个文件以及文件是干嘛的    build 文件夹 及 子目录 这里面是一些webpack的配置，主要用于项目打包时的一些设置。这里不去更详细的深入，相关的文件及配置会在后面用到时在详细的介绍。 config 文件 及 子目录...
VUE代码代码目录结构
徐赤赤的博客
11-16 1456
目录解析 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录，包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文...
Vue基础：模板语法与代码片段生成
在"02_Vue基础–模板语法"这一部分，Vue的核心知识点主要集中在以下几个方面： 1. **模板语法**: Vue采用的是声明式编程思想，模板语法是其核心。它允许开发者在HTML模板中以直观的方式表达组件的状态与行为。最...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值