Vue项目学习(项目的开发流程)(2)

1、vue项目的默认首页和入口文件


2、两种书写的方式是表达一样的意思------>el:指定当前Vue实例挂载到哪个区域里


3、如果属性值和属性名一致,冒号和后面可以省略不写

(所以有两种写法)


4、以".vue"文件结尾的文件在项目当中称为组件文件。

其中Vue的组件文件:以.vue结尾,每个组件由三个部分组成: <template> , <script>、<style> 。

  • (模板部分)在<template>中,可以定义原生的html代码。相当于vue的视图部分
  • 在<script>中,这里面定义的js的代码。这里面当中主要定义vue当中的数据模型和方法
  • 在<style>中,定义css样式------>编写css样式代码
    5、b站评论区学到的一个插件(用来书写.vue文件中提示)

插件名:Vuter


6、export------>导出模块,在其它的地方用import关键字导入

(1)<script>

export default {

}

</script>

(2)

<script>

export default {

data(){

return{

//定义一个数据模型

message:"Hello Vue"

}

}

}

</script>
7、定义vue当中的数据模型

  • data()是vue的默认写法

  • js当中的对象是一个"大括号"

  • data:function()这个可以简写成------>data()

  • 若需要定义vue的函数------>写一个methods:{ ... },在这之中定义一个一个方法

8、"<h1>{{message}}</h1>"

(1)使用双大括号 {``{ }} 作为插值表达式的分隔符。例如,{``{ message }} 会被替换为组件中定义的 message 属性的值。

(2)Vue.js :同样使用双大括号 {``{ }},但在Vue 2.x中更推荐使用 v-bind:title="message"(简写为 :title="message")来绑定属性

(3)在HTML模板中,<h1>{{message}}</h1> 这行代码表示的是一个动态内容的标题。这里,{{message}} 是一个占位符,它会被某个框架(如Angular, Vue.js, React等)或模板引擎在运行时替换为实际的数据值。

具体来说,当这个HTML模板被渲染到浏览器上时,{{message}} 会被替换为在相应框架或模板引擎中定义的message变量的值。例如,如果message的值是"Hello, World!",那么渲染后的HTML将会是:<h1>Hello, World!</h1>
9、vscode------>ctrl+shift+y------>呼出控制台------>打开终端
10、package.json 文件是 Node.js 项目的核心文件,它包含了项目的配置信息以及项目所依赖的npm包列表。


11、在进行vue开发,main.js文件很少去修改。首页index.html也同样如此。主要操作的是一些组件文件------>.vue结尾的文件

相关推荐
zhangrelay7 小时前
新版|-|单片机原理与接口技术-2026持续改进优化-从MEGA2560-ESP32与Wokwi到ROS2-Lyrical与具身智能栈
笔记·单片机·嵌入式硬件·学习
叼烟扛炮11 小时前
Linux 学习笔记(三十三):线程互斥——互斥锁(Mutex)与死锁
linux·运维·服务器·笔记·学习·1024程序员节
m4Rk_13 小时前
【论文阅读】Agent 记忆机制(113):Agentic Memory Management——从“检索相关信息”走向“管理 Agent 内部记忆”
论文阅读·人工智能·学习·开源·github
辣知14 小时前
辣知·化智92 《山海经》里的史前密码
学习
鬼手点金14 小时前
KV Cache 未必是一次性的:可编辑、可组合的“笔记”
java·人工智能·笔记·学习·自动化·1024程序员节
kyrie_sakura15 小时前
大模型学习18 大模型学习 - LangChain2_Model I/O
学习·自然语言处理
宝绿特塑业再生科技16 小时前
板材收缩率不稳,户外家具装配尺寸为何对不上:从切割尺寸变化到接缝不一的系统性排查与对策
笔记·科技·学习·生活·户外家具·hdpe再生颗粒·hdpe
FungLeo17 小时前
成为全栈·Go 后端篇·契约一致性与差分测试:两套实现如何互相校验
golang·node.js·go·合约测试·差分测试·成为全栈·api兼容
~城南花已开~17 小时前
Intel E810 SR-IOV VF Spoofcheck 防伪造测试-KVM3
服务器·网络·笔记·学习·ubuntu·etl工程师
我命由我1234519 小时前
6-3.Python 异常处理 - 异常处理进阶(else 块与 finally 块、异常传递、自定义异常)
开发语言·前端·数据库·后端·python·学习·java-ee