Vue3 でのセットアップとカスタム命令の使用方法
setup 構文シュガー
最大の利点は、すべての宣言部分を返さずに直接使用できることです。
注: 一部の関数はまだ完成していません。たとえば、name と render は次のようにする必要があります。タグは、compositionAPI メソッドに従って記述されます。
//
setup syntactic Sugar unique
<script setup> import { ref ,reactive,toRefs } from 'vue' const a = 1; const num = ref(99) // 基本数据类型 const user = reactive({ // 引用数据类型 age:11 }) // 解构能获取响应式属性 {}解构 toRefs保留响应式 const { age } = toRefs(user) // 导出 defineExpose({ a }) // props const props = defineProps({ foo: String }) // 事件 const emit = defineEmits(['change', 'delete']) // 自定义指令 const vMyDirective = { created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 console.log('创建了') }, } </script>
#defineProps defineEmits はコンポーネント アプリケーションに関連しています
// 子组件 <template> <div class="hello"> <h2>{{ msg }}</h2> <slot name="btn"> </slot> <button @click="chickMe"></button> </div> </template> <script setup> import { useSlots, useAttrs } from 'vue'; const slots = useSlots() const attrs = useAttrs() const props = defineProps({ msg: String }) const emit = defineEmits(['change']) console.log(slots, attrs) const chickMe = ()=>{ emit('change','abc') } </script> // 父组件 <template> <div class="home" > <HelloWorld msg="hello" atr="attrs" @change="changeP "> <template #btn> <div>我是 btn:{{ obj.text }}</div> </template> </HelloWorld> </div> </template> <script setup> import HelloWorld from '../components/HelloWorld.vue'; import { ref ,reactive,toRefs } from 'vue' const obj = reactive({ id: 0, text: '小红' }) const changeP=(e)=>{ console.log(e) } </script> 、
defineExpose はコンポーネント アプリケーションに関連しています
// 子组件 <template> <div class="hello"> 123 </div> </template> <script setup> const testPose =()=>{ console.log('子组件暴露方法') } defineExpose({ testPose }) </script> // 父组件 <template> <div class="home" v-test> <HelloWorld ref="helloSon"></HelloWorld> <button @click="testEpose"></button> </div> </template> <script setup> import HelloWorld from '../components/HelloWorld.vue'; import { ref } from 'vue' // setup函数的话可以从context上查找 const helloSon = ref(null); const testEpose = () => { helloSon.value.testPose(); } </script>
- #created: in バインドされた要素の属性またはイベント リスナーが適用される前に呼び出されます。これは、通常の v-on イベント リスナーが呼び出される前に、ディレクティブをイベント リスナーに追加する必要がある場合に便利です。
- beforeMount: ディレクティブが初めて要素にバインドされるとき、親コンポーネントがマウントされる前に呼び出されます。
- mounted: バインドされた要素の親コンポーネントがマウントされた後に呼び出されます。ほとんどのカスタム命令はここに記述されます。
- beforeUpdate: コンポーネントを含む VNode を更新する前に呼び出されます。
- updated: 含まれるコンポーネントの VNode とそのサブコンポーネントの VNode が更新された後に呼び出されます。
- beforeUnmount: バインドされた要素の親コンポーネントをアンマウントする前に呼び出されます。
- unmounted: ディレクティブが要素と親コンポーネントからアンバインドされるときアンマウントされているため、一度だけ呼び出されます。
import { createApp } from 'vue'; const Test = createApp(); Test.directive('my-directive', { // 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 console.log('创建了') }, // 在元素被插入到 DOM 前调用 beforeMount(el, binding, vnode, prevVnode) { }, // 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 mounted(el, binding, vnode, prevVnode) { }, // 绑定元素的父组件更新前调用 beforeUpdate(el, binding, vnode, prevVnode) { }, // 在绑定元素的父组件 // 及他自己的所有子节点都更新后调用 updated(el, binding, vnode, prevVnode) { }, // 绑定元素的父组件卸载前调用 beforeUnmount(el, binding, vnode, prevVnode) { }, // 绑定元素的父组件卸载后调用 unmounted(el, binding, vnode, prevVnode) { } }) export default Test.directive('my-directive');
ログイン後にコピー
- el
: ディレクティブがバインドされる要素。これを使用して DOM を直接操作できます。
- binding
: 次のプロパティを含むオブジェクト。
- value
: ディレクティブに渡される値。たとえば、
v-my-directive="1 1"
では、値は2
です。 - oldValue
: 以前の値。
beforeUpdate
およびupdated
でのみ使用できます。値が変化するかどうかに関係なく使用できます。 - arg
: ディレクティブに渡される引数 (存在する場合)。たとえば、
v-my-directive:foo
では、パラメーターは"foo"
です。 - modifiers
: モディファイア (存在する場合) を含むオブジェクト。たとえば、
v-my-directive.foo.bar
では、修飾子オブジェクトは{ foo: true, bar: true }
です。 - instance
: このディレクティブを使用するコンポーネントのインスタンス。
dir
: 命令の定義オブジェクト。 - vnode
: バインドされた要素の基になる VNode を表します。
- prevNode
: 前のレンダリングでディレクティブがバインドされている要素を表す VNode。
beforeUpdate
フックとupdated
フックでのみ使用できます。
<template>
<div class="home" v-test>
</div>
</template>
//setup 外部调用
<script>
// 指令必须 vXxx 这样书写
import vTest from './TestDirective'
export default defineComponent({
directives: {
test:vTest,
},
setup(props) {
// console.log('Test',vTest)
return {
};
}
})
</script>
//或者 setup内部
<script setup>
import vTest from './TestDirective'
</script>
以上がVue3 でのセットアップとカスタム命令の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











tinymce はフル機能のリッチ テキスト エディター プラグインですが、tinymce を vue に導入するのは他の Vue リッチ テキスト プラグインほどスムーズではありません。tinymce 自体は Vue には適しておらず、@tinymce/tinymce-vue を導入する必要があります。外国のリッチテキストプラグインであり、中国語版を通過していないため、公式 Web サイトから翻訳パッケージをダウンロードする必要があります (ファイアウォールをバイパスする必要がある場合があります)。 1. 関連する依存関係をインストールします npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 中国語パッケージをダウンロードします 3. スキンと中国語パッケージを導入します. プロジェクトのパブリック フォルダーに新しい tinymce フォルダーを作成し、

vue3+vite:src は、イメージとエラー レポートと解決策を動的にインポートするために require を使用します。vue3+vite は複数のイメージを動的にインポートします。vue3。TypeScript 開発を使用している場合、イメージを導入するために require のエラー メッセージが表示されます。requireisnotdefined は使用できません。 vue2 のような imgUrl:require(' .../assets/test.png') は、typescript が require をサポートしていないため、インポートされます。そのため、import が使用されます。解決方法は次のとおりです: awaitimport を使用します

ページの部分的な更新を実現するには、ローカル コンポーネント (dom) の再レンダリングを実装するだけで済みます。 Vue でこの効果を実現する最も簡単な方法は、v-if ディレクティブを使用することです。 Vue2 では、v-if 命令を使用してローカル dom を再レンダリングすることに加えて、新しい空のコンポーネントを作成することもできます。ローカル ページを更新する必要がある場合は、この空のコンポーネント ページにジャンプしてから、再びジャンプします。 beforeRouteEnter ガードを空白のコンポーネントに配置します。元のページ。以下の図に示すように、Vue3.X の更新ボタンをクリックして赤枠内の DOM を再読み込みし、対応する読み込みステータスを表示する方法を示します。 Vue3.X の scriptsetup 構文のコンポーネントのガードには o しかないので、

Vue はブログ フロントエンドを実装しており、マークダウン解析を実装する必要があり、コードがある場合はコードのハイライトを実装する必要があります。 Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、マークダウン解析ライブラリが多数あります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強調表示ライブラリとしてhighlight.jsが使用されます。 1. 依存ライブラリをインストールする vue プロジェクトの下でコマンド ウィンドウを開き、次のコマンド npminstallmarked-save//marked を入力して、マークダウンを htmlnpmins に変換します。

vue3+ts+axios+pinia で無意味なリフレッシュを実現 1. まず、プロジェクト内の aiXos と pinianpmipinia をダウンロードします--savenpminstallaxios--save2. axios リクエストをカプセル化-----ダウンロード js-cookienpmiJS-cookie-s// aixosimporttype{AxiosRequestConfig , AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

はじめに vue であれ、react であれ、複数の繰り返しコードに遭遇した場合、ファイルを冗長なコードの束で埋めるのではなく、これらのコードを再利用する方法を考えます。実際、vue と React はどちらもコンポーネントを抽出することで再利用を実現できますが、小さなコードの断片に遭遇し、別のファイルを抽出したくない場合は、それに比べて、React は同じファイル内で対応するウィジェットを宣言して使用できます。または、次のような renderfunction を通じて実装します。 constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

vue3 プロジェクトがパッケージ化され、サーバーに公開されると、アクセス ページに空白の 1 が表示されます。vue.config.js ファイル内の publicPath は次のように処理されます: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

最終的な効果は、VueCropper コンポーネントのyarnaddvue-cropper@next をインストールすることです。上記のインストール値は Vue3 用です。Vue2 の場合、または他の方法を参照したい場合は、公式 npm アドレス: 公式チュートリアルにアクセスしてください。また、コンポーネント内で参照して使用するのも非常に簡単です。必要なのは、対応するコンポーネントとそのスタイル ファイルを導入することだけです。ここではグローバルに参照しませんが、import{userInfoByRequest}from'../js/api を導入するだけです。 ' コンポーネント ファイルにインポートします。import{VueCropper}from'vue-cropper&
