首页 > 其他分享 >Vue — Vue3.0快速掌握

Vue — Vue3.0快速掌握

时间：2024-03-17 20:11:06浏览次数：25  
标签：count Vue const 掌握 vue Vue3.0 组件 import ref

一.使用create-vue创建项目

1.环境条件

node版本在16.0以上

2.创建vue3.0应用

npm init vue@latest  //创建
npm install //下载依赖

3.项目目录和关键文件

1.vite.config.js ：项目的配置文件 基于vite的配置

2.package.接送：项目包文件 核心依赖变成了Vue3.X和vite

3.main.js：入口文件 createAPP函数创建应用实例

4.app.vue：根组件 SFC单文件组件 script+template+style

  • 变化一：script和template顺序调整
  • 变化二：template不再要求唯一根元素
  • 变化三：script添加setup表示支持组合式API

5.index.html：单页入口 提供id为app的挂载

二.组合式API

1.setup选项的写法和执行时机

  • 写法：
<script>
export default {
  setup(){
    console.log('setup')
  },


}
</script>
  • 执行时机：setup 函数在组件实例初始化时执行，但是在 beforeCreate 钩子之前执行。这意味着在 setup 函数内部无法直接访问 this，也就是说在 setup 阶段不依赖于组件实例。这样的设计有利于更好地组织和重用组件逻辑。

2.setup中写代码的特点

<script>
export default {
  setup(){
    console.log('setup')
    //setup
    //1.执行时机，比beforeCreate执行更早
    //2.setup里面没有this
    //3.数据和函数需要在setup函数中最后return 才能在模板中使用
    const msg = 'learning'
    const readMsg = ()=>{
      console.log(msg)
    }

    return {
      msg,readMsg
    }
  },
  beforeCreate(){
    console.log('beforeCreate')
  }

}
</script>

3.<script setup>语法糖

<script setup>

    const msg = 'learning'
    const readMsg = ()=>{
      console.log(msg)
    }


</script>

三、组合式API — reactive & ref

1.reactive

（1）作用：接受对象类型数据的参数传入biang返回一个响应式对象

（2）使用

<script setup>
    //reactive：接受对象类型数据的参数传入biang返回一个响应式对象

    import { reactive } from "vue";

    const state = reactive({
      count : 100
    })
    const setCount = () =>{
      state.count ++
    }
</script>

<template>


<div>
{{ state.count }} <button @click="setCount">+1</button>

</div>
</template>

2.ref

1.作用：接收简单类型或者独享类型数据传入并返回一个响应式对象

2.使用

<script setup>
    //ref：接收简单类型或者独享类型数据传入并返回一个响应式对象
    //原理：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型 在借助reactive实现响应式
    //script访问数据需要通过.value的方式获取 template中不需要
    import { ref } from "vue";
    const count = ref(0)
    console.log(count.value)

    const setCount = ()=>{
      count.value++
    }   
</script>

<template>


<div>

  {{ count }}
  <button @click="setCount">+1</button>
</div>
</template>

四.组合式API — computed

1.导入computed

import { computed ,ref} from 'vue'

2.执行函数 在回调参数中return基于响应式数据做计算的值，用变量接收

<script setup>

import { computed ,ref} from 'vue'
//计算属性 
const list = ref([1, 2, 3, 4, 5, 6]) //ref无论是任何数据都会返回一个响应式数据 

const computedList = computed(()=>{

  return list.value.filter(item=>item>2)
})
const add = ()=>{
  list.value.push(888)
}
</script>
<template>

  <div>
      原数据{{ list }}
  </div>
  <div>

    计算后的数据{{ computedList }}
  </div>
  <div>

    <button @click="add">add</button>
  </div>
</template>

3.计算属性中不应该有“副作用”

比如异步请求、修改dom

4.避免直接修改计算属性的值

计算属性应该是只读的，特殊情况可以配置get set

五.组合式API — watch

1.作用：监听一个或者多个数据的变化，数据变化时执行回调函数；有两个参数：immediate（立即执行）deep（深度监听）。

2.监听单个数据

（1）导入watch函数

（2）执行watch函数传入要监听的响应式数据（ref对象）和回调函数

 

<script setup>

import { watch ,ref} from 'vue'

const count = ref(0)
const name = ref('张三')
const add = ()=>{
  count.value++
}
const change = ()=>{
  name.value = '李四'
}

//监听单个数据
watch(ref对象，(newValue,oldValue)=>{})
 watch(count,(newvalue,old)=>{
   console.log(newvalue,old)
 })


</script>

 

3.监听多个数据的变化

不管哪个数据变化都会触发回调

 

<script setup>

import { watch ,ref} from 'vue'

const count = ref(0)
const name = ref('张三')
const add = ()=>{
  count.value++
}
const change = ()=>{
  name.value = '李四'
}

//监听多个数据
//watch([ref1,ref2...]，(newArrr,oldArr)=>{})
watch([count,name],(newArrr,old)=>{
  console.log(newArrr,old)
})


</script>

 

4.immediate

