成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue3.0實(shí)踐之寫tsx語法實(shí)例

3403771864 / 898人閱讀

　　00：先下載

　　yarn add @vitejs/plugin-vue-jsx -D

　　01：引入

　　vite.config.ts

　　import { defineConfig } from 'vite'
　　import vue from '@vitejs/plugin-vue'
　　import vueJsx from '@vitejs/plugin-vue-jsx';
　　// https://vitejs.dev/config/
　　export default defineConfig({
　　plugins: [vue(),vueJsx()]
　　})

　　02：tsconfig.json 配置文件

　　"jsx": "preserve",
　　"jsxFactory": "h",
　　"jsxFragmentFactory": "Fragment",

　　上述代碼配置就是可以使用ts.

　　首先進(jìn)行測試tsx，新建一個(gè)App.tsx頁面，接下來就可以進(jìn)行App.vue文件之中引入使用。

　　<template>
　　<!-- <Layout></Layout> -->
　　<renderDom />
　　</template>
　　<script setup>
　　// import Layout from './layout/Layout.vue'
　　import renderDom from './App.tsx'
　　</script>
　　<style>
　　html,
　　body,
　　#app {
　　height: 100%;
　　width: 100%;
　　overflow: hidden;
　　}
　　</style>

　　tsx使用v-model指令 (App.tsx組件)

