模板语法基础 #

<script>
  let name = 'Svelte';
  let count = 42;
</script>

<p>Hello {name}!</p>
<p>Count: {count}</p>

<script>
  let a = 10;
  let b = 20;
  let items = ['a', 'b', 'c'];
  let user = { name: 'Alice', age: 25 };
</script>

<p>Sum: {a + b}</p>
<p>Product: {a * b}</p>
<p>Items: {items.length}</p>
<p>User: {user.name}, Age: {user.age}</p>
<p>Method: {name.toUpperCase()}</p>
<p>Ternary: {a > b ? 'a大' : 'b大'}</p>

<script>
  let htmlContent = '<strong>加粗文本</strong>';
  let markdown = '<a href="#">链接</a>';
</script>

<p>普通文本: {htmlContent}</p>
<p>HTML内容: {@html htmlContent}</p>

{@html markdown}

<script>
  let src = 'https://example.com/image.jpg';
  let alt = 'Example Image';
  let href = 'https://example.com';
</script>

<img {src} {alt} />
<a {href}>Link</a>

<button disabled>Disabled Button</button>
<input type="text" placeholder="Enter text" />

<script>
  let src = 'https://example.com/image.jpg';
  let disabled = true;
  let className = 'active';
</script>

<img src={src} alt="Dynamic Image" />
<button disabled={disabled}>Disabled</button>
<div class={className}>Dynamic Class</div>

<script>
  let attrs = {
    id: 'my-input',
    class: 'form-control',
    placeholder: 'Enter text',
    disabled: false
  };
</script>

<input {...attrs} />

<script>
  let color = 'red';
  let fontSize = 16;
  let isActive = true;
</script>

<p style="color: {color}; font-size: {fontSize}px;">
  Inline Style
</p>

<p style:color={color} style:font-size="{fontSize}px">
  Style Directive
</p>

<p style:background-color={isActive ? 'green' : 'gray'}>
  Conditional Style
</p>

<script>
  let isActive = true;
  let isDisabled = false;
  let theme = 'dark';
  let size = 'large';
</script>

<button class:active={isActive} class:disabled={isDisabled}>
  Toggle Button
</button>

<div class="box {theme}" class:highlight={isActive}>
  Mixed Classes
</div>

<div class="btn" class="btn-{size}" class:btn-active={isActive}>
  Button
</div>

<script>
  let text = '';
  let number = 0;
  let email = '';
</script>

<input type="text" bind:value={text} placeholder="Text" />
<input type="number" bind:value={number} />
<input type="email" bind:value={email} />

<p>Text: {text}</p>
<p>Number: {number}</p>
<p>Email: {email}</p>

<script>
  let checked = false;
  let hobbies = [];
</script>

<label>
  <input type="checkbox" bind:checked={checked} />
  Agree to terms
</label>

<fieldset>
  <legend>Hobbies</legend>
  <label>
    <input type="checkbox" value="reading" bind:group={hobbies} />
    Reading
  </label>
  <label>
    <input type="checkbox" value="gaming" bind:group={hobbies} />
    Gaming
  </label>
  <label>
    <input type="checkbox" value="sports" bind:group={hobbies} />
    Sports
  </label>
</fieldset>

<p>Checked: {checked}</p>
<p>Hobbies: {hobbies.join(', ')}</p>

<script>
  let selected = '';
  let size = 'medium';
</script>

<fieldset>
  <legend>Choose Size</legend>
  <label>
    <input type="radio" value="small" bind:group={size} />
    Small
  </label>
  <label>
    <input type="radio" value="medium" bind:group={size} />
    Medium
  </label>
  <label>
    <input type="radio" value="large" bind:group={size} />
    Large
  </label>
</fieldset>

<p>Selected: {size}</p>

<script>
  let selected = '';
  let selectedMultiple = [];
  let options = ['Apple', 'Banana', 'Orange', 'Grape'];
</script>

