Vue3 第一章 基础语法使用

官方示例

1、 v-for

• 官方文档：v-for教程
• v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名

<script setup>
import {ref} from "vue";
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
script>

<template>
  <header>

  header>
  <main>
    <div class="wrapper">
      <li v-for="item in items">
        {{ item.message }}
      li>
    div>
  main>
template>

2、 v-bind

• 动态的绑定一个或多个 attribute，也可以是组件的 prop。
• 当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。

<script setup>
import {ref} from "vue";

const url=ref("https://www.baidu.com")
script>

<template>
  <header>

  header>
  <main>
    <div class="wrapper">
      <a :href="url">跳转到目标页面a>
    div>
  main>
template>

3、 v-if 和 v-show

• 基于表达式值的真假性，来条件性地渲染元素或者模板片段。
• 频繁控制是否显示用 v-show
• v-show 通过class样式来控制是否显示
• v-if 不满足条件不渲染元素

<script setup>
import {ref} from "vue";
const level=ref(32)
script>

<template>
  <header>
  header>
  <main>
    <div class="wrapper">
      <span v-if="level<=1">9.9span>
      <span v-else-if="level>1 && level<=4">19.9span>
      <span v-else>29.9span>
      <br/>
      <span v-show="level<=1">9.9span>
      <span v-show="level>1 && level<=4">19.9span>
      <span v-show="level>5">29.9span>
    div>
  main>
template>

4、 v-on

• 给元素绑定事件监听器。
• 缩写：@

<script setup>
import {ref} from "vue";
function open(text){
  alert("显示-"+text)
}
script>

<template>
  <header>

  header>
  <main>
    <div class="wrapper">
      <button @click="open('哈哈')">点击显示button>
    div>
  main>
template>

5、 v-model

• 在表单输入元素或组件上创建双向绑定。
• 根据表单输入元素或组件输出的值而变化

<script setup>
import {ref} from "vue";

const name = ref('')
const age = ref('')
const user = ref({
  cellphone: '12233',
  email: '[email protected]'
})
script>

<template>
  <header>

  header>
  <main>
    <div class="wrapper">
      名称： <input v-model="name"> <span>{{ name }}span> <br/>
      年龄： <input v-model="age"> <span>{{ age }}span><br/>
      手机号：<input v-model="user.cellphone"> <span>{{user.cellphone}}span><br/>
      邮箱：<input v-model="user.email"> <span>{{user.email}}span>
    div>
  main>
template>

6、 页面传值

1.新建一个 组件 helloword 获取使用者传来的值

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
script>

2. 在其他组件中使用

<template>
  <main>
    <div class="wrapper">
      <HelloWorld msg="your msg" />
    div>
  main>

7、钩子函数

钩子函数官网教程

<script setup>
import { onMounted } from 'vue'

const user = ref({
  cellphone: '12233',
  email: '[email protected]'
})
onMounted(()=>{
  console.log("mounted")
  console.log(user.value.email)
})
script>