当前位置：网站首页>Astro learning notes

Astro learning notes

2022-07-02 13:30:00 【Code husky】

---
//  stay  (`---`)  Within the scope of  JS  or  TS  The code only runs on the server !
//  Insert a topic here   A problem of component import   What does that mean   If we put TestOne The introduction code of 
//  Put it into the logic code, such as console.log(' Code update ') below   It will report an error that it was not found TestOne Definition 
import TestOne from './../components/TestOne.astro'
import TestTwo from './../components/TestTwo.astro'
import TestThree from './../components/TestThree.astro'
import TestFour from './../components/TestFour.astro'

//  Another way to introduce picture resources   The routine is  img Label plus direct src  It's not much different   Just introduce the link first   Avoid some path problems 
import mySrc from './../../public/images/one.png'

//  Data acquisition  fetch
const res = await fetch('https://www.fastmock.site/mock/accdb6b2986294c13443aed4119f0055/api/menu/list');
const data = await res.json();
console.log(data);


console.log(' Code update ')
const title = " My first one axtro project "
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>
      <!--  The component uses the parent property  -->
      <TestOne name={firstName} />
    </TestTwo>
    <TestThree>
      <h1 slot="title"> shock , Hot water can be drunk </h1>
      <!--  As you can see, there is no slot inserted here   In fact, it is the function of the second slot  -->
      <!--  You can try to remove the slot with undefined name   There are no bound slots below i Will disappear   You'll find that   Below h4 label   Actually in  TestFour  after  p front   Not the end   This is also certified   Inserted slot  -->
      <h3>--- From a website </h3>
      <TestFour>
      </TestFour>
      <p slot="content"> Recently, a man found that hot water can be drunk ！</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> //  Enter here JS The code runs entirely on the browser . console.log('See me in the devTools') </script>

原网站

版权声明
本文为[Code husky]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202151544093710.html

当前位置：网站首页>Astro learning notes

Astro learning notes

边栏推荐

猜你喜欢

随机推荐