Vue基础理论
一 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基础理论的更多相关文章
- 【面试问题】—— 2019.3月前端面试之JS原理&CSS基础&Vue框架
前言:三月中旬面试了两家公司,一家小型公司只有面试,另一家稍大型公司笔试之后一面定夺.笔试部分属于基础类型,网上的复习资料都有. 面试时两位面试官都有考到一些实际工作中会用到,但我还没接触过的知识点. ...
- 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
随机推荐
- 【Xamarin报错】AndroidManifest.xml : warning XA0101: @(Content) build action is not supported
部署xamarin.forms android时报错: Android\Properties\AndroidManifest.xml : warning XA0101: @(Content) buil ...
- mycat配置日志
1: 1: MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' ...
- [转]使用ant让Android自动打包的build.xml,自动生成签名的apk文件(支持android4.0以上的版本)
在android4.0以后的sdk里那个脚本就失效了,主要是因为 apkbuilder这个程序不见了: 人家sdk升级,我们的脚本也要跟上趟,修改一下喽. 上网一查,大家的文章还停留在我去年的脚本程度 ...
- Win7“当前用户没有安装Microsoft Office"
故障:在win7 win10系统已安装office2007~但打开word excel应用程序时提示"当前用户没有安装Microsoft Office". 原因:office200 ...
- Mysql :removeAbandonedTimeout:180
#数据库链接超过3分钟开始关闭空闲连接 秒为单位 removeAbandonedTimeout:180 这个参数会是一个坑吗? http://www.oschina.net/question/1867 ...
- ubuntu 12.04亮度无法调节和无法保存屏幕亮度解决办法(echo_brightness)
经过多次更改失败重装后终于在官网的answers找到了解决办法:原文链接 http://askubuntu.com/questions/3841/desktop-doesnt-remember-bri ...
- 【开源框架】EFW框架中的系统权限与页面子权限详解
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://pan.baid ...
- Android样式的开发:drawable汇总篇
Android有很多种drawable类型,除了前几篇详细讲解的shape.selector.layer-list,还有上一篇提到的color.bitmap.clip.scale.inset.tran ...
- 【Thinking in Java-CHAPTER 1&&2】对象导论&&一切都是对象
JAVA起源 从JDK诞生到现在已经有11年的时间了.沧海桑田一瞬间.转眼11年过去了,JDK已经发布了6个版本.在这11年里诞生了无数和Java相关的技术和标准.现在让我们进入时间隧道,重新回到19 ...
- Linux高级编程--04.GDB调试程序(设置断点)
调试已运行的程序 在UNIX下用ps查看正在运行的程序的PID(进程ID),然后用gdb PID格式挂接正在运行的程序. 先用gdb 关联上源代码,并进行gdb,在gdb中用attach命令来挂接进程 ...