<select bind:value={selected}>
  <option value="">Select a fruit</option>
  {#each options as option}
    <option value={option}>{option}</option>
  {/each}
</select>

<select multiple bind:value={selectedMultiple}>
  {#each options as option}
    <option value={option}>{option}</option>
  {/each}
</select>

<p>Selected: {selected}</p>
<p>Multiple: {selectedMultiple.join(', ')}</p>

<script>
  let content = '';
</script>

<textarea bind:value={content} placeholder="Enter your message"></textarea>

<p>Characters: {content.length}</p>
<pre>{content}</pre>

<script>
  let html = '<p>Edit this text</p>';
</script>

<div bind:innerHTML={html} contenteditable="true"></div>

<pre>{html}</pre>

<script>
  let inputRef;
  let canvasRef;
  
  function focusInput() {
    inputRef.focus();
  }
  
  function drawOnCanvas() {
    const ctx = canvasRef.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
  }
</script>

<input bind:this={inputRef} placeholder="Click button to focus" />
<button onclick={focusInput}>Focus Input</button>

<canvas bind:this={canvasRef} width="200" height="200"></canvas>
<button onclick={drawOnCanvas}>Draw</button>

<script>
  import Modal from './Modal.svelte';
  
  let modalRef;
  
  function openModal() {
    modalRef.open();
  }
</script>

<button onclick={openModal}>Open Modal</button>
<Modal bind:this={modalRef} />

<script>
  let audioRef;
  let currentTime = 0;
  let duration = 0;
  let paused = true;
  let volume = 1;
</script>

<audio 
  bind:this={audioRef}
  bind:currentTime
  bind:duration
  bind:paused
  bind:volume
  src="audio.mp3"
/>

<p>Current: {currentTime.toFixed(2)}s</p>
<p>Duration: {duration.toFixed(2)}s</p>
<p>Status: {paused ? 'Paused' : 'Playing'}</p>
<p>Volume: {(volume * 100).toFixed(0)}%</p>

<button onclick={() => audioRef.play()}>Play</button>
<button onclick={() => audioRef.pause()}>Pause</button>

<script>
  let videoWidth = 0;
  let videoHeight = 0;
</script>

<video 
  bind:videoWidth 
  bind:videoHeight 
  src="video.mp4"
/>

<p>Size: {videoWidth}x{videoHeight}</p>

<script>
  let clientWidth = 0;
  let clientHeight = 0;
  let offsetWidth = 0;
  let offsetHeight = 0;
</script>

<div 
  bind:clientWidth
  bind:clientHeight
  bind:offsetWidth
  bind:offsetHeight
  class="box"
>
  Resize me
</div>

<p>Client: {clientWidth}x{clientHeight}</p>
<p>Offset: {offsetWidth}x{offsetHeight}</p>

<style>
  .box {
    resize: both;
    overflow: auto;
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
  }
</style>

<script>
  let innerWidth = 0;
  let innerHeight = 0;
  let outerWidth = 0;
  let outerHeight = 0;
  let scrollX = 0;
  let scrollY = 0;
</script>

<svelte:window 
  bind:innerWidth
  bind:innerHeight
  bind:outerWidth
  bind:outerHeight
  bind:scrollX
  bind:scrollY
/>

<p>Inner: {innerWidth}x{innerHeight}</p>
<p>Outer: {outerWidth}x{outerHeight}</p>
<p>Scroll: ({scrollX}, {scrollY})</p>

<script>
  function handleSubmit() {
    console.log('Form submitted');
  }
  
  function handleClick() {
    console.log('Button clicked');
  }
</script>

<form onsubmit|preventDefault={handleSubmit}>
  <button type="submit">Submit</button>
</form>

<button onclick|once={handleClick}>
  Click once
</button>

<div onclick={() => console.log('div')}>
  <button onclick|stopPropagation={() => console.log('button')}>
    Click me
  </button>
</div>

<button onclick|preventDefault|stopPropagation|once={handleClick}>
  Multiple Modifiers
</button>

<script>
  let form = $state({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    gender: '',
    hobbies: [],
    country: '',
    bio: '',
    agree: false
  });
  
  let errors = $state({});
  
  let passwordStrength = $derived(() => {
    const pwd = form.password;
    if (!pwd) return '';
    if (pwd.length < 6) return 'weak';
    if (pwd.length < 10) return 'medium';
    return 'strong';
  });
  
  function validate() {
    const newErrors = {};
    
    if (!form.username) newErrors.username = '用户名必填';
    if (!form.email) newErrors.email = '邮箱必填';
    if (!form.password) newErrors.password = '密码必填';
    if (form.password !== form.confirmPassword) {
      newErrors.confirmPassword = '密码不匹配';
    }
    if (!form.agree) newErrors.agree = '必须同意条款';
    
    errors = newErrors;
    return Object.keys(newErrors).length === 0;
  }
  
  function handleSubmit(e) {
    if (validate()) {
      console.log('Form submitted:', form);
    }
  }
</script>

<form onsubmit|preventDefault={handleSubmit}>
  <div>
    <label>Username</label>
    <input type="text" bind:value={form.username} />
    {#if errors.username}
      <span class="error">{errors.username}</span>
    {/if}
  </div>
  
  <div>
    <label>Email</label>
    <input type="email" bind:value={form.email} />
    {#if errors.email}
      <span class="error">{errors.email}</span>
    {/if}
  </div>
  
  <div>
    <label>Password</label>
    <input type="password" bind:value={form.password} />
    <span class="strength {passwordStrength()}">
      {passwordStrength()}
    </span>
    {#if errors.password}
      <span class="error">{errors.password}</span>
    {/if}
  </div>
  
  <div>
    <label>Confirm Password</label>
    <input type="password" bind:value={form.confirmPassword} />
    {#if errors.confirmPassword}
      <span class="error">{errors.confirmPassword}</span>
    {/if}
  </div>
  
  <fieldset>
    <legend>Gender</legend>
    <label>
      <input type="radio" value="male" bind:group={form.gender} />
      Male
    </label>
    <label>
      <input type="radio" value="female" bind:group={form.gender} />
      Female
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Hobbies</legend>
    <label>
      <input type="checkbox" value="reading" bind:group={form.hobbies} />
      Reading
    </label>
    <label>
      <input type="checkbox" value="gaming" bind:group={form.hobbies} />
      Gaming
    </label>
    <label>
      <input type="checkbox" value="sports" bind:group={form.hobbies} />
      Sports
    </label>
  </fieldset>
  
  <div>
    <label>Country</label>
    <select bind:value={form.country}>
      <option value="">Select</option>
      <option value="cn">China</option>
      <option value="us">USA</option>
      <option value="uk">UK</option>
    </select>
  </div>
  
  <div>
    <label>Bio</label>
    <textarea bind:value={form.bio}></textarea>
  </div>
  
  <div>
    <label>
      <input type="checkbox" bind:checked={form.agree} />
      I agree to the terms
    </label>
    {#if errors.agree}
      <span class="error">{errors.agree}</span>
    {/if}
  </div>
  
  <button type="submit">Register</button>
</form>

<style>
  form {
    max-width: 400px;
    margin: 0 auto;
  }
  
  div {
    margin-bottom: 1rem;
  }
  
  label {
    display: block;
    margin-bottom: 0.25rem;
  }
  
  input, select, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .error {
    color: red;
    font-size: 0.8rem;
  }
  
  .strength {
    font-size: 0.8rem;
    margin-left: 0.5rem;
  }
  
  .strength.weak { color: red; }
  .strength.medium { color: orange; }
  .strength.strong { color: green; }
</style>