astro学习笔记
封瑞
---
// 在 (`---`) 范围之内的 JS 或 TS 代码只在服务器上运行!
// 这里插入一个话题 组件导入的一个问题 什么意思呢 如果我们把TestOne的引入代码
// 放到逻辑代码如console.log('代码更新')下面 会报错说未发现TestOne定义
import TestOne from './../components/TestOne.astro'
import TestTwo from './../components/TestTwo.astro'
import TestThree from './../components/TestThree.astro'
import TestFour from './../components/TestFour.astro'
// 引入图片资源的另外一钟方式 常规为 img标签加直接src 其实区别不大 只是将链接先引入 避免一些路径问题
import mySrc from './../../public/images/one.png'
// 数据获取 fetch
const res = await fetch('https://www.fastmock.site/mock/accdb6b2986294c13443aed4119f0055/api/menu/list');
const data = await res.json();
console.log(data);
console.log('代码更新')
const title = "我的第一个axtro项目"
const items = ['d','m','h','s','q']
const attrName = "dmhsq a"
const firstName = 'dmhsq'
---
<html>
<meta charset="UTF-8" />
<body>
<img src={mySrc} />
<h1 data-name={attrName}>{title}</h1>
<ul>
{items.map((item)=>(
<li>{item}</li>
))}
</ul>
<TestOne name={firstName} />
<TestTwo>
<!-- 组件使用父亲的属性 -->
<TestOne name={firstName} />
</TestTwo>
<TestThree>
<h1 slot="title">震惊，热水竟然能喝</h1>
<!-- 可以看的这里没有插槽一样被插入 其实是第二个插槽的作用 -->
<!-- 你可以尝试去掉那个未定义名称的插槽 下面无绑定插槽的都i将消失
你会发现 下面的h4标签 其实在 TestFour 后 p前 而不是末尾
这也认证了 插入了插槽 -->
<h3>---来自某网站</h3>
<TestFour>
</TestFour>
<p slot="content">近日一名男性发现热水竟然能喝！</p>
<p slot="tranform">what fuck! hot water can be drinked wc!</p>
<h4>ss</h4>
</TestThree>
</body>
</html>
<style lang='css||scss'>
body{
h1{
color:orange;
}
}
</style>
<script>
// 在在此输入的JS代码完全在浏览器上运行。
console.log('See me in the devTools')
</script>
类似资料：