一 vue的定位

(1)Vue.js是一个构建数据驱动的 web 界面的库。

(2)Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

(3)Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。

(4)在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

二 响应的数据绑定

通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必像jquery与 DOM 更新搅在一起。这种思想可以概括为数据驱动的视图,具体用下图展示

用程序说明上图的意义,如下:(绑定 DOM 文本到数据)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue基础理论</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test"> <!--视图View-->

            {{name}}

        </div>

        <script type="text/javascript">

            var datas={    //数据Model

                name:"lili"

            };

            var myVue = new Vue({   //vue库,连接View和Model

                el:".test",

                data:datas

            })

        </script>

    </body>

</html>

注意我们不需要撰写任何 DOM 操作代码：被绑定增强的 HTML 模板是底层数据状态的声明式的映射，数据不过是普通 JavaScript 对象。我们的视图完全由数据驱动。

上面的程序仅仅代表绑定绑定 DOM 文本到数据,其实还存在绑定绑定 DOM 结构到数据,程序如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue基础理论--绑定 DOM 结构 到数据</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test"> <!--视图View-->

            <p v-if="isShow">

                我是视图View

            </p>

        </div>

        <script type="text/javascript">

            var datas={    //数据Model

                isShow:true

            };

            var myVue = new Vue({   //vue库,连接View和Model

                el:".test",

                data:datas

            })

        </script>

    </body>

</html>

上面程序是用v-if指令控制p标签(DOM结构)的显示与否

三 组合的视图组件

组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：

一般使用了组件的程序结构大概如下:

<div id="app">

  <app-nav></app-nav>

  <app-view>

    <app-sidebar></app-sidebar>

    <app-content></app-content>

  </app-view>

</div>

上面程序仔细一看,很像新出的HTML5里面的自定义元素,但是vue组件和自定义组件的区别是:

(1)自定义元素规范仍然远未完成，并且多数浏览器并未支持。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js 组件也可以放在原生自定义元素之内。

(2)Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。

总之:组件系统是用 Vue.js 构建大型应用的基础.

Vue基础理论的更多相关文章

  1. 【面试问题】—— 2019.3月前端面试之JS原理&CSS基础&Vue框架

    前言:三月中旬面试了两家公司,一家小型公司只有面试,另一家稍大型公司笔试之后一面定夺.笔试部分属于基础类型,网上的复习资料都有. 面试时两位面试官都有考到一些实际工作中会用到,但我还没接触过的知识点. ...

  2. 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  3. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  4. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  7. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  8. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  9. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

随机推荐

  1. 利用闭包向post回调函数传参数

    最近在闲逛XX站的时候,打算搞个破坏,试试有多少人还是用初始密码登陆.比较懒,所以直接打开控制台来写. 所以问题可以描述为: 向后端不断的post数据,id从1~5000自增,后端会根据情况来返回值r ...

  2. LintCode-- Remove Linked List Elements

    Remove all elements from a linked list of integers that have valueval. 样例 Given 1->2->3->3- ...

  3. [转]SharePoint开发中可能用到的各种Context（上下文）

    SharePoint是一个B/S结构的产品,所以在开发过程中会使用到各种各样的上下文(Context)信息,借此机会来总结一下.特别是Javascript的Ctx非常实用,这里记录一下! 一.Http ...

  4. D3D11中的MSAA

    这两年我的工作都转到了D3D11,目前新出硬件几乎全部支持此标准,加上D3D11接口清晰,概念直观,等到windows7普及,想必未来都是D3D11的天下.最近时间较空,我陆续开始写些基础文章,希望对 ...

  5. zepto - reduce

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce var ss ...

  6. shell 和awk性能对比

    time for ((i=0;i<10000;i++)) do ((sum+=i)); done real    0m0.086suser    0m0.079ssys    0m0.007s ...

  7. POJ 3345 Bribing FIPA 树形DP

    题目链接: POJ 3345 Bribing FIPA 题意: 一个国家要参加一个国际组织,  需要n个国家投票,  n个国家中有控制和被控制的关系, 形成了一颗树. 比如: 国家C被国家B控制, 国 ...

  8. Hadoop第13周练习—HBase作业

    1    :举例子说明HBase相对简单 1.1 1.2     回答 2    :设计HBase存储站内短信 2.1 2.2     回答 书面作业1:举例子说明HBase相对简单 请举出一例子,使 ...

  9. 推荐35个新鲜出炉的响应式 Web 设计实例

    响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...

  10. JS&CSS文件请求合并及压缩处理研究（一）

    在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...