当前位置: 首页 > 工具软件 > Astro > 使用案例 >

astro学习笔记

封瑞
2023-12-01
---
// 在 (`---`) 范围之内的 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>
 类似资料: