网站平台推广方法,企业管理培训课程机构,珠海网站建设培训学校,四川鼎能建设集团网站#x1f497;#x1f497;#x1f497;欢迎来到我的博客#xff0c;你将找到有关如何使用技术解决问题的文章#xff0c;也会找到某个技术的学习路线。无论你是何种职业#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章#xff0c;也欢… 欢迎来到我的博客你将找到有关如何使用技术解决问题的文章也会找到某个技术的学习路线。无论你是何种职业我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临让我们一起踏上这个知识之旅 文章目录 文件结构小案例总结 文件结构
├── public/ # 公共资源目录
│ ├── index.html # 入口 HTML 文件
│ └── ...
├── src/ # 项目源码目录
│ ├── assets/ # 静态资源目录图片、样式等
│ ├── components/ # 组件目录
│ ├── router/ # 路由配置目录
│ ├── store/ # Vuex 状态管理目录
│ ├── utils/ # 工具函数目录
│ ├── views/ # 视图目录
│ ├── App.vue # 根组件
│ └── main.js # 入口 JS 文件
├── .gitignore # Git 忽略配置文件
├── babel.config.js # Babel 配置文件
├── package.json # 项目配置文件
└── README.md # 项目说明文件当然还有别的文件如下这个文件主要是提醒用户安装VSCode的两个插件
这里在介绍一下Vue文件的大致结构
templatehtml/template结构
scriptJS或TS/script交互
style样式/style衣服下面介绍一下main.js的大概内容
下面是为大家准备的代码片段方便后续书写不知道如何在VSCode添加代码片段的欢迎阅读Visual studio Code 配置用户代码片段—Vue为例
template/template
script langts
export default {name :
}
/script
style scoped/style小案例
这里我有必要说一下App.vue是一个根组件而components里面的文件相当于是叶子我们现在想在components里面创建一个person.vue最终和App.vue相关联 我们首先在template里面写一小段html div classpersonh2姓名{{ name }}/h2h2年龄{{ age }}/h2button clickshowName显示姓名/buttonbutton clickchangeAge修改年龄/button/div接下来在script里面定义组件的行为和数据 注意Vue3向下兼容Vue2语法且Vue3中的模版可以没有根标签
export default {name : person,data(){return{name:馒头,age:22}},methods:{showName(){alert(this.name)},changeAge(){this.age1}}
}最后简单写一点样式
style scoped
.person {background-color: #f0f0f0;border: 1px solid #ccc;border-radius: 5px;padding: 20px;display: inline-block;margin: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);transition: box-shadow 0.3s;
}
.person:hover {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button {margin: 0 5px;padding: 5px 10px;border: none;border-radius: 3px;background-color: #007bff;color: #fff;cursor: pointer;transition: background-color 0.3s;
}
button:hover {background-color: #0056b3;
}
/style接下来我们运行一下
最终的界面如下 细心的人会发现这个你好是哪里来的~接下来我们看看 回到App.vue也就是根组件你好就是在这里写的同时这里我们将组件person加进去了否则是不会出现刚刚在person组件里面写的内容
templatediv classapph1你好/h1person/person/div
/template
script langtsimport person from ./components/person.vueexport default {name : App, //组件名components:{person} //注册组件
}
/script
style scoped.app {background-color: aqua;}
/style总结 index.html是项目入口文件App.vue是根组件等一下概念Vue2,3的包含关系以及一个小案例 挑战与创造都是很痛苦的但是很充实。
