欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3學習指導教程(附帶獲取屏幕可視區(qū)域?qū)捀?

 更新時間:2023年04月18日 10:28:03   作者:zhangxiaobai___  
Vue3是Vue的第三個版本更快,更輕,易維護,更多的原生支持,下面這篇文章主要給大家介紹了關于vue3學習指導教程(附帶獲取屏幕可視區(qū)域?qū)捀?的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

一、從vue2到vue3

vue3.0 向下兼容 vue2.x 版本,優(yōu)化了主要核心雙向綁定原理和體積大小,并且更加友好的兼容 ts 語法。vue3是基于ES6新增的proxy代理實現(xiàn)的。

1.1 vue3的特點 新增了組合式api更接近原生js更加解耦(收到react啟發(fā))按需加載1.2 與vue2的區(qū)別

相同點:生命周期基本一致、與vue2的模板語法基本一致、與vue2的選項基本一致data methods computed watch等。

不同點:啟動方式不同、全局方法掛載不一樣、vue3可以擁有多個根節(jié)點、生命周期卸載不同、vue3新增部分 setup()在組件掛載前運行。

二、vue3的安裝使用

win+R,輸入cmd打開命令窗口,按照以下步驟進行安裝。

2.1 安裝腳手架

npm i @vue/cli -g 

2.2 創(chuàng)建項目

vue create mv3 //mv3為項目名稱

2.3 手動安裝

2.4 進入并運行項目服務器

cd /mv3
npm run serve

三、vue3生命周期

Vue3中繼續(xù)使用Vue2中的生命周期鉤子,但有有2個鉤子發(fā)生了改變 - beforeDestroy改名為beforeUnmount(卸載前) - destroyed改名為unmounted(卸載) 與vue2不同的是,vue3中是有了el模板之后才會去初始化,而vue2中是先created之后再去找模板。

Vue3生命周期示意圖如下:

四、vue3核心

4.1 setup組件

在vue2中,生命周期暴露在vue實例的選項上,使用時直接調(diào)用;vue3中使用生命周期鉤子,需要先導入項目,才能夠使用。

import {onMounted} from 'vue'

4.2 ref創(chuàng)建響應式數(shù)據(jù)        

在 vue 3中,可以通過一個新的 ref 函數(shù)使任何響應式變量在任何地方起作用 ;ref() 函數(shù)可以根據(jù)給定的值來創(chuàng)建一個響應式的數(shù)據(jù)對象,返回值是一個對象,且只包含一個 .value 屬性。在 setup() 函數(shù)內(nèi),由 ref() 創(chuàng)建的響應式數(shù)據(jù)返回的是對象,所以需要用 .value 來訪問。

使用ref可以創(chuàng)建一個包含響應式數(shù)據(jù)的引用對象(reference對象,簡稱ref對象),可以是基本類型、也可以是對象。

import { ref } from 'vue' //使用前先導入
 
const counter = ref(0)
 
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
 
counter.value++
console.log(counter.value) // 1

4.3 reactive創(chuàng)建響應式引用類型方法

定義一個對象類型的響應式數(shù)據(jù),內(nèi)部基于ES6的Proxy實現(xiàn),通過代理對象操作源對象內(nèi)部數(shù)據(jù)進行操作;返回一個對象的響應式代理。

import {reactive} from 'vue'
// 定義一個引用類型的響應式數(shù)據(jù)list 默認是
const list = reactive(["vue","react","angular"])

4.4 computed & methods

計算屬性關鍵詞: computed。

var twiceNum = computed(()=>num.value*2)

computed vs methods

        可以使用 methods 來替代 computed,效果上兩個都是一樣的,但是 computed 是基于它的依賴緩存,只有相關依賴發(fā)生改變時才會重新取值。而使用 methods ,在重新渲染的時候,函數(shù)總會重新調(diào)用執(zhí)行。

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

4.5 watch監(jiān)聽

         watch(參數(shù)1,參數(shù)2) 默認是懶偵聽的,即僅在偵聽源發(fā)生變化時才執(zhí)行回調(diào)函數(shù)。參數(shù)1是偵聽源,參數(shù)2是回調(diào)函數(shù)。 

案例:創(chuàng)建一個stepper組件(src/components/StepperCom.vue),在HomeView中引入(src/views/HomeView.vue)

src/components/StepperCom.vue

<template>
    <span>
        <button @click="count--">-</button>
        <input type="text" style="width:90px;" v-model="count">
        <button @click="count++">+</button>
    </span>
