BREAKING CHANGE: `createApp` API has been adjusted.
- `createApp()` now accepts the root component, and optionally a props
object to pass to the root component.
- `app.mount()` now accepts a single argument (the root container)
- `app.unmount()` no longer requires arguments.
New behavior looks like the following:
``` js
const app = createApp(RootComponent)
app.mount('#app')
app.unmount()
```
}
const root1 = nodeOps.createElement('div')
- createApp().mount(Comp, root1)
+ createApp(Comp).mount(root1)
expect(serializeInner(root1)).toBe(`0`)
// mount with props
const root2 = nodeOps.createElement('div')
- const app2 = createApp()
- app2.mount(Comp, root2, { count: 1 })
+ const app2 = createApp(Comp, { count: 1 })
+ app2.mount(root2)
expect(serializeInner(root2)).toBe(`1`)
// remount warning
const root3 = nodeOps.createElement('div')
- app2.mount(Comp, root3)
+ app2.mount(root3)
expect(serializeInner(root3)).toBe(``)
expect(`already been mounted`).toHaveBeenWarned()
})
}
const root = nodeOps.createElement('div')
- const app = createApp()
- app.mount(Comp, root)
+ const app = createApp(Comp)
+ app.mount(root)
app.unmount(root)
expect(serializeInner(root)).toBe(``)
})
test('provide', () => {
- const app = createApp()
- app.provide('foo', 1)
- app.provide('bar', 2)
-
const Root = {
setup() {
// test override
}
}
+ const app = createApp(Root)
+ app.provide('foo', 1)
+ app.provide('bar', 2)
+
const root = nodeOps.createElement('div')
- app.mount(Root, root)
+ app.mount(root)
expect(serializeInner(root)).toBe(`3,2`)
})
test('component', () => {
- const app = createApp()
-
- const FooBar = () => 'foobar!'
- app.component('FooBar', FooBar)
- expect(app.component('FooBar')).toBe(FooBar)
-
- app.component('BarBaz', () => 'barbaz!')
-
- app.component('BarBaz', () => 'barbaz!')
- expect(
- 'Component "BarBaz" has already been registered in target app.'
- ).toHaveBeenWarnedTimes(1)
-
const Root = {
// local override
components: {
}
}
+ const app = createApp(Root)
+
+ const FooBar = () => 'foobar!'
+ app.component('FooBar', FooBar)
+ expect(app.component('FooBar')).toBe(FooBar)
+
+ app.component('BarBaz', () => 'barbaz!')
+
+ app.component('BarBaz', () => 'barbaz!')
+ expect(
+ 'Component "BarBaz" has already been registered in target app.'
+ ).toHaveBeenWarnedTimes(1)
+
const root = nodeOps.createElement('div')
- app.mount(Root, root)
+ app.mount(root)
expect(serializeInner(root)).toBe(`<div>foobar!barbaz-local!</div>`)
})
test('directive', () => {
- const app = createApp()
-
const spy1 = jest.fn()
const spy2 = jest.fn()
const spy3 = jest.fn()
- const FooBar = { mounted: spy1 }
- app.directive('FooBar', FooBar)
- expect(app.directive('FooBar')).toBe(FooBar)
-
- app.directive('BarBaz', {
- mounted: spy2
- })
-
- app.directive('BarBaz', {
- mounted: spy2
- })
- expect(
- 'Directive "BarBaz" has already been registered in target app.'
- ).toHaveBeenWarnedTimes(1)
-
const Root = {
// local override
directives: {
}
}
+ const app = createApp(Root)
+
+ const FooBar = { mounted: spy1 }
+ app.directive('FooBar', FooBar)
+ expect(app.directive('FooBar')).toBe(FooBar)
+
+ app.directive('BarBaz', {
+ mounted: spy2
+ })
+
+ app.directive('BarBaz', {
+ mounted: spy2
+ })
+ expect(
+ 'Directive "BarBaz" has already been registered in target app.'
+ ).toHaveBeenWarnedTimes(1)
+
const root = nodeOps.createElement('div')
- app.mount(Root, root)
+ app.mount(root)
expect(spy1).toHaveBeenCalled()
expect(spy2).not.toHaveBeenCalled()
expect(spy3).toHaveBeenCalled()
}
}
- const app = createApp()
+ const app = createApp(Comp)
app.mixin(mixinA)
app.mixin(mixinB)
).toHaveBeenWarnedTimes(1)
const root = nodeOps.createElement('div')
- app.mount(Comp, root)
+ app.mount(root)
expect(serializeInner(root)).toBe(`123`)
expect(calls).toEqual([
}
const PluginD: any = undefined
- const app = createApp()
- app.use(PluginA)
- app.use(PluginB, 1, 1)
- app.use(PluginC)
-
const Root = {
setup() {
const foo = inject('foo')
return () => `${foo},${bar}`
}
}
+
+ const app = createApp(Root)
+ app.use(PluginA)
+ app.use(PluginB, 1, 1)
+ app.use(PluginC)
+
const root = nodeOps.createElement('div')
- app.mount(Root, root)
+ app.mount(root)
expect(serializeInner(root)).toBe(`1,2`)
app.use(PluginA)
})
test('config.errorHandler', () => {
- const app = createApp()
-
const error = new Error()
const count = ref(0)
- const handler = (app.config.errorHandler = jest.fn(
- (err, instance, info) => {
- expect(err).toBe(error)
- expect((instance as any).count).toBe(count.value)
- expect(info).toBe(`render function`)
- }
- ))
+ const handler = jest.fn((err, instance, info) => {
+ expect(err).toBe(error)
+ expect((instance as any).count).toBe(count.value)
+ expect(info).toBe(`render function`)
+ })
const Root = {
setup() {
}
}
- app.mount(Root, nodeOps.createElement('div'))
+ const app = createApp(Root)
+ app.config.errorHandler = handler
+ app.mount(nodeOps.createElement('div'))
expect(handler).toHaveBeenCalled()
})
test('config.warnHandler', () => {
- const app = createApp()
let ctx: any
-
- const handler = (app.config.warnHandler = jest.fn(
- (msg, instance, trace) => {
- expect(msg).toMatch(`Component is missing template or render function`)
- expect(instance).toBe(ctx.proxy)
- expect(trace).toMatch(`Hello`)
- }
- ))
+ const handler = jest.fn((msg, instance, trace) => {
+ expect(msg).toMatch(`Component is missing template or render function`)
+ expect(instance).toBe(ctx.proxy)
+ expect(trace).toMatch(`Hello`)
+ })
const Root = {
name: 'Hello',
}
}
- app.mount(Root, nodeOps.createElement('div'))
+ const app = createApp(Root)
+ app.config.warnHandler = handler
+ app.mount(nodeOps.createElement('div'))
expect(handler).toHaveBeenCalledTimes(1)
})
const isNativeTag = jest.fn(tag => tag === 'div')
test('Component.name', () => {
- const app = createApp()
- Object.defineProperty(app.config, 'isNativeTag', {
- value: isNativeTag,
- writable: false
- })
-
const Root = {
name: 'div',
- setup() {
- return {
- count: ref(0)
- }
- },
render() {
return null
}
}
- app.mount(Root, nodeOps.createElement('div'))
- expect(
- `Do not use built-in or reserved HTML elements as component id: div`
- ).toHaveBeenWarned()
- })
+ const app = createApp(Root)
- test('Component.components', () => {
- const app = createApp()
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
+ app.mount(nodeOps.createElement('div'))
+ expect(
+ `Do not use built-in or reserved HTML elements as component id: div`
+ ).toHaveBeenWarned()
+ })
+
+ test('Component.components', () => {
const Root = {
components: {
div: () => 'div'
},
- setup() {
- return {
- count: ref(0)
- }
- },
render() {
return null
}
}
- app.mount(Root, nodeOps.createElement('div'))
+ const app = createApp(Root)
+ Object.defineProperty(app.config, 'isNativeTag', {
+ value: isNativeTag,
+ writable: false
+ })
+
+ app.mount(nodeOps.createElement('div'))
expect(
`Do not use built-in or reserved HTML elements as component id: div`
).toHaveBeenWarned()
})
test('Component.directives', () => {
- const app = createApp()
- Object.defineProperty(app.config, 'isNativeTag', {
- value: isNativeTag,
- writable: false
- })
-
const Root = {
directives: {
bind: () => {}
},
- setup() {
- return {
- count: ref(0)
- }
- },
render() {
return null
}
}
- app.mount(Root, nodeOps.createElement('div'))
+ const app = createApp(Root)
+ Object.defineProperty(app.config, 'isNativeTag', {
+ value: isNativeTag,
+ writable: false
+ })
+
+ app.mount(nodeOps.createElement('div'))
expect(
`Do not use built-in directive ids as custom directive id: bind`
).toHaveBeenWarned()
})
test('register using app.component', () => {
- const app = createApp()
+ const app = createApp({
+ render() {}
+ })
+
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
- const Root = {
- setup() {
- return {
- count: ref(0)
- }
- },
- render() {
- return null
- }
- }
-
app.component('div', () => 'div')
- app.mount(Root, nodeOps.createElement('div'))
+ app.mount(nodeOps.createElement('div'))
expect(
`Do not use built-in or reserved HTML elements as component id: div`
).toHaveBeenWarned()
-import { createApp, getCurrentInstance, nodeOps } from '@vue/runtime-test'
+import { h, render, getCurrentInstance, nodeOps } from '@vue/runtime-test'
import { mockWarn } from '@vue/shared'
import { ComponentInternalInstance } from '../src/component'
mockWarn()
test('data', () => {
- const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
return null
}
}
- app.mount(Comp, nodeOps.createElement('div'))
+ render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.foo).toBe(1)
instanceProxy.foo = 2
expect(instance!.data.foo).toBe(2)
})
test('renderContext', () => {
- const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
return null
}
}
- app.mount(Comp, nodeOps.createElement('div'))
+ render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.foo).toBe(1)
instanceProxy.foo = 2
expect(instance!.renderContext.foo).toBe(2)
})
test('propsProxy', () => {
- const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
instanceProxy = this
}
}
- app.mount(Comp, nodeOps.createElement('div'))
+ render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.foo).toBe(1)
expect(instance!.propsProxy!.foo).toBe(1)
expect(() => (instanceProxy.foo = 2)).toThrow(TypeError)
})
test('public properties', () => {
- const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
instanceProxy = this
}
}
- app.mount(Comp, nodeOps.createElement('div'))
+ render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.$data).toBe(instance!.data)
expect(instanceProxy.$props).toBe(instance!.propsProxy)
expect(instanceProxy.$attrs).toBe(instance!.attrs)
})
test('sink', async () => {
- const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
instanceProxy = this
}
}
- app.mount(Comp, nodeOps.createElement('div'))
+ render(h(Comp), nodeOps.createElement('div'))
instanceProxy.foo = 1
expect(instanceProxy.foo).toBe(1)
expect(instance!.sink.foo).toBe(1)
})
test('has check', () => {
- const app = createApp()
let instanceProxy: any
const Comp = {
render() {},
instanceProxy = this
}
}
- app.mount(Comp, nodeOps.createElement('div'), { msg: 'hello' })
+ render(h(Comp, { msg: 'hello' }), nodeOps.createElement('div'))
// props
expect('msg' in instanceProxy).toBe(true)
describe('resolveAssets', () => {
test('should work', () => {
- const app = createApp()
const FooBar = () => null
const BarBaz = { mounted: () => null }
}
}
+ const app = createApp(Root)
const root = nodeOps.createElement('div')
- app.mount(Root, root)
+ app.mount(root)
expect(component1!).toBe(FooBar)
expect(component2!).toBe(FooBar)
expect(component3!).toBe(FooBar)
})
test('not exist', () => {
- const app = createApp()
const Root = {
setup() {
resolveComponent('foo')
}
}
+ const app = createApp(Root)
const root = nodeOps.createElement('div')
- app.mount(Root, root)
+ app.mount(root)
expect('Failed to resolve component: foo').toHaveBeenWarned()
expect('Failed to resolve directive: bar').toHaveBeenWarned()
})
test('resolve dynamic component', () => {
- const app = createApp()
const dynamicComponents = {
foo: () => 'foo',
bar: () => 'bar',
}
}
}
+
+ const app = createApp(Root)
const root = nodeOps.createElement('div')
- app.mount(Root, root)
+ app.mount(root)
expect(foo).toBe(dynamicComponents.foo)
expect(bar).toBe(dynamicComponents.bar)
expect(baz).toBe(dynamicComponents.baz)
component(name: string, component: Component): this
directive(name: string): Directive | undefined
directive(name: string, directive: Directive): this
- mount(
- rootComponent:
- | Component
- // for compatibility with defineComponent() return types
- | { new (): ComponentPublicInstance<any, any, any, any, any> },
- rootContainer: HostElement | string,
- rootProps?: Data
- ): ComponentPublicInstance
+ mount(rootContainer: HostElement | string): ComponentPublicInstance
unmount(rootContainer: HostElement | string): void
provide<T>(key: InjectionKey<T> | string, value: T): this
+ rootComponent: Component
+ rootContainer: HostElement | null
}
export interface AppConfig {
}
}
+export type CreateAppFunction<HostElement> = (
+ rootComponent:
+ | Component
+ // for compatibility with defineComponent() return types
+ | { new (): ComponentPublicInstance<any, any, any, any, any> },
+ rootProps?: Data | null
+) => App<HostElement>
+
export function createAppAPI<HostNode, HostElement>(
render: RootRenderFunction<HostNode, HostElement>
-): () => App<HostElement> {
- return function createApp(): App {
+): CreateAppFunction<HostElement> {
+ return function createApp(
+ rootComponent: Component,
+ rootProps?: Data | null
+ ): App {
const context = createAppContext()
const installedPlugins = new Set()
let isMounted = false
const app: App = {
+ rootComponent,
+ rootContainer: null,
+
get config() {
return context.config
},
return app
},
- mount(
- rootComponent: Component,
- rootContainer: HostElement,
- rootProps?: Data | null
- ): any {
+ mount(rootContainer: HostElement): any {
if (!isMounted) {
if (rootProps != null && !isObject(rootProps)) {
__DEV__ &&
render(vnode, rootContainer)
isMounted = true
+ app.rootContainer = rootContainer
return vnode.component!.proxy
} else if (__DEV__) {
warn(
}
},
- unmount(rootContainer: HostElement) {
- render(null, rootContainer)
+ unmount() {
+ if (isMounted) {
+ render(null, app.rootContainer!)
+ } else if (__DEV__) {
+ warn(`Cannot unmount an app that is not mounted.`)
+ }
},
provide(key, value) {
// Types -----------------------------------------------------------------------
-export { App, AppConfig, AppContext, Plugin } from './apiCreateApp'
+export {
+ App,
+ AppConfig,
+ AppContext,
+ Plugin,
+ CreateAppFunction
+} from './apiCreateApp'
export { VNode, VNodeTypes, VNodeProps } from './vnode'
export {
Component,
import { pushWarningContext, popWarningContext, warn } from './warning'
import { invokeDirectiveHook } from './directives'
import { ComponentPublicInstance } from './componentProxy'
-import { App, createAppAPI } from './apiCreateApp'
+import { createAppAPI, CreateAppFunction } from './apiCreateApp'
import {
SuspenseBoundary,
queueEffectWithSuspense,
options: RendererOptions<HostNode, HostElement>
): {
render: RootRenderFunction<HostNode, HostElement>
- createApp: () => App<HostElement>
+ createApp: CreateAppFunction<HostElement>
} {
type HostVNode = VNode<HostNode, HostElement>
type HostVNodeChildren = VNodeChildren<HostNode, HostElement>
import {
- createApp,
h,
+ render,
nextTick,
defineComponent,
vModelDynamic,
this.value = value
}
-let app: any, root: any
+let root: any
beforeEach(() => {
- app = createApp()
root = document.createElement('div') as any
})
]
}
})
- app.mount(component, root)
+ render(h(component), root)
- const input = root.querySelector('input')
+ const input = root.querySelector('input')!
const data = root._vnode.component.data
input.value = 'foo'
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const input = root.querySelector('textarea')
const data = root._vnode.component.data
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const number = root.querySelector('.number')
const trim = root.querySelector('.trim')
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const input = root.querySelector('input')
const data = root._vnode.component.data
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const input = root.querySelector('input')
const data = root._vnode.component.data
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const input = root.querySelector('input')
const data = root._vnode.component.data
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const foo = root.querySelector('.foo')
const bar = root.querySelector('.bar')
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const foo = root.querySelector('.foo')
const bar = root.querySelector('.bar')
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const input = root.querySelector('select')
const foo = root.querySelector('option[value=foo]')
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const input = root.querySelector('select')
const foo = root.querySelector('option[value=foo]')
nextTick,
VNode
} from '@vue/runtime-core'
-import { createApp, vShow } from '@vue/runtime-dom'
+import { render, vShow } from '@vue/runtime-dom'
const withVShow = (node: VNode, exp: any) =>
withDirectives(node, [[vShow, exp]])
-let app: any, root: any
+let root: any
beforeEach(() => {
- app = createApp()
- root = document.createElement('div') as any
+ root = document.createElement('div')
})
describe('runtime-dom: v-show directive', () => {
return [withVShow(h('div'), this.value)]
}
})
- app.mount(component, root)
+ render(h(component), root)
const $div = root.querySelector('div')
return [withVShow(h('div'), this.value)]
}
})
- app.mount(component, root)
+ render(h(component), root)
const $div = root.querySelector('div')
return [withVShow(h('div'), this.value)]
}
})
- app.mount(component, root)
+ render(h(component), root)
const $div = root.querySelector('div')
const data = root._vnode.component.data
]
}
})
- app.mount(component, root)
+ render(h(component), root)
const $div = root.querySelector('div')
const data = root._vnode.component.data
import {
createRenderer,
warn,
- App,
- RootRenderFunction
+ RootRenderFunction,
+ CreateAppFunction
} from '@vue/runtime-core'
import { nodeOps } from './nodeOps'
import { patchProp } from './patchProp'
// use explicit type casts here to avoid import() calls in rolled-up d.ts
export const render = baseRender as RootRenderFunction<Node, Element>
-export const createApp = (): App<Element> => {
- const app = baseCreateApp()
+export const createApp: CreateAppFunction<Element> = (...args) => {
+ const app = baseCreateApp(...args)
if (__DEV__) {
// Inject `isNativeTag`
})
}
- const { mount, unmount } = app
- app.mount = (component, container, props): any => {
+ const { mount } = app
+ app.mount = (container): any => {
if (isString(container)) {
container = document.querySelector(container)!
if (!container) {
return
}
}
+ const component = app.rootComponent
if (
__RUNTIME_COMPILE__ &&
!isFunction(component) &&
}
// clear content before mounting
container.innerHTML = ''
- return mount(component, container, props)
- }
-
- app.unmount = container => {
- if (isString(container)) {
- container = document.querySelector(container)!
- if (!container) {
- __DEV__ &&
- warn(`Failed to unmount app: mount target selector returned null.`)
- return
- }
- }
- unmount(container)
+ return mount(container)
}
return app
createRenderer,
VNode,
RootRenderFunction,
- App
+ CreateAppFunction
} from '@vue/runtime-core'
import { nodeOps, TestNode, TestElement } from './nodeOps'
import { patchProp } from './patchProp'
})
export const render = baseRender as RootRenderFunction<TestNode, TestElement>
-export const createApp = baseCreateApp as () => App<TestElement>
+export const createApp = baseCreateApp as CreateAppFunction<TestElement>
// convenience for one-off render validations
export function renderToString(vnode: VNode) {
}
}
}
- createApp().mount(App, container)
+ createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
}
}
}
- createApp().mount(App, container)
+ createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
}
}
}
- createApp().mount(App, container)
+ createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
const App = {
template: `<div v-if>`
}
- createApp().mount(App, container)
+ createApp(App).mount(container)
expect(
`Template compilation error: Element is missing end tag`
).toHaveBeenWarned()
})
it('should support custom element', () => {
- const app = createApp()
- const container = document.createElement('div')
- const App = {
+ const app = createApp({
template: '<custom></custom>'
- }
+ })
+ const container = document.createElement('div')
app.config.isCustomElement = tag => tag === 'custom'
- app.mount(App, container)
+ app.mount(container)
expect(container.innerHTML).toBe('<custom></custom>')
})
it('should support using element innerHTML as template', () => {
- const app = createApp()
- const container = document.createElement('div')
- container.innerHTML = '{{msg}}'
- const App = {
+ const app = createApp({
data: {
msg: 'hello'
}
- }
- app.mount(App, container)
+ })
+ const container = document.createElement('div')
+ container.innerHTML = '{{msg}}'
+ app.mount(container)
expect(container.innerHTML).toBe('hello')
})
})
<script>
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
-const App = {
- data: {
+Vue.createApp({
+ data: () => ({
branches: ['master', 'sync'],
currentBranch: 'master',
commits: null
- },
+ }),
created() {
this.fetchData()
return v.replace(/T|Z/g, ' ')
}
}
-}
-
-Vue.createApp().mount(App, '#demo')
+}).mount('#demo')
</script>
<style>
</div>
<!-- App script -->
<script>
-const App = {
+Vue.createApp({
components: {
DemoGrid
},
- data: {
+ data: () => ({
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
- }
-}
-
-Vue.createApp().mount(App, '#demo')
+ })
+}).mount('#demo')
</script>
<style>
<script>
const delay = window.location.hash === '#test' ? 16 : 300
-const App = {
- data: {
+Vue.createApp({
+ data: () => ({
input: '# hello'
- },
+ }),
computed: {
compiledMarkdown() {
return marked(this.input, { sanitize: true })
this.input = e.target.value
}, delay)
}
-}
-
-Vue.createApp().mount(App, '#editor')
+}).mount('#editor')
</script>
<style>
{ label: 'E', value: 100 },
{ label: 'F', value: 100 }
]
-const App = {
+
+Vue.createApp({
components: {
Polygraph
},
- data: {
+ data: () => ({
newLabel: '',
stats: globalStats
- },
+ }),
methods: {
add(e) {
e.preventDefault()
}
}
}
-}
-
-Vue.createApp().mount(App, '#demo')
+}).mount('#demo')
</script>
<style>
}
}
-const App = {
+Vue.createApp({
// app initial state
- data: {
+ data: () => ({
todos: todoStorage.fetch(),
newTodo: '',
editedTodo: null,
visibility: 'all'
- },
+ }),
// watch todos change for localStorage persistence
watch: {
}
}
}
-}
-
-Vue.createApp().mount(App, '#app')
+}).mount('#app')
</script>
</ul>
<script>
-const App = {
- components: {
- TreeItem
- },
- data: {
- treeData: {
- name: 'My Tree',
+const treeData = {
+ name: 'My Tree',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' },
+ {
+ name: 'child folder',
children: [
+ {
+ name: 'child folder',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' }
+ ]
+ },
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
- {
- name: 'child folder',
- children: [
- { name: 'hello' },
- { name: 'wat' }
- ]
- },
{ name: 'hello' },
- { name: 'wat' },
- {
- name: 'child folder',
- children: [
- { name: 'hello' },
- { name: 'wat' }
- ]
- }
+ { name: 'wat' }
]
}
]
}
- }
+ ]
}
-Vue.createApp().mount(App, '#demo')
+Vue.createApp({
+ components: {
+ TreeItem
+ },
+ data: () => ({
+ treeData
+ })
+}).mount('#demo')
</script>
<style>
const formatDate = v => v.replace(/T|Z/g, ' ')
-const App = {
+createApp({
setup() {
const currentBranch = ref('master')
const commits = ref(null)
formatDate
}
}
-}
-
-createApp().mount(App, '#demo')
+}).mount('#demo')
</script>
<style>
</div>
<!-- App script -->
<script>
-const App = {
+Vue.createApp({
components: {
DemoGrid
},
- data: {
+ data: () => ({
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
- }
-}
-
-Vue.createApp().mount(App, '#demo')
+ })
+}).mount('#demo')
</script>
<style>
const delay = window.location.hash === '#test' ? 16 : 300
const { ref, computed } = Vue
-const App = {
+Vue.createApp({
setup() {
const input = ref('# hello')
const output = computed(() => marked(input.value, { sanitize: true }))
update
}
}
-}
-
-Vue.createApp().mount(App, '#editor')
+}).mount('#editor')
</script>
<style>
{ label: 'E', value: 100 },
{ label: 'F', value: 100 }
]
-const App = {
+
+createApp({
components: {
Polygraph
},
remove
}
}
-}
-
-createApp().mount(App, '#demo')
+}).mount('#demo')
</script>
<style>
return n === 1 ? 'item' : 'items'
}
-const App = {
+createApp({
setup () {
const state = reactive({
todos: todoStorage.fetch(),
}
}
}
-}
-
-createApp().mount(App, '#app')
+}).mount('#app')
</script>
</ul>
<script>
-const App = {
- components: {
- TreeItem
- },
- data: {
- treeData: {
- name: 'My Tree',
+const treeData = {
+ name: 'My Tree',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' },
+ {
+ name: 'child folder',
children: [
+ {
+ name: 'child folder',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' }
+ ]
+ },
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
- {
- name: 'child folder',
- children: [
- { name: 'hello' },
- { name: 'wat' }
- ]
- },
{ name: 'hello' },
- { name: 'wat' },
- {
- name: 'child folder',
- children: [
- { name: 'hello' },
- { name: 'wat' }
- ]
- }
+ { name: 'wat' }
]
}
]
}
- }
+ ]
}
-Vue.createApp().mount(App, '#demo')
+Vue.createApp({
+ components: {
+ TreeItem
+ },
+ data: () => ({
+ treeData
+ })
+}).mount('#demo')
</script>
<style>
template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
}
-const App = {
+Vue.createApp({
components: {
Item
},
}
}
}
-}
-
-Vue.createApp().mount(App, '#app')
+}).mount('#app')
</script>
<style>
</div>
<script>
-const App = {
+Vue.createApp({
components: { Modal },
- data: {
+ data: () => ({
showModal: false
- }
-}
-Vue.createApp().mount(App, '#app')
+ })
+}).mount('#app')
</script>
<style>
projects / thirdparty / vuejs / core.git / commitdiff
