3f:null 40:["$","title",null,{"children":"Vue3 | zq | Observable"}] 46:[] 44:{"id":"7a19a89a375bc1e1","slug":"vue3","title":"Vue3","thumbnail":"d750441d6ed432caf46db9a4f72e50ba27c890711ee8f2d7ce987a6674ea84a0","access_level":"public","create_time":"$D2021-05-14T06:05:29.230Z","update_time":"$D2021-05-14T08:29:32.218Z","view_time":null,"first_public_time":"$D2021-05-14T06:45:29.450Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":97,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vue3","cells":[{"id":0,"value":"md`# Vue3`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## createApp`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"app = html`${Vue.createApp({\n el:html`

`,\n data(){\n return {\n title:\"标题\",\n content:\"内容\"\n }\n },\n template:`

`\n}).mount(html`

`).$el\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"{\n const count = Vue.ref(1)\n const obj = Vue.reactive({ count })\n \n const button = html``\n button.addEventListener(\"click\",function(){\n count.value++;\n content.innerHTML = count.value;\n })\n \n const content = html`${obj.count}`\n return html`${button} ${content}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"{\n const { reactive, computed, watchEffect, watch, createApp } = Vue;\n const App = { \n template: ` {{ state.count }}`,\n setup() {\n const state = reactive({count: 10})\n function increment(e) {state.count++}\n watchEffect(() => {console.log('count改变', state.count);})\n return {\n state,\n increment,\n }\n }\n }\n const container = html`

`\n createApp(App).mount(container)\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"Vue = require('vue@3.0.11/dist/vue.global.js').catch(() => window[\"Vue\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"