</template>
<script setup>
//defineProps定義props
import {defineProps,ref,watch,defineEmits,watchEffect,defineExpose} from 'vue'
//定義props傳入?yún)?shù)
const props=defineProps({
    //類型為數(shù)字或者字符串,默認值為1
    value:{type:[Number,String],default:1}
})
//定義一個響應式對象初始值為props.value
const count=ref(props.value);
//定義事件發(fā)送器
var emits=defineEmits(["input"]);
//監(jiān)聽count的變化
watch(count,()=>{
    //發(fā)送一個inout事件  事件值為count的value
    emits("input",count.value);
})
//只要watchEffect中出現(xiàn)了數(shù)據(jù),數(shù)據(jù)發(fā)生變化都會被執(zhí)行
watchEffect(()=>{
    count.value=props.value;
})
//defineExpose規(guī)定了組件哪些值可以被引用獲取
defineExpose({count})
</script>

 src/views/HomeView.vue

<template>
  <div>
    <h1>setup</h1>
    <button @click="num++">{{num}}</button>
    <stepper-com :value="10" @input="num=$event"></stepper-com>
  </div>
</template>
<script setup>
//使用setup可以簡寫(不用導出,組件不用注冊)
import StepperCom from '@/components/StepperCom.vue'
import {ref} from 'vue'
    const num=ref(5)
</script>

五、案例(獲取可視區(qū)域?qū)捀邤?shù)據(jù))

src/utils/utils.js

import {ref,onMounted,onBeforeUnmount} from 'vue'
export function useWinSize(){
    const size=ref({width:1920,height:1080});
    //窗口變化時更新size
    function onResize(){
        size.value={
            //用窗口的最新寬高更新width和heigth
            width:window.innerWidth,
            height:window.innerHeight
        }
    }
    //組件掛載完畢更新size
    onMounted(()=>{
        window.addEventListener("resize",onResize);
    })
    //組件要卸載的時候移除事件監(jiān)聽
    onBeforeUnmount(() => {
        window.removeEventListener("resize",onResize);
    })
 
    return size;
}

src/views/HomeView.vue

<template>
  <div>
    <h1>可視區(qū)域?qū)挾扰c高度</h1>
    <p>{{size}}</p>
  </div>
</template>
<script setup>
 
//導入useWinSize方法
import {useWinSize} from '@/utils/utils.js'
 
//方法執(zhí)行,返回一個對象size
const size=useWinSize();
 
</script>

總結(jié)

到此這篇關于vue3學習的文章就介紹到這了,更多相關vue3獲取屏幕可視區(qū)域?qū)捀邇?nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue 中filter的多種用法

    vue 中filter的多種用法

    這篇文章主要介紹了vue 中filter的多種用法,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2018-04-04
  • Vue3?中自定義插件的實現(xiàn)方法

    Vue3?中自定義插件的實現(xiàn)方法

    在 Vue 中,一些簡單的功能,我們可以直接定義為全局方法,然后掛到 Vue 上就能使用了,這篇文章主要介紹了Vue3?中自定義插件的實現(xiàn),需要的朋友可以參考下
    2022-08-08
  • vue 實現(xiàn)剪裁圖片并上傳服務器功能

    vue 實現(xiàn)剪裁圖片并上傳服務器功能

    這篇文章主要介紹了vue 實現(xiàn)剪裁圖片并上傳服務器功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-03-03
  • Vue?收集表單數(shù)據(jù)方法詳情

    Vue?收集表單數(shù)據(jù)方法詳情

    這篇文章主要介紹了Vue?收集表單數(shù)據(jù)方法詳情,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-05-05
  • vue項目之頁面class不生效問題及解決

    vue項目之頁面class不生效問題及解決

    這篇文章主要介紹了vue項目之頁面class不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • 解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法

    解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法

    今天小編就為大家分享一篇解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue框架和react框架的區(qū)別以及各自的應用場景使用

    vue框架和react框架的區(qū)別以及各自的應用場景使用

    這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應用場景使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue3實現(xiàn)動態(tài)面包屑的代碼示例

    Vue3實現(xiàn)動態(tài)面包屑的代碼示例

    這篇文章主要給大家介紹一下Vue3動態(tài)面包屑是如何實現(xiàn)的,實現(xiàn)思路又是什么,以及發(fā)給大家介紹一下面包屑的功能,文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下
    2023-07-07
  • 在vue項目中配置你自己的啟動命令和打包命令方式

    在vue項目中配置你自己的啟動命令和打包命令方式

    這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue實現(xiàn)多標簽選擇器

    Vue實現(xiàn)多標簽選擇器

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)多標簽選擇器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11

最新評論