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

2022-07-19 10:08:45

一、使用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标记中的数据中加方法的位置
在这里插入图片描述
注:函数里也可以包含参数。

  • 作者:微扬嘴角
  • 原文链接:https://blog.csdn.net/qq_51476492/article/details/123606015
    更新时间:2022-07-19 10:08:45