setup 構文シュガー 最大の利点は、すべての宣言部分を返さずに直接使用できることです。 注: 一部の関数はまだ完成していません。たとえば、name と render は次のようにする必要があります。タグは、compositionAPI メソッドに従って記述されます。 // </p> <h3>setup syntactic Sugar unique<strong> </strong> </h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><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('创建了') }, } ログイン後にコピー## を追加することもできます。セットアップの #defineProps defineEmits はコンポーネント アプリケーションに関連しています// 子组件 {{ msg }} 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') } // 父组件 我是 btn：{{ obj.text }} import HelloWorld from '../components/HelloWorld.vue'; import { ref ,reactive,toRefs } from 'vue' const obj = reactive({ id: 0, text: '小红' }) const changeP=(e)=>{ console.log(e) } 、ログイン後にコピーdefineExpose はコンポーネント アプリケーションに関連しています// 子组件 123 const testPose =()=>{ console.log('子组件暴露方法') } defineExpose({ testPose }) // 父组件 import HelloWorld from '../components/HelloWorld.vue'; import { ref } from 'vue' // setup函数的话可以从context上查找 const helloSon = ref(null); const testEpose = () => { helloSon.value.testPose(); } ログイン後にコピーカスタム ディレクティブ#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 フックでのみ使用できます。 アプリケーション //setup 外部调用 // 指令必须 vXxx 这样书写 import vTest from './TestDirective' export default defineComponent({ directives: { test:vTest, }, setup(props) { // console.log('Test',vTest) return { }; } }) //或者 setup内部 import vTest from './TestDirective' ログイン後にコピー オブジェクト リテラル app.directive('demo', (el, binding) => { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" })ログイン後にコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
