vue3基本知识学习

v-model、v-if/v-else、v-for、@(v-on):、:(v-bind:)

点击查看代码

<template>
  <div>
    <div style="margin-bottom: 20px">
      vivy
    </div>

    <!--  渲染数据  -->
    <!--  {{}}绑定值  -->
    <div style="margin-bottom: 20px">
      {{ a }} {{ b }}
    </div>
    <div style="margin-bottom: 20px">
      {{ data.a }}
      {{ data.b }}
      {{ data }}
    </div>

    <!--  v-model实现数据双向绑定  -->
    <div style="margin-bottom: 20px">
      <input v-model="data.a" />
    </div>

    <!--  v-if/v-else选择  -->
    <div style="margin-bottom: 20px">
      <span style="color: red" v-if="data.name === '佩奇'">小猪佩奇</span>
      <span style="color: blue" v-if="data.name === '乔治'">小猪乔治</span>
      <span style="color: hotpink" v-else>小猪朵朵</span>
    </div>

    <!--  v-for循环  -->
    <div style="display: flex; margin-bottom: 20px">
      <div @click="show(item)"  v-for="item in data.arr" style="width: 300px; height: 300px; text-align: center; line-height: 300px; font-size: 30px; margin-right: 10px; background-color: green">{{ item }}</div>
    </div>
    <!--  v-for用于下拉表  -->
    <div>
      <select style="width: 200px">
        <option v-for="item in data.hobby">{{ item }}</option>
      </select>
    </div>

    <!--  @(v-on): 绑定事件  -->
    <!--  @click  点击事件  -->
    <div style="width: 200px">
      <button @click="click">赛博木鱼</button>
    </div>

    <!--  :(v-bind:) 动态绑定属性  -->
    <div>
      <div :style="data.box"></div>
      <div>
        <img :src="data.img" alt="">
      </div>
    </div>


  </div>
</template>

<!--  setup是必备属性，使用vue3语法特性  -->
<script setup>
//导包
//onMounted 在页面元素完全加载完成后触发
import {reactive, ref,onMounted} from "vue";

// 定义数据
const a = ref(1)
const b = ref("vivy")

const data = reactive({
  a: 123,
  b: "vivy",
  c: 123321,
  d: false,
  name: '乔治',
  arr: [7,8,9],
  hobby: ['唱','跳','rap','篮球'],
  box:{
    width: '100px',
    height: '100px',
    backgroundColor: 'yellow'
  },
  img: 'https://www.runoob.com/wp-content/uploads/2017/01/vue.png'
})

// 函数
onMounted(() => {
  console.log('页面加载完成')
})
const show = (value) =>{
  alert(value)
}
const click = () => {
  alert("+1")
}
</script>