发表于： 2021-08-02 20:50:41

1 1780

今天完成的事情：学习了 Vue ；；


明天计划的事情：继续搞下 Vue


收获：

Vue就像 bootscript框架一样，也可直接引入页面中去；在 HTML 页面中引入 Vue 的 JS 文件：

<script src="https://unpkg.com/vue@next"></script>
HTML：

<body>

    <div id="hello-vue" class="demo">
        {{ message }}
    </div>

</body>

JS：

<script>
    const HelloVueApp = {
        data() {
            return {
                message: '欢迎来到我的世界~！'
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')

</script>

理解：mount('#hello-vue')将Vue 应用HelloVueApp 挂载到 <div id="hello-vue"></div>中；

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。



data选项：

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

HTML：

<div id="app" class="demo"></div>

JS：

<script>
    const app = Vue.createApp({
        data() {
            return { count: 4 }
        }
    })

    const vm = app.mount('#app')

    document.write(vm.$data.count) // => 4

    document.write("<br>")


    document.write(vm.count)       // => 4
    document.write("<br>")

    // 修改 vm.count 的值也会更新 $data.count
    vm.count = 6
    document.write(vm.$data.count) // => 6

    document.write("<br>")


    // 反之亦然
    vm.$data.count = 7
    document.write(vm.count) // => 7

</script>



上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1