在监听器创建时立即出发回调，响应式数据变化之后继续执行回调

 

watch(count,(newvalue,old)=>{
  console.log(newvalue,old)
},{
  immediate : true
})

5.deep

watch(userInfo,(newvalue,old)=>{
  console.log(newvalue,old)
  // userInfo.value = {name : '22222',age:88888} //修改了对象的地址才能监视到
},{
  immediate : true,
  deep : true,
  //watch默认是浅层监视
  //const ref1 = ref(简单类型数据)  直接监视
  //const ref2 = ref(引用类型/复杂类型) 监视不到复杂类型数据内部的变化
})

6.精确监听对象的某个属性

watch( //固定写法
()=>userInfo.value.age,
(newVal,oldVal)=>{
  console.log(newVal,oldVal)
}
)

六、组合式API — 生命周期函数

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


  // beforeCreate和created 都在setup中执行
  setTimeout(() => {
    console.log('模拟发送请求')
  }, 2000);

  //如果有些代码需要再mounted中处理 ,写成函数的调用方式，可以调用多次，并按顺序执行
  onMounted(()=>{
      console.log('111111111')
  })

  onMounted(()=>{
    console.log('22222')

  })

</script>

七.组合式API— 父子通信

1.父传子

 

<script setup>
// 父传子
//1.给子组件添加属性的方式传值
//2.在子组件中通过prop接收
import SonCom from '@/components/SonCom.vue'
import {ref} from 'vue'

const count = ref(100)

const setCount = ()=>{
  count.value++
}

</script>
<template>
<div>
  <div>
    <h4>父组件 <button @click="setCount">+</button></h4>
    
  </div>
  <!-- 1.给子组件添加属性的方式传值 -->
  <SonCom msg="传递数据给子组件" :count="count"></SonCom>
</div>
</template>

 

<script setup>
import {defineProps} from 'vue'
//在子组件中通过prop接收
//由于写了setup，子组件无法直接配置props选项
//此处需要借助“编辑器宏”函数来接收父组件传递的数据
const props = defineProps({
    msg : String,
    count : Number
})

console.log(props)

</script>

<template>
    <div>
        <h4>子组件{{  msg}}{{ count }}</h4>
        <!-- 对于template中的数据 可以直接使用 -->
    </div>
</template>

2.子传父

<script setup>
import SonCom from '@/components/SonCom.vue'
import { ref } from 'vue'
const count = ref(100)

//子传父
//1.父组件中给子组件标签通过@绑定事件
//2.子组件内部通过emit方法触发事件
const receive = (newVal) => {
  count.value -= newVal
}
</script>
<template>
  <div>
    <!-- 1.给子组件添加属性的方式传值 -->
    <SonCom  :count="count" @sendCount="receive"></SonCom>
  </div>
</template>
<script setup>
import {defineProps,defineEmits} from 'vue'

const props = defineProps({
    count : Number
})
console.log(props)
const emit = defineEmits(['sendCount'])
const send=()=>{
    emit('sendCount',6)
}
</script>
<template>
    <div>
        <!-- 对于template中的数据 可以直接使用 -->
        <h4>子组件{{ count }} 
        <button @click="send">
            send to F
        </button></h4>
    </div>
</template>

八.组合式API — 模板引用、defineExpose宏函数

通过ref标识获取真实的dom或者组件实例对象

1.调用ref生成一个ref对象

    const inputRef = ref(null)

 

2.通过ref标识绑定ref对象到标签

 

<script setup>
    import GetCom from '@/components/GetCom.vue'
    import {onMounted, ref} from 'vue'
    //模板引用
    //1.调用ref函数 生成一个ref对象
    //2.通过ref标识 进行绑定
    //3.通过ref对象.value访问绑定的元素
    const inputRef = ref(null)

    onMounted(()=>{
        console.log(inputRef)
    })
    const inputFocus = ()=>{
        inputRef.value.focus()
    }

    
</script>
<template>
    <div>
        <input type="text" ref="inputRef">
        <button @click="inputFocus">onfocus</button>
    </div>

</template>

 

 

3.defineExpose

（1）说明：默认情况下在<script setuo>语法糖中 组件内部的属性和方法是不对外开放给父组件的，可以通过defineExpose编译宏指定可以访问的属性和方法

（2）使用：

 

<script setup>
    import GetCom from '@/components/GetCom.vue'
    import {onMounted, ref} from 'vue'

    const comRef = ref(null)
    const GetComDom = ()=>{
        console.log(comRef)
        comRef.value.logNum()
    }
</script>
<template>
    <div>
        <GetCom ref="comRef"></GetCom>
        <button @click="GetComDom">GetCom</button>
    </div>
</template>

 

<script setup>
    const num = 999

    const logNum = ()=>{
        console.log(num)
    }
    defineExpose({
        num,logNum
    })
</script>

九.组合式API — provide&inject

顶层组件向任意底层组件传递数据和方法，实现跨层级组件通信

跨层级传递数据 顶层组件通过provide传递，底层组件通过inject接收

