美文网首页
初识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

    标签 : 前端框架、MVVM、Vue、 Vue.js是什么 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。...

  • Vue.js初识

    1.什么是Vue.js 是一个用来构建用户界面的框架,轻量级的MVVM框架(Model-View-ViewMode...

  • 初识Vue.js

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vu...

  • 初识vue.js

    什么是vue.js vue.js是一套构建用户界面的渐进式框架。个人观点,目前大型项目前后端分离已成为趋势,vue...

  • 初识Vue.js

    Vue.js作为当下最火的前端框架之一,相信每个前端工作者都想去尝试学习这优秀的框架吧,然我也不意外,可是由于前段...

  • 初识vue.js

    写在前面的: 第一天仅为一个很简单很入门的demo(仅一句输出): 解释:

  • 初识vue.js

    vue.js官网教程学习笔记和学习摘要 起步 安装 一个简单的方法,直接把一个vue.js引入你的HTML页面中,...

  • vue.js初识

    最近一个月参与公司后台管理系统的设计及开发工作,但发现一堆堆的表单实在让人头疼,此时才想到数据双向绑定是多么的重要...

  • 初识vue.js

    Vue是什么? Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时具有非常容易上手的API。 Vue.js...

  • 初识Vue.js

    Vue.js 的官方文档中是这样介绍它的。 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 简单小巧是指 ...

网友评论

      本文标题:初识Vue.js

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