shershen08/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>

    <!-- vue -->
    <div id="app"></div>

    <!-- portals -->
    <div id="wrapper"></div>

<script src="http://unpkg.com/vue@next"></script>

<script>
  // 1 createApp syntax
  const { createApp, ref } = Vue;

  const App = {

    // 2 data is a function
    data: () => ({
      someValue: false
    }),

    setup(props, ctx) {
      const name = ref("Code");

      setTimeout(() => {
        name.value = 'chrysalis'
      }, 1000)

      return { name };

    },
    // 3 - multy-root
    template: `
        <div></div>
        <h1>
        Hello {{ name }} !
        --
        someValue: {{someValue}}

          <teleport to="#wrapper">
              <p v-if="true">i am in #wrapper</p>
          </teleport>
        </h1>`,

    // 4 - explicit emit
    emits: [ 'NAME_EVENT', 'remove' ]

    // P ------> C
    // props: {
    //   foo: {
    //     default: 'bar',
    //     type: String
    //   }
    // }
    // this.$emit(NAME_EVENT, {

    // })
    // P <------ C
  };

  //
  createApp(App).mount("#app");
</script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	</head>
	<body>

	<!-- vue -->
	<div id="app"></div>

	<!-- portals -->
	<div id="wrapper"></div>

	<script src="http://unpkg.com/vue@next"></script>

	<script>
	// 1 createApp syntax
	const { createApp, ref } = Vue;

	const App = {

	// 2 data is a function
	data: () => ({
	someValue: false
	}),

	setup(props, ctx) {
	const name = ref("Code");

	setTimeout(() => {
	name.value = 'chrysalis'
	}, 1000)

	return { name };

	},
	// 3 - multy-root
	template: `
	<div></div>
	<h1>
	Hello {{ name }} !
	--
	someValue: {{someValue}}

	<teleport to="#wrapper">
	<p v-if="true">i am in #wrapper</p>
	</teleport>
	</h1>`,

	// 4 - explicit emit
	emits: [ 'NAME_EVENT', 'remove' ]

	// P ------> C
	// props: {
	// foo: {
	// default: 'bar',
	// type: String
	// }
	// }
	// this.$emit(NAME_EVENT, {

	// })
	// P <------ C
	};

	//
	createApp(App).mount("#app");
	</script>
	</body>
	</html>