<script setup>
import GetDom from '@/components/GetDom.vue'
import {provide,ref} from 'vue'

// 1.跨层传递普通数据
provide('color','red')
// 2.跨层传递响应式数据
const count = ref(100)
provide('count',count)
const setCount=()=>{
  count.value++
}
//3.跨层级传递函数 给子组件传递修改数据的方法
provide('changeCount',(value)=>{
  count.value = value
})

</script>
<template>
  <div>
    <h1>顶层组件 <button @click="setCount">+</button></h1>
    <div>
      <GetDom></GetDom>
    </div>
  </div>
</template>
<script setup>
import GetCom from '@/components/GetCom.vue'


</script>
<template>
    <div>
        <h1>中间组件</h1>

        <div>
            <GetCom></GetCom>
        </div>
    </div>
</template>
<script setup>
import {inject} from 'vue'

const color = inject('color')
const count = inject('count')
const changeCount = inject('changeCount')
const change =()=>{

    changeCount(400)
}
</script>
<template>
    <div>
        <h1 :style="{color:color}">底层组件{{count }}</h1>
        <button @click="change">change400</button>

    </div>
</template>

 

标签：count,Vue,const,掌握,vue,Vue3.0,组件,import,ref
From： https://www.cnblogs.com/qinlinkun/p/18079063

相关文章

  • ant design vue动态显示隐藏表格列字段，支持记忆功能
    本文档内容下载：动态显示隐藏表格列字段，支持记忆功能.docx.zip:​​https://url37.ctfile.com/f/8850437-1036113839-678952?p=4760​​(访问密码:4760)链接:​​https://caiyun.139.com/m/i?135CdoJGCdpkg​​新版本以及新版本代码生成，会自动增加该功能，无需额外修改。仅......
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇：认识Vue3,1. Vue3组合式API体验【附代码文
    全套笔记资料代码移步：前往gitee仓库查看感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~全套教程部分目录：部分文件图片：认识Vue31.Vue3组合式API体验通过Counter案例体验Vue3新引入的组合式API<script>exportdefault{data(){return{count:0......
  • Vue.js前端开发零基础教学（一）
    目录第一章 初识Vue.js前言 开发的好处一.前端技术的发展什么是单页Web应用？二.Vue的简介三.Vue的特性四.Vue的版本五.常见的包管理六.安装node环境第一章 初识Vue.js学习目标：了解前端技术的发展了解什么是Vue掌握使用方法掌握Node.js环境的搭建前言......
  • RuoYi-Vue开源项目2-前端登录验证码生成过程分析
    前端登录验证码实现过程生成过程分析生成过程分析验证码的生成过程简单概括为：前端登录页面加载时，向后端发送一个请求，返回验证码图片给前端页面展示前端页面加载触发代码： import{getCodeImg}from"@/api/login"; created(){ this.getCode(); this.......
  • Vue项目简介
    Vue项目的创建： 1）在桌面上创建一个Vue文件夹，打开后在搜索栏中 输入cmd,打开命令窗，输入vueui 调出图形化界面。2）创建一个项目3）点击手动 4）将路由打开router5)vue版本选择为2X,语法检测选择第一项。6）创建好项目之后，直接用vscode打开vue文件夹，以下为所创建的......
  • 基于SpringBoot+Vue实现的二手交易系统
    系统介绍校园二手交易网站是一种专门针对有二手物品交易需求用户的二手交易的网站。它的设计和开发主要是为了满足用户之间的二手物品交易需求，方便大家在线买卖二手物品。近年来，随着互联网技术的发展，人们越来越喜欢在线购物，二手交易也不例外。功能模块图技术选型开发工......
  • Vue3 组件通信方式小结
    也是零零散散用vue3来搞一些前端的页面,每次在组件通信,主要是传数据这块总是忘记,大多无非父传子,子传父等情况,这里再来做一个小结.父传子Props最常见的就是父组件给子组件传递数据,不论是传字符串也好,还是数组,对象,函数等,都可以通过属性传值的方式,子组件......
  • Java毕业设计-200套基于Springboot+vue的毕设项目实战（源码+论文+演示视频）
    大家好！我是岛上程序猿，感谢您阅读本文，欢迎一键三连哦。......
  • Vue3学习日记 Day1
    一、简介1、简介  Vue3是新的默认版本，拥有更快的速度，更好的语法二、使用create-vue搭建Vue3项目1、创建项目1、介绍  create-vue是Vue官方新的脚手架工具，底层切换为了vite，为开发提供极速响应2、使用  2.1、确定环境条件    2.1.1已安装16.0或......
  • 微信小程序uniapp+vue+nodejs宝宝成长记录系统的设计与实现
    本文先通过对相关系统的调研，提出开发基于微信小程序的宝宝成长记录系统的意义，然后使用当前主流的技术进行开发，满足基于微信小程序的宝宝成长记录系统的技术要求，分析系统需要实现的功能并进行设计。梳理业务流程，并根据功能设计数据库，最后通过编码实现，介绍实现的关键算法逻辑。在......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99