vue3.0的基础配置

vue3.0配置项目

1.自己在终端里面create一个vue的项目

vue create 项目名字

2.选择vue3.0的项目 点击回车安装项目。

setup 语法糖的基础

只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

声明数据类型

要声明数据类型的时候一定要引入你要声明的是基本类型的还是复杂数据类型的。

import { ref,reactive } from 'vue'

声明数据的时候如果是基本的数据类型的话就要用ref，如果是复杂数据类型的话就要用reactive。

基本的数据类型

<template>
  <div class="home">
    <!-- 渲染数据的话跟之前vue2.0一样之接装花括号包一下 -->
    {{msg}}
  </div>
</template>


<script setup> // 在这直接写setup就不用export抛出
import { ref,reactive } from 'vue'
const msg = ref('我是一个基本数据类型')
</script>

<style lang="less" scoped>

</style>

复杂数据类型渲染数据

<template>
  <div class="home">
    <!-- 渲染数据的话跟之前vue2.0一样之接装花括号包一下 -->
    {{msg}}
    <!-- 循环数据的话还是跟之前vue2.0一样直接用v-for直接循环渲染数据 -->
    <div v-for="(v,i) in arr.list" :key="i">
      <p>{{v}}</p>
    </div>
  </div>
</template>


<script setup> // 在这直接写setup就不用export抛出
import { ref,reactive } from 'vue'
const msg = ref('我是一个基本数据类型') // 基本数据类型
const arr = reactive({list:[1,2,3,4,5]}) // 复杂数据类型
</script>

<style lang="less" scoped>

</style>

绑定事件或者方法

我们再写事件方法的时候可以直接在script的下面直接写上事件的方法。

<template>
  <div class="home">
    <!-- 渲染数据的话跟之前vue2.0一样之接装花括号包一下 -->
    {{msg}}
    <!-- 循环数据的话还是跟之前vue2.0一样直接用v-for直接循环渲染数据 -->
    <div v-for="(v,i) in arr.list" :key="i">
      <p>{{v}}</p>
    </div>
    <!-- 绑定事件 -->
    <button @click="clickFn">点击</button>
  </div>
</template>


<script setup> // 在这直接写setup就不用export抛出
import { ref,reactive } from 'vue'
const msg = ref('我是一个基本数据类型') // 基本数据类型
const arr = reactive({list:[1,2,3,4,5]}) // 复杂数据类型

// 事件的方法
const clickFn = () =>{
  // 这里面可以写正常的逻辑
  console.log(123)
}

</script>

<style lang="less" scoped>

</style>

父组件向子组件传值

defineProps 用来接收父组件传来的 defineProps就是vue2.0里脸面的props

父组件

<template>
  <div class="home">
    <!-- 渲染数据的话跟之前vue2.0一样之接装花括号包一下 -->
    {{msg}}
    <!-- 循环数据的话还是跟之前vue2.0一样直接用v-for直接循环渲染数据 -->
    <div v-for="(v,i) in arr.list" :key="i">
      <p>{{v}}</p>
    </div>
    <!-- 绑定事件 -->
    <button @click="clickFn">点击</button>

    <!-- 子组件 -->
    <Children @ChildrenVal='title'></Children>
  </div>
</template>


<script setup> // 在这直接写setup就不用export抛出
import { ref,reactive } from 'vue' 
import Children from '@/components/Children.vue' // 子组件
const msg = ref('我是一个基本数据类型') // 基本数据类型
const arr = reactive({list:[1,2,3,4,5]}) // 复杂数据类型

const title = ref('我是父组件传过来的值')

// 事件的方法
const clickFn = () =>{
  // 这里面可以写正常的逻辑
  console.log(123)
}

</script>

<style lang="less" scoped>

</style>

子组件

<template>
  <div>
      <p>我是子组件</p>
      <!-- 父组件传过来的值 -->
      <p>{{props.title}}</p>
</div>
</template>

<script setup>
import { defineProps } from "vue";
// 找到的值
const props = defineProps({ ChildrenVal: String });
console.log(props)
</script>

<style lang="less" scoped>
</style>

子组件向父组件传值

子组件要用defineEmits传给父组件，父组件用他的第一个参数名作为事件名。

子组件

<template>
  <div>
      <p>我是子组件</p>
      <!-- 父组件传过来的值 -->
      <p>{{props.title}}</p>
      <!-- 点击传值 -->
      <button @click="clickFn">点击</button>
</div>
</template>

<script setup>
import { defineProps,defineEmits } from "vue";
const props = defineProps({ ChildrenVal: String });
const emit = definedEmits(['getSomething'])
// 点击事件
const clickFn = (something) =>{
 emit('getSomething',something)
}
</script>

<style lang="less" scoped>
</style>

父组件

<template>
  <div class="home">
    <!-- 渲染数据的话跟之前vue2.0一样之接装花括号包一下 -->
    {{msg}}
    <!-- 循环数据的话还是跟之前vue2.0一样直接用v-for直接循环渲染数据 -->
    <div v-for="(v,i) in arr.list" :key="i">
      <p>{{v}}</p>
    </div>
    <!-- 绑定事件 -->
    <button @click="clickFn">点击</button>

    <!-- 子组件 -->
    <Children @ChildrenVal='title' @getSomething='someFn'></Children>
  </div>
</template>


<script setup> // 在这直接写setup就不用export抛出
import { ref,reactive } from 'vue' 
import Children from '@/components/Children.vue' // 子组件
const msg = ref('我是一个基本数据类型') // 基本数据类型
const arr = reactive({list:[1,2,3,4,5]}) // 复杂数据类型

const title = ref('我是父组件传过来的值')

// 事件的方法
const clickFn = () =>{
  // 这里面可以写正常的逻辑
  console.log(123)
}

// 拿到从子级传过来的值
const someFn = (val) =>{
  console.log(val)
}

</script>

<style lang="less" scoped>

</style>