Vue -渐进式JavaScript框架的拓展.docx

Vue -渐进式JavaScript框架
介绍
vue 中文网
vue github
是一套构建用户界面(UI)的渐进式JavaScript框架
库和框架的区别
我们所说的前端框架与库的区别?
Library
库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
Framework
框架,是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
主要区别
You call Library, Framework calls you
核心点:谁起到主导作用(控制反转)
框架中控制整个流程的是框架
使用库,由开发人员决定如何调用库中提供的方法(辅助)
好莱坞原则:Don't call us, we'll call you.
框架的侵入性很高(从头到尾)
MVVM的介绍
MVVM,一种更好的UI模式解决方案
从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普
MVC
M: Model 数据模型(专门用来操作数据,数据的CRUD)
V:View 视图(对于前端来说,就是页面)
C:Controller 控制器(是视图和数据模型沟通的桥梁,用于处理业务逻辑)
MVVM组成
MVVM ===> M / V / VM
M:model数据模型
V:view视图
VM:ViewModel 视图模型
优势对比
MVC模式,将应用程序划分为三大部分,实现了职责分离
在前端中经常要通过 JS代码来进行一些逻辑操作,最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM
MVVM通过数据双向绑定让数据自动地双向同步
V(修改数据) -> M
M(修改数据) -> V
数据是核心
Vue这种MVVM模式的框架,不推荐开发人员手动操作DOM
Vue中的MVVM
虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例
学****Vue要转化思想
不要在想着怎么操作DOM,而是想着如何操作数据!!!
起步- Hello Vue
安装:npm i -S vue
<!-- 指定vue管理内容区域,需要通过vue展示的内容都要放到找个元素中通常我们也把它叫做边界数据只在边界内部解析-->
<div id="app">{{ msg }}</div>
<!-- 引入 -->
<script src=""></script>
<!-- 使用 vue -->
<script>
var vm = new Vue({
// el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
el: '#app',
// Vue 实例的数据对象,用于给 View 提供数据
data: {
msg: 'Hello Vue'
}
})
</script>
Vue实例
注意 1:先在data中声明数据,再使用数据
注意 2:可以通过 vm.$data 访问到data中的所有属性,或者
var vm = new Vue({
data: {
msg: '大家好,...'
}
})
vm.$ === // true
数据绑定
最常用的方式:Mustache(插值语法),也就是{{}} 语法
解释:{{}}从数据对象data中获取数据
说明:数据对象的属性值发生了改变,插值处的内容都会更新
说明:{{}}中只能出现JavaScript表达式而不能解析js语句
注意:Mustache 语法不能作用在 HTML 元素的属性上
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>
<!-- !!!错误示范!!! -->
<h1 title="{{ err }}"></h1>
双向数据绑定 Vue two way data binding
双向数据绑定:将DOM与Vue实例的data数据绑定到一起,彼此之间相互影响
数据的改变会引起DOM的改变
DOM的改变也会引起数据的变化
原理:Obje