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.9</span>
      <span v-else-if="level>1 && level<=4">19.9</span>
      <span v-else>29.9</span>
      <br/>
      <span v-show="level<=1">9.9</span>
      <span v-show="level>1 && level<=4">19.9</span>
      <span v-show="level>5">29.9</span>
    </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: 'ww@qq.com'
})
</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>
  1. 在其他组件中使用
<template>
  <main>
    <div class="wrapper">
      <HelloWorld msg="your msg" />
    </div>
  </main>

7、钩子函数

钩子函数官网教程

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

const user = ref({
  cellphone: '12233',
  email: 'ww@qq.com'
})
onMounted(()=>{
  console.log("mounted")
  console.log(user.value.email)
})
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值