美文网首页
初识Vue.js

初识Vue.js

作者: 慵懒的阳光丶 | 来源:发表于2019-05-07 15:30 被阅读0次

    Vue.js 的官方文档中是这样介绍它的。

    简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 简单小巧是指 Vue.js 压缩后大小仅有 17k。所谓渐进式(Progressive),就是你可以一步一步、有阶段性地来使用 Vue.js,不必一开始就使用所有的东西。这也正是开发者热爱 Vue.js的主要原因之一。
    使用 Vue.js 可以让 Web 开发变得简单, 同时也颠覆了传统前端开发模式。它提供了现代 Web 开发中常见的高级功能,比如:
    • 解辑视图与数据
    • 可复用的组件
    • 前端路由
    • 状态管理
    • 虚拟 DOM ( Virtual DOM)

    1.快速入门

    通过vue提供数据,在视图中进行展示,说明见注释

    <!DOCTYPE html>
    <html lang="en">
    <!--
            1.引入vue:<script src="https://unpkg.com/vue/dist/vue.js"></script>
            2.创建vue对象:
                new Vue({
                    el:"#vue_val",
                     data:{
                        message:"vue_day01"
                     }
                 })
            3.用插值表达式将vue对象的值插入到相应的标签中
         -->
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="vue_val">
            {{message}}
        </div>
        <script>
            new Vue({
                el: "#vue_val",
                data: {
                    message: "vue_day01"
                }
            })
        </script>
    </body>
    
    </html>
    

    个人理解:通过Vue对象中的el绑定dom元素(类似css选择器),完成了数据和视图的分离

    2.Vue对象中包含什么?

    上面的示例中我们看到了vue对象中有el和data,除了挂载对象和数据之外,还有methods,filters,生命周期方法等,后面会慢慢见到

    相关文章

      网友评论

          本文标题:初识Vue.js

          本文链接:https://www.haomeiwen.com/subject/ymueoqtx.html