　　import { ref } from "vue"
　　let test = ref<string>("")
　　const renderDom = () => {
　　// 注意點(diǎn)：在tsx之中 不會自動讀寫 X.value
　　return (
　　<div>
　　<input type="text" v-model={test.value} />
　　<div>我是{test.value }</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

1.png

　　使用v-show、與三目運(yùn)算符

　   記住，tsx是支持v-show指令，tsx不支持v-if、v-else指令，因此，需要用到三目運(yùn)算符了。

　　import { ref } from "vue"
　　let flag = ref<Boolean>(true)
　　const renderDom = () => {
　　// 注意點(diǎn)：在tsx之中 不會自動讀寫 X.value
　　return (
　　<div>
　　<div v-show={flag}>我是true</div>
　　<div v-show={!flag}>我是flase</div>
　　<div>
　　{
　　flag ? <div>我是true</div> : <div>我是flase</div>
　　}
　　</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

2.png

　　tsx之?dāng)?shù)組的遍歷(map)

　　tsx是不支持 v-for指令的

　　使用map的方式去遍歷數(shù)組，然后map函數(shù)之中返回一個(gè) div等標(biāo)簽渲染dom節(jié)點(diǎn)

　　import { reactive, ref } from "vue"
　　let arr = reactive<Number[]>([1,2,3])
　　const renderDom = () => {
　　return (
　　<div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return(
　　<div key={idx}>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

3.png

　　自定義屬性 data-index

　　給當(dāng)前標(biāo)簽自定義屬性用于數(shù)據(jù)的傳遞

　　import { reactive, ref } from "vue"
　　let arr = reactive<Number[]>([1,2,3])
　　const renderDom = () => {
　　return (
　　<div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return(
　　<div key={idx} data-index={idx}>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

4.png

　　tsx綁定事件

　　使用onClick定義事件

　　不傳遞參數(shù)的時(shí)候，直接定義這個(gè)click事件即可

　　若是傳遞參數(shù)的時(shí)候，需要使用bind來改變this的指向，并且不自覺調(diào)用函數(shù)，而是返回一個(gè)新的函數(shù)，可以傳遞參數(shù)，等待點(diǎn)擊的時(shí)候觸發(fā)事件

　　import { reactive, ref } from "vue"
　　let arr = reactive<Number[]>([1,2,3])
　　const renderDom = () => {
　　return (
　　<div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return(
　　// <div key={idx} data-index={idx} onClick={TestClick}>{ item }</div> // 沒有傳參
　　// <div key={idx} data-index={idx} onClick={TestClick()}>{ item }</div> // 直接調(diào)用
　　<div key={idx} data-index={idx} onClick={TestClick.bind(this,item)}>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　const TestClick = (item)=>{
　　console.log("111",item);
　　}
　　export default renderDom

　　tsx之 props父組件向子組件傳遞參數(shù)

　　App.vue 父

　　再vue之中，使用 v-bind的形式傳遞數(shù)據(jù)

　　<template>
　　<renderDom :title="title" />
　　</template>
　　<script setup>
　　import { ref } from 'vue'
　　import renderDom from './App.tsx'
　　let title = ref<String>('我是測試的t')
　　</script>

　　App.tsx 子

　　import { reactive, ref } from "vue"
　　type Props = {
　　title : string
　　}
　　const renderDom = (props:Props) => {
　　return (
　　<div>
　　<div>我是title - { props.title }</div>
　　</div>
　　)
　　}
　　export default renderDom

　　效果

5.png

　　tsx之子組件 向父組件 傳遞數(shù)據(jù)

　　點(diǎn)擊11 傳遞當(dāng)前11數(shù)據(jù)

　　子組件 App.tsx

　　import { reactive, ref } from "vue"
　　type Props = {
　　title : string
　　}
　　let arr = reactive<number[]>([11,22,33])
　　// props是接受父組件傳遞來的值，ctx：為上下文對象
　　const renderDom = (props:Props,ctx:any) => {
　　return (
　　<div>
　　<div>我是title - { props.title }</div>
　　<div>
　　{
　　arr.map((item,idx)=>{
　　return (
　　<div onClick={ itemClick.bind(this,ctx,item) }>{ item }</div>
　　)
　　})
　　}
　　</div>
　　</div>
　　)
　　}
　　// 點(diǎn)擊事件
　　const itemClick = (ctx:any,item:any)=>{
　　ctx.emit("on-click",item) // 使用ctx之中的emit發(fā)射事件，給父組件傳遞數(shù)據(jù)
　　}
　　export default renderDom

　　App.vue 父

　　<template>
　　<!-- <Layout></Layout> -->
　　<renderDom :title="title" @on-click="getData" />
　　</template>
　　<script setup>
　　// import Layout from './layout/Layout.vue'
　　import { ref } from 'vue'
　　import renderDom from './App.tsx'
　　let title = ref<String>('我是測試的t')
　　// 接受子組件 自定義事件 傳遞來的數(shù)據(jù)
　　const getData = (parmas) => {
　　console.log('getData', parmas)
　　}
　　</script>

上述內(nèi)容就是vue3.0實(shí)踐之寫tsx語法的文章，后續(xù)更多相關(guān)內(nèi)容，請大家繼續(xù)關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127568.html

相關(guān)文章

  • 精讀《Vue3.0 Function API》

    摘要：拿到的都是而不是原始值，且這個(gè)值會動態(tài)變化。精讀對于的與，筆者做一些對比。因此采取了作為優(yōu)化方案只有當(dāng)?shù)诙€(gè)依賴參數(shù)變化時(shí)才返回新引用。不需要使用等進(jìn)行性能優(yōu)化，所有性能優(yōu)化都是自動的。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 Vue 3.0 的發(fā)布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細(xì)了解一下 Vue 團(tuán)隊(duì)是怎么想的吧！ 首先官方回答了幾個(gè)最受關(guān)注的...

    voyagelab 評論0 收藏0

  • Vue + TypeScript + Element 項(xiàng)目實(shí)踐(簡潔時(shí)尚博客網(wǎng)站)及踩坑記

    摘要：前言本文講解如何在項(xiàng)目中使用來搭建并開發(fā)項(xiàng)目，并在此過程中踩過的坑。具有類型系統(tǒng)，且是的超集，在年勢頭迅猛，可謂遍地開花。年將會更加普及，能夠熟練掌握，并使用開發(fā)過項(xiàng)目，將更加成為前端開發(fā)者的優(yōu)勢。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項(xiàng)目中使用 TypeScript...

    luckyyulin 評論0 收藏0

  • Dojo 部件進(jìn)階

    摘要：如果為，則渲染生命周期中相關(guān)的回調(diào)特別是和渲染回調(diào)函數(shù)是同步運(yùn)行的。如果為，則在下一次重繪之前，回調(diào)函數(shù)被安排為異步運(yùn)行。更改檢測策略，確定應(yīng)用程序是否需要更新外部的節(jié)點(diǎn)是一個(gè)可選的回調(diào)函數(shù)，在節(jié)點(diǎn)追加到后執(zhí)行檢測外部節(jié)點(diǎn)的 部件的基本原理 部件是所有 Dojo 應(yīng)用程序的基本構(gòu)建要素。部件是主要的封裝單元，它能表示從用戶界面的單個(gè)元素，到更高級別的容器元素（如 Form 表單、段落、...

    draveness 評論0 收藏0

  • TypeScript在react項(xiàng)目中的實(shí)踐

    摘要：前段時(shí)間有寫過一個(gè)在項(xiàng)目中的實(shí)踐。在里邊有解釋了為什么要使用，以及在中的一個(gè)項(xiàng)目結(jié)構(gòu)是怎樣的。關(guān)于的配置文件，在本項(xiàng)目中存在兩份。一個(gè)需要注意的小細(xì)節(jié)因?yàn)槲覀兊呐c實(shí)現(xiàn)版本中都用到了。 前段時(shí)間有寫過一個(gè)TypeScript在node項(xiàng)目中的實(shí)踐。 在里邊有解釋了為什么要使用TS，以及在Node中的一個(gè)項(xiàng)目結(jié)構(gòu)是怎樣的。 但是那僅僅是一個(gè)純接口項(xiàng)目，碰巧趕上近期的另一個(gè)項(xiàng)目重構(gòu)也由我...

    Hwg 評論0 收藏0

  • 從零單排系列之寫一個(gè)類vue框架(二)

    摘要：昨天寫了一下節(jié)點(diǎn)綁定的替換，已經(jīng)如何檢測的方法今天優(yōu)化一下，勉強(qiáng)實(shí)現(xiàn)一個(gè)雙向綁定看下昨天的代碼這里是在實(shí)現(xiàn)雙向綁定之前，先普及一個(gè)和的知識。如果強(qiáng)行給之前的賦值，就會發(fā)生無限的情況。畢竟還在正式學(xué)習(xí)期。 昨天寫了一下節(jié)點(diǎn)綁定model的替換，已經(jīng)如何檢測model 的方法今天優(yōu)化一下，勉強(qiáng)實(shí)現(xiàn)一個(gè)雙向綁定看下昨天的代碼 function Vue(obj) { ...

    learn_shifeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<