import{S as _v,i as hv,s as gv,C as Ly,w as wv,x as kv,y as bv,z as Bv,A as L8,f as Pv,t as xv,B as jv,X as T8,l as p,r as c,a as y,V as D,m as F,n as e,u as r,h as l,c as i,W as E,p as t,b as o,G as a,E as Iv}from"../chunks/index-cd58b8d1.js";import{P as Vv}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function Hv(Ll){let v,A,u,is,d,f,Tl,Ke,gp,w,Qe,Ul,Ze,Ye,wp,zl,st,kp,Ds,Wl,lt,bp,Es,ql,at,Bp,Gl,nt,Pp,Mn,z8=`vue
<script setup>
const msg = 'Hello World'
</script>
<template>
<teleport to="body">
<span>{{ msg }}</span>
</teleport>
</template>
`,Rn,vs,ot,k,pt,xp,$l,ds,Ft,Nl,fs,et,tt,jp,b,On,ct,rt,Ln,yt,Ip,us,Jl,it,Vp,Xl,Dt,Hp,Tn,W8=`vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
setInterval(() => {
count.value++
}, 1000)
</script>
<template>
<span v-once>\u4F7F\u5B83\u4ECE\u4E0D\u66F4\u65B0: {{ count }}</span>
</template>
`,Un,As,Et,zn,vt,Sp,Cs,Kl,dt,Mp,ms,Ql,ft,Rp,B,ut,Wn,At,Ct,Op,qn,q8=`vue
<script setup>
import { ref } from 'vue'
const theme = ref('red')
const colors = ['blue', 'yellow', 'red', 'green']
setInterval(() => {
theme.value = colors[Math.floor(Math.random() * 4)]
}, 1000)
</script>
<template>
<p>hello</p>
</template>
<style scoped>
/* Modify the code to bind the dynamic color */
p {
color: v-bind(theme);
}
</style>
`,Gn,g,mt,$n,_t,ht,Nn,gt,Lp,_s,Zl,wt,Tp,Yl,kt,Up,Jn,G8=`vue
<template>
<p>Hello Vue.js</p>
</template>
<style scoped>
p {
font-size: 20px;
color: red;
text-align: center;
line-height: 50px;
}
/* Make it work */
:global(body) {
width: 100vw;
height: 100vh;
background-color: burlywood;
}
</style>
`,Xn,sa,bt,zp,Kn,$8=`vue
<template>
<p>Hello Vue.js</p>
</template>
<style scoped>
p {
font-size: 20px;
color: red;
text-align: center;
line-height: 50px;
}
</style>
<style>
/* Make it work */
body {
width: 100vw;
height: 100vh;
background-color: burlywood;
}
</style>
`,Qn,hs,Bt,P,Pt,Wp,gs,la,xt,qp,ws,aa,jt,Gp,na,It,$p,ks,oa,Vt,Np,pa,Ht,Jp,Zn,N8=`vue
<script setup>
import Button from './Button.vue'
defineProps({
type: {
type: String,
default: 'default',
validator: value => {
;['primary', 'ghost', 'dashed', 'link', 'text', 'default'].includes(value)
}
}
})
</script>
<template>
<Button type="dashed" />
</template>
`,Yn,bs,St,x,Mt,Xp,Bs,Fa,Rt,Kp,Ps,Ot,j,Lt,Qp,so,J8=`vue
<script setup lang="ts">
import { ref, h } from 'vue'
/**
* Implement a functional component :
* 1. Render the list elements (ul/li) with the list data
* 2. Change the list item text color to red when clicked.
*/
const ListComponent = (props, { emit }) =>
h(
// \u521B\u5EFA ul
'ul',
// \u6839\u636E\u4F20\u5165\u7684props\u521B\u5EFAli
props.list.map((item: { name: string }, index: number) =>
h(
'li',
{
// \u70B9\u51FB\u65F6\u5904\u7F5Atoggle\u3002\u5E76\u5C06\u5F53\u524Dindex\u4F5C\u4E3A\u53C2\u6570\u4F20\u5165toggle
onClick: () => emit('toggle', index),
// \u5C06\u5F53\u524D\u70B9\u51FB\u7684li\u989C\u8272\u8BBE\u7F6E\u4E3A\u7EA2\u8272
style: index === props.activeIndex ? { color: 'red' } : null
},
// li \u9ED8\u8BA4\u503C
item.name
)
)
)
ListComponent.props = ['list', 'activeIndex']
ListComponent.emits = ['toggle']
const list = [
{
name: 'John'
},
{
name: 'Doe'
},
{
name: 'Smith'
}
]
const activeIndex = ref(0)
function toggle(index: number) {
activeIndex.value = index
}
</script>
<template>
<list-component :list="list" :active-index="activeIndex" @toggle="toggle" />
</template>
`,lo,ea,Tt,Zp,I,ao,V,Ut,zt,no,H,Wt,Yp,xs,ta,qt,sF,ca,oo,Gt,lF,po,X8=`vue
import { defineComponent, h } from 'vue'; export default defineComponent({ name: 'MyButton', props: { disabled: { type: Boolean,
default: false, }, }, emits: ['custom-click'], setup(props, { emit, slots }) { return () => h( 'button', { disabled:
props.disabled, onClick: () => emit('custom-click'), }, slots.default?.() ); }, });
`,Fo,js,ra,$t,aF,ya,Nt,nF,eo,K8=`vue
<script setup lang="ts">
import { defineComponent } from 'vue'
interface TreeData {
key: string
title: string
children: TreeData[]
}
defineProps<{ data: TreeData[] }>()
</script>
<template>
<ul v-for="node in data">
<li>{{ node.title }}</li>
<template v-if="node.children && node.children.length">
// \u7528\u9012\u5F52\u7684\u65B9\u6CD5\u6765\u5B9E\u73B0
<TreeComponent :data="node.children" />
</template>
</ul>
</template>
`,to,ia,Jt,oF,S,co,M,Xt,Kt,Is,R,Qt,Zt,C,Yt,ro,sc,lc,pF,Vs,Da,ac,FF,Hs,nc,O,oc,eF,Ss,Ea,pc,tF,va,Fc,cF,yo,Q8=`vue
<script setup lang="ts">
import { ref } from 'vue'
/**
* Implement a composable function that toggles the state
* Make the function work correctly
*/
function useToggle(init: boolean) {
const state = ref(init)
const toggle = () => (state.value = !state.value)
return [state, toggle]
}
const [state, toggle] = useToggle(false)
</script>
<template>
<p>State: {{ state ? 'ON' : 'OFF' }}</p>
<p @click="toggle">Toggle state</p>
</template>
`,io,Ms,da,ec,rF,fa,tc,yF,Do,Z8=`vue
<script setup lang="ts">
import { ref } from 'vue'
interface UseCounterOptions {
min?: number
max?: number
}
/**
* Implement the composable function
* Make sure the function works correctly
*/
function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
const count = ref(initialValue)
const inc = () => {
if (count.value < options.max) count.value++
}
const dec = () => {
if (count.value > options.min) count.value--
}
const reset = () => (count.value = initialValue)
return { count, inc, dec, reset }
}
const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })
</script>
`,Eo,Rs,ua,cc,iF,L,rc,vo,yc,ic,DF,fo,Y8=`vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
/**
* Implement the composable function
* Make sure the function works correctly
*/
function useLocalStorage(key: string, initialValue: any) {
const value = ref(localStorage.getItem(key) || initialValue)
watchEffect(() => {
localStorage.setItem(key, value.value)
})
return value
}
const counter = useLocalStorage('counter', 0)
// We can get localStorage by triggering the getter:
console.log(counter.value)
// And we can also set localStorage by triggering the setter:
const update = () => counter.value++
</script>
<template>
<p>Counter: {{ counter }}</p>
<button @click="update">Update</button>
</template>
`,uo,Aa,Dc,EF,T,Ao,U,Ec,vc,Co,z,dc,vF,Os,Ca,fc,dF,ma,uc,fF,mo,sv=`vue
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
// Implement ...
function useEventListener(target, event, callback) {
onMounted(() => target.addEventListener(event, callback))
onUnmounted(() => target.removeEventListener(event, callback))
}
// Implement ...
function useMouse() {
const x = ref(0)
const y = ref(0)
useEventListener(window, 'mousemove', e => {
x.value = e.pageX
y.value = e.pageY
})
return { x, y }
}
const { x, y } = useMouse()
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>
`,_o,Ls,_a,Ac,uF,Ts,ha,Cc,AF,ho,lv=`vue
<script setup lang="ts">
import { onMounted, inject, onUnmounted } from 'vue'
const timer = inject('timer')
const count = inject('count')
onMounted(() => {
timer.value = window.setInterval(() => {
count.value++
}, 1000)
})
// \u8BA1\u65F6\u5668\u8981\u6E05\u9664
onUnmounted(() => {
window.clearInterval(timer.value)
})
</script>
<template>
<div>
<p>Child Component: {{ count }}</p>
</div>
</template>
`,go,ga,wa,mc,Us,wo,W,_c,hc,ko,q,gc,CF,zs,ka,wc,mF,bo,av=`vue
<script setup lang="ts">
import { ref, Ref, reactive, isRef, unref, toRef } from 'vue'
const initial = ref(10)
const count = ref(0)
// Challenge 1: Update ref
function update(value) {
count.value = value
}
/**
* Challenge 2: Check if the `count` is a ref object.
* Make the output be 1
*/
console.log(isRef(count) ? 1 : 0)
/**
* Challenge 3: Unwrap ref
* Make the output be true
*/
function initialCount(value: number | Ref<number>) {
// Make the output be true
console.log(unref(value) === 10)
}
initialCount(initial)
/**
* Challenge 4:
* create a ref for a property on a source reactive object.
* The created ref is synced with its source property:
* mutating the source property will update the ref, and vice-versa.
* Make the output be true
*/
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo') // change the impl...
// mutating the ref updates the original
fooRef.value++
console.log(state.foo === 2)
// mutating the original also updates the ref
state.foo++
console.log(fooRef.value === 3)
</script>
<template>
<div>
<p>
<span @click="update(count - 1)">-</span>
{{ count }}
<span @click="update(count + 1)">+</span>
</p>
</div>
</template>
`,Bo,ba,kc,_F,m,Po,G,bc,Bc,xo,$,Pc,xc,jo,N,jc,hF,Ws,Ba,Ic,gF,Pa,Vc,wF,Io,nv=`vue
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
function useCount() {
const state = reactive({
count: 0
})
function update(value: number) {
state.count = value
}
return {
state: toRefs(state),
update
}
}
// Ensure the destructured properties don't lose their reactivity
const {
state: { count },
update
} = useCount()
</script>
<template>
<div>
<p>
<span @click="update(count - 1)">-</span>
{{ count }}
<span @click="update(count + 1)">+</span>
</p>
</div>
</template>
`,Vo,qs,Hc,J,Sc,kF,Gs,xa,Mc,bF,Ho,ov=`vue
<script setup lang="ts">
import { ref, computed } from 'vue'
const count = ref(1)
const plusOne = computed({
get() {
return count.value + 1
},
set(newValue) {
count.value = newValue - 1
}
})
/**
* Make the `plusOne` writable.
* So that we can get the result `plusOne` to be 3, and `count` to be 2.
*/
plusOne.value++
</script>
<template>
<div>
<p>{{ count }}</p>
<p>{{ plusOne }}</p>
</div>
</template>
`,So,$s,Rc,X,Oc,BF,Ns,ja,Lc,PF,Mo,pv=`vue
<script setup lang="ts">
import { ref, watch } from 'vue'
const count = ref(0)
/**
* Challenge 1: Watch once
* Make sure the watch callback only triggers once
*/
const watchOnce = watch(count, () => {
console.log('Only triggered once')
watchOnce()
})
count.value = 1
setTimeout(() => (count.value = 2))
/**
* Challenge 2: Watch object
* Make sure the watch callback is triggered
*/
const state = ref({
count: 0
})
watch(
state,
() => {
console.log('The state.count updated')
},
{ deep: true }
)
state.value.count = 2
/**
* Challenge 3: Callback Flush Timing
* Make sure visited the updated eleRef
*/
const eleRef = ref()
const age = ref(2)
watch(
age,
() => {
console.log(eleRef.value)
},
{
flush: 'post'
}
)
age.value = 18
</script>
<template>
<div>
<p>
{{ count }}
</p>
<p ref="eleRef">
{{ age }}
</p>
</div>
</template>
`,Ro,Js,Tc,K,Uc,xF,Xs,Ia,zc,jF,Va,Wc,IF,Oo,Fv=`vue
<script setup lang="ts">
import { shallowRef, watch } from 'vue'
const state = shallowRef({ count: 1 })
// Does NOT trigger
watch(
state,
() => {
console.log('State.count Updated')
},
{ deep: true }
)
/**
* Modify the code so that we can make the watch callback trigger.
*/
state.value = { count: 2 }
</script>
<template>
<div>
<p>
{{ state.count }}
</p>
</div>
</template>
`,Lo,Ks,qc,Q,Gc,VF,Qs,Ha,$c,HF,Sa,Nc,SF,To,ev=`vue
<script setup lang="ts">
import { inject } from 'vue'
const count = inject('count')
</script>
<template>
{{ count }}
</template>
`,Uo,Zs,Jc,Z,Xc,MF,Ys,Ma,Kc,RF,zo,tv=`vue
<script setup lang="ts">
import { ref, computed, watch, watchEffect, effectScope } from 'vue'
const counter = ref(1)
const doubled = computed(() => counter.value * 2)
// use the `effectScope` API to make these effects stop together after being triggered once
const scope = effectScope()
scope.run(() => {
watch(doubled, () => console.log(doubled.value))
watchEffect(() => console.log(`Count: ${doubled.value}`))
counter.value = 2
})
setTimeout(() => {
counter.value = 4
scope.stop()
})
</script>
<template>
<div>
<p>
{{ doubled }}
</p>
</div>
</template>
`,Wo,sl,Qc,Y,Zc,OF,ll,Ra,Yc,LF,qo,cv=`vue
<script setup>
import { watch, customRef } from 'vue'
/**
* Implement the function
*/
function useDebouncedRef(value, delay = 200) {
let timeout
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger()
}, delay)
}
}
})
}
const text = useDebouncedRef('hello')
/**
* Make sure the callback only gets triggered once when entered multiple times in a certain timeout
*/
watch(text, value => {
console.log(value)
})
</script>
<template>
<input v-model="text" />
</template>
`,Go,al,sr,ss,lr,TF,nl,Oa,ar,UF,ol,La,nr,zF,_,or,$o,pr,Fr,No,er,tr,WF,Jo,rv=`vue
<script setup>
import { ref } from 'vue'
import Input from './Input.vue'
const value = ref('')
</script>
<template>
<Input type="text" v-model.capitalize="value" />
</template>
`,Xo,Ta,cr,qF,Ko,yv=`vue
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
modelValue: String,
modelModifiers: {
default: () => ({})
}
})
const emit = defineEmits(['update:modelValue'])
function emitValue(e) {
let value = e.target.value
if (props.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
emit('update:modelValue', value)
}
</script>
<template>
<input type="text" :value="modelValue" @input="emitValue" />
</template>
`,Qo,pl,rr,ls,yr,GF,Fl,Ua,ir,$F,za,Dr,NF,el,Wa,Er,JF,Zo,iv=`vue
<script setup lang="ts">
import { ref } from 'vue'
const state = ref(false)
/**
* Implement the custom directive
* Make sure the input element focuses/blurs when the 'state' is toggled
*
*/
const VFocus = {
updated: (el, state) => (state.value ? el.focus() : el.blur())
}
setInterval(() => {
state.value = !state.value
}, 2000)
</script>
<template>
<input v-focus="state" type="text" />
</template>
`,Yo,tl,vr,as,dr,XF,cl,qa,fr,KF,Ga,ur,QF,sp,Dv=`vue
<script setup lang="ts">
/**
* Implement the custom directive
* Make sure the `onClick` method only gets triggered once when clicked many times quickly
* And you also need to support the debounce delay time option. e.g `v-debounce-click:ms`
*
*/
function debounce(fn, delay) {
let timeout
let count = 0
return (...args) => {
if (count === 0) {
count++
fn(...args)
}
clearTimeout(timeout)
timeout = setTimeout(() => {
fn(...args)
}, delay)
}
}
const VDebounceClick = {
mounted: (el, binding) => {
const { value, arg } = binding
el.addEventListener('click', debounce(value, arg))
}
}
function onClick() {
console.log('Only triggered once when clicked many times quickly')
}
</script>
<template>
<button v-debounce-click:200="onClick">Click on it many times quickly</button>
</template>
`,lp,rl,Ar,ns,Cr,ZF,yl,$a,mr,YF,ap,Ev=`vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
/**
* Implement the custom directive
* Make sure the list item text color changes to red when the `toggleTab` is toggled
*
*/
const VActiveStyle = {
mounted: (el, binding) => {
const [styles, fn] = binding.value
watchEffect(() => {
Object.keys(styles).map(key => (el.style[key] = fn() ? styles[key] : ''))
})
}
}
const list = [1, 2, 3, 4, 5, 6, 7, 8]
const activeTab = ref(0)
function toggleTab(index: number) {
activeTab.value = index
}
</script>
<template>
<ul>
<li
v-for="(item, index) in list"
:key="index"
v-active-style="[{ color: 'red' }, () => activeTab === index]"
@click="toggleTab(index)">
{{ item }}
</li>
</ul>
</template>
`,np,il,os,_r,op,hr,gr,se,pp,vv=`vue
<script setup lang="ts">
import { ref } from 'vue'
/**
* Implement a custom directive
* Create a two-way binding on a form input element
*
*/
const VOhModel = {
mounted: (el, binding) => {
el.value = binding.value
el.addEventListener('input', () => {
value.value = el.value
})
}
}
const value = ref('Hello Vue.js')
</script>
<template>
<input v-oh-model="value" type="text" />
<p>{{ value }}</p>
</template>
`,Fp,Dl,Na,wr,le,El,Ja,kr,ae,ep,dv=`vue
<script setup lang="ts">
const click1 = () => {
console.log('click1')
}
const click2 = e => {
console.log('click2')
}
</script>
<template>
<div @click="click1()">
<div @click.stop="click2()">click me</div>
</div>
</template>
`,tp,vl,br,ps,Br,ne,dl,Xa,Pr,oe,cp,fv=`vue
<template>
<!-- Add key modifiers made this will fire even if Alt or Shift is also pressed -->
<button @click.alt="onClick1" @click.shift="onClick1">A</button>
<!-- Add key modifiers made this will only fire when Shift and no other keys are pressed -->
<button @click.shift.exact="onCtrlClick">A</button>
<!-- Add key modifiers made this will only fire when no system modifiers are pressed -->
<button @click.exact="onClick2">A</button>
</template>
<script setup>
function onClick1() {
console.log('onClick1')
}
function onCtrlClick() {
console.log('onCtrlClick')
}
function onClick2() {
console.log('onClick2')
}
</script>
`,rp,fl,xr,Fs,jr,pe,ul,Ka,Ir,Fe,Al,Qa,Vr,ee,h,Hr,yp,Sr,Mr,ip,Rr,Or,te,Dp,uv=`vue
<script setup>
import { ref, nextTick } from 'vue'
const count = ref(0)
const counter = ref(null)
async function increment() {
count.value++
/**
* DOM is not yet updated, how can we make sure that the DOM gets updated
* Make the output be true
*/
await nextTick()
console.log(+counter.value.textContent === 1)
}
</script>
<template>
<button ref="counter" @click="increment">
{{ count }}
</button>
</template>
`,Ep,Cl,Lr,es,Tr,ce,ml,Za,Ur,re,_l,Ya,zr,ye,sn,ln,Wr,ie,hl,an,qr,De,gl,nn,Gr,Ee,on,pn,$r,ve,wl,Fn,Nr,de,vp,Av=`vue
<script setup lang="ts">
import { reactive, isReactive, toRaw, markRaw } from 'vue'
const state = { count: 1 }
const reactiveState = toRaw(reactive(state))
/**
* Modify the code so that we can make the output be true.
*/
console.log(reactiveState === state)
/**
* Modify the code so that we can make the output be false.
*/
const info = markRaw({ count: 1 })
const reactiveInfo = reactive(info)
console.log(isReactive(reactiveInfo))
</script>
<template>
<div>
<p>
{{ reactiveState.count }}
</p>
</div>
</template>
`,dp,en,Jr,fe,ts,fp,cs,Xr,Kr,up,rs,Qr,ue,kl,tn,Zr,Ae,cn,rn,Yr,Ce,bl,yn,sy,me,Dn,En,ly,_e,Bl,vn,ay,he,Pl,dn,ny,ge,fn,un,oy,we,xl,An,py,ke,Cn,mn,Fy,be,jl,_n,ey,Be,hn,gn,ty,Pe,Il,wn,cy,xe,Vl,kn,ry,je,bn,Bn,yy,Ie,Hl,Pn,iy,Ve,Sl,xn,Dy,He,Ap,Cv=`vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
/**
* Implement the until function
*/
function until(initial) {
function toBe(value) {
return new Promise(resolve => {
initial.value = value
resolve(initial.value)
})
}
return {
toBe
}
}
async function increase() {
count.value = 0
setInterval(() => {
count.value++
}, 1000)
await until(count).toBe(3)
console.log(count.value === 3) // Make sure the output is true
}
</script>
<template>
<p @click="increase">Increase</p>
</template>
`,Cp,Ml,jn,Ey,Se,Rl,In,vy,Me,mp,mv=`vue
<script setup lang="ts">
import { onMounted, defineCustomElement } from 'vue'
/**
* Implement the code to create a custom element.
* Make the output of page show "Hello Vue.js".
*/
const VueJs = defineCustomElement({
props: { message: String },
template: '<span>{{message}}</span>'
})
customElements.define('vue-js', VueJs)
onMounted(() => {
document.getElementById('app')!.innerHTML = '<vue-js message="Hello Vue.js"></vue-js>'
})
</script>
<template>
<div id="app"></div>
</template>
`,_p,Ol,dy,ys,fy;return{c(){v=p("p"),A=c("\u6700\u8FD1\u505A\u4E86\u4E00\u4E0B\u8FD9\u4E2A"),u=p("a"),is=c("Vue.js \u6311\u6218"),d=c("\uFF0C\u5176\u4E2D\u7684\u9898\u76EE\u5927\u591A\u51FA\u81EA"),f=p("a"),Tl=c("Vue3 \u6587\u6863"),Ke=c(`\uFF0C\u90FD\u4E0D\u662F\u5F88\u96BE\uFF0C\u4F46\u6D89\u53CA\u5230\u7684\u77E5\u8BC6\u70B9
\u6BD4\u8F83\u7410\u788E\uFF0C\u7528\u6765\u590D\u4E60\u633A\u597D\u7684\u3002`),gp=y(),w=p("p"),Qe=c("\u7136\u540E\u8FD9\u662F\u6211\u7684\u7B54\u6848\u548C\u9898\u76EE\u6D89\u53CA\u5230\u7684\u77E5\u8BC6\u70B9\uFF0C\u9664\u4E86"),Ul=p("a"),Ze=c("\u9F20\u6807\u6307\u9488"),Ye=c("\u8FD9\u4E2A\u90E8\u5206\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\u4E4B\u5916\uFF0C\u5176\u4ED6\u90FD\u90FD\u901A\u8FC7\u4E86\uFF0C\u7136\u540E\u8FD9\u4E2A\u9F20\u6807\u6307\u9488\u4E3A\u4EC0\u4E48\u6CA1\u901A\u8FC7\u5355\u5143\u6D4B\u8BD5\u6211\u4E5F\u6CA1\u5F04\u660E\u767D\uFF0C\u8BD5\u4E86\u4E0B\u5176\u4ED6\u4EBA\u7684\u4E5F\u901A\u8FC7\u4E0D\u4E86\uFF0C\u597D\u5947\u602A\u2026\u2026"),wp=y(),zl=p("p"),st=c("\u8FD9\u91CC\u7701\u53BB\u90E8\u5206\u9898\u76EE\uFF0C\u4E3B\u8981\u5199\u7B54\u6848\u3002"),kp=y(),Ds=p("h2"),Wl=p("a"),lt=c("Built-ins"),bp=y(),Es=p("h3"),ql=p("a"),at=c("DOM \u4F20\u9001\u95E8"),Bp=y(),Gl=p("p"),nt=c("Vue.js \u63D0\u4F9B\u4E86\u4E00\u4E2A\u5185\u7F6E\u7EC4\u4EF6\uFF0C\u5C06\u5176\u63D2\u69FD\u5185\u5BB9\u6E32\u67D3\u5230\u53E6\u4E00\u4E2A DOM\uFF0C\u6210\u4E3A\u8BE5 DOM \u7684\u4E00\u90E8\u5206\u3002"),Pp=y(),Mn=new D(!1),Rn=y(),vs=p("p"),ot=c("\u76F8\u5173\u77E5\u8BC6\u70B9 \uFF1A"),k=p("a"),pt=c("Teleport | Vue.js"),xp=y(),$l=p("blockquote"),ds=p("p"),Ft=c("\u6709\u65F6\u7EC4\u4EF6\u6A21\u677F\u7684\u4E00\u90E8\u5206\u903B\u8F91\u4E0A\u5C5E\u4E8E\u8BE5\u7EC4\u4EF6\uFF0C\u800C\u4ECE\u6280\u672F\u89D2\u5EA6\u6765\u770B\uFF0C\u6700\u597D\u5C06\u6A21\u677F\u7684\u8FD9\u4E00\u90E8\u5206\u79FB\u52A8\u5230 DOM \u4E2D Vue app \u4E4B\u5916\u7684\u5176\u4ED6\u4F4D\u7F6E"),Nl=p("sup"),fs=p("a"),et=c("1"),tt=c("\u3002"),jp=y(),b=p("ul"),On=p("li"),ct=c("\u6709\u70B9\u50CF\u4F20\u9001\u95E8\uFF0C\u5C06\u76F8\u5E94\u5143\u7D20\u6E32\u67D3\u5230\u5236\u5B9A\u4F4D\u7F6E"),rt=y(),Ln=p("li"),yt=c("to \u540E\u9762\u5199 css selector"),Ip=y(),us=p("h3"),Jl=p("a"),it=c("\u4F18\u5316\u6027\u80FD\u7684\u6307\u4EE4"),Vp=y(),Xl=p("p"),Dt=c("Vue.js \u63D0\u4F9B\u4E86\u4E00\u4E2A\u6307\u4EE4\uFF0C\u4EE5\u4FBF\u53EA\u6E32\u67D3\u4E00\u6B21\u5143\u7D20\u548C\u7EC4\u4EF6\uFF0C\u5E76\u4E14\u8DF3\u8FC7\u4EE5\u540E\u7684\u66F4\u65B0\u3002"),Hp=y(),Tn=new D(!1),Un=y(),As=p("p"),Et=c("\u76F8\u5173\u77E5\u8BC6\u70B9\uFF1A"),zn=p("code"),vt=c("Vue-\u4E8B\u4EF6\u4FEE\u9970\u7B26"),Sp=y(),Cs=p("h2"),Kl=p("a"),dt=c("CSS Features"),Mp=y(),ms=p("h3"),Ql=p("a"),ft=c("\u52A8\u6001 CSS"),Rp=y(),B=p("p"),ut=c("Vue \u5355\u6587\u4EF6\u7EC4\u4EF6 "),Wn=p("code"),At=c("