25:["$","title",null,{"children":"Vue.js | Momo | Observable"}] 49:[] 29:{"id":"c087d40e8df9f8a2","slug":null,"title":"Vue.js","thumbnail":"8f6b3ce4fd685e14d3706004388223487e7c9f3d92f4a800e4bed5d2465a6004","access_level":"public","create_time":"$D2023-06-13T05:07:30.552Z","update_time":"$D2023-10-18T05:47:55.593Z","view_time":null,"first_public_time":"$D2023-06-13T05:07:30.552Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9bae029e758c46f6","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":403,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"63f207d190d71b00","login":"baotlake","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/0eb2840e8ef41835a2f51de7cd8c5fbdd60db2f081419e50ef0bfb28124b69d9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vue.js","cells":[{"id":0,"value":"# Vue.js\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"Vue = await import('https://unpkg.com/vue@3/dist/vue.esm-browser.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Template Syntax\n\n```html\n

Message: {{ msg }}

Using v-html directive:

\n\n

Attribute Bindings

shorthand

\n\n

\n```\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"

Text Interpolation

\n Message: {{ msg }}\n

Raw HTML

\n \n

\n    Attribute Bindings
\n    \n    \n    Dynamically Binding Multiple Attributes
\n    \n

\n    Using JavaScript Expressions
\n    {{ number + 1 }}\n    {{ ok ? 'YES' : 'NO' }}\n    {{ message.split('').reverse().join('') }}\n    ${'`list-${id}`'}\n    {{ btoa(Date.now()) }}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"{\n const { createApp } = Vue\n\n createApp({\n setup() {\n return {\n msg: \"hello\",\n rawHTML: \"red\",\n message: \"This is a message\",\n number: 0,\n ok: false,\n id: 101,\n dynamicId: 2,\n now: Date.now(),\n objectOfAttrs: {\n title: \"object-of-attrs-title\"\n }\n }\n },\n methods: {\n btoa(str) {\n return btoa(str)\n }\n }\n }).mount('#template-syntax-app')\n\n return md`▶️: Template syntax`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"## Reactivity Fundamentals\n\nIn Composition API, the recommended way to declare reactive state is using the `ref()` function\n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"

\n \n \n {{ proxy.text }}\n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"{\n const { createApp, ref, reactive } = Vue\n\n createApp({\n // `setup` is a special hook dedicated for the Composition API.\n setup() {\n const count = ref(0)\n const proxy = reactive({ count: 0, text: '' })\n // expose the ref to the template\n return { count, proxy }\n }\n }).mount('#reactivity-fundamentals-app')\n\n return md`▶️: Reactive Fundamentals`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"## Computed Properties\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"{\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"## [Component Registration](https://vuejs.org/guide/components/registration.html)\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"

\n \n \n \n

Component A

`\n };\n\n const ComponentB = {\n template: `

Component B

`\n };\n\n const ComponentC = {\n template: `

Component C

`\n };\n\n const app = createApp({});\n app\n .component(\"ComponentA\", ComponentA)\n .component(\"ComponentB\", ComponentB)\n .component(\"ComponentC\", ComponentC);\n\n app.mount('#component-registration-app')\n\n return md`▶️: Component Registration`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"## Props\n\nIn SFCs using `