idea中新建和写一个简单的vue项目

本文介绍了如何使用IDA创建Vue.js项目,重点讲解了项目目录结构,特别是src文件夹内的assets、components及App.vue文件的作用。同时,文章详细阐述了Vue的模板语法,包括在template、script和style标签中的内容,以及data对象的定义和在div中展示数据的方法。此外,还提及了在script中添加方法的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、使用ida创建一个vue项目(默认node.js环境已配好,idea已加vue.js插件)
(1)新建项目
在这里插入图片描述
(2)观察项目目录结构
在这里插入图片描述
node_modules文件夹(用于存放配置文件)和public文件夹不用管,开发中只涉及src文件夹。src文件夹中assets文件夹用于存放图片文件,components文件夹用于存放自定义插件。App.vue文件为用户在前端看到的内容。.js文件一般是配置文件。package.json是webpack在用,webpack的功能类似于maven,用于管理文件结构。

二、模板语法
在这里插入图片描述
.vue文件中,template标签(之前的文章一直把标签叫做标记,这里改过来)写的是html标签语法。script标签内写JS代码。style标签内专门写样式。

(1)定义vue里的数据,记住下列格式:
在这里插入图片描述
注:函数data()可以理解为简写形式,非简写为:
data:function(){return {}}
(2)在div中添加内容
在这里插入图片描述
运行结果如下:
在这里插入图片描述
另一种数据表示形式:
在这里插入图片描述
(3)在script标记中的数据中加方法的位置
在这里插入图片描述
注:函数里也可以包含参数。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值