Vue-渐进式JavaScript框架
介绍
- vue中文网
- vue github
- Vue.js 是一套构建用户界面(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 ===> Model，View，ViewModel
-
M：Model数据模型，data中的数据，可以在Model中定义数据修改和操作的业务逻辑
-
V：View视图，模板代码（不是静态页面；两个语法：指令，大括号表达式），负责将数据模型转化成UI展现出来
-
VM：ViewModel 视图模型，Vue的实例， 同步View和Model的对象
- data中所有的属性，最后都出现在了vm身上。
- vm 身上的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
MVVM模式图
优势对比
-
MVC模式，将应用程序划分为三大部分，实现了职责分离
-
在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM
-
MVVM通过数据双向绑定让数据自动地双向同步
- MVVM本质上是 MVC（Modek-View-Controller）的改进版，即模型-视图-视图模型
- 模型
model指的是后端传递的数据，视图view指的是所看到的页面。 - 视图模型
viewModel是mvvm 模式的核心，它是连接 view 和 model 的桥梁。他有两个方向： - 将
模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定 - 将
视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听 - 这两个方向都实现的，我们称之为
数据的双向绑定
-
Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM
Vue中的MVVM
- 虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用
vm(ViewModel 的简称，这个变量名表示 Vue 实例。
学习Vue要转化思想
- 不要在想着怎么操作DOM，而是想着如何操作数据
起步 - Hello Vue
<!-- 引入 vue.js -->
<script src="vue.js"></script>
<!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中 通常我们也把它叫做边界 数据只在边界内部解析-->
<div id="app">{{ msg }}</div>
<!-- 使用 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中的所有属性，或者 vm.msg
var vm = new Vue({
data: {
msg: '大家好，...'
}
})
vm.$data.msg === vm.msg // 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的改变也会引起数据的变化；
-
原理：
Object.defineProperty中的get和set方法；getter和setter：访问器.- 作用：指定
读取或设置对象属性值的时候，执行的操作.
/* defineProperty语法 介绍 */
var obj = {}
Object.defineProperty(obj, 'msg', {
// 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
set: function (newVal, oldVal) { },
// 读取 obj.msg 时get方法会被系统调用
get: function ( newVal, oldVal ) {}
})
Vue双向绑定的极简实现
<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>
<script>
var txt = document.getElementById('txt'),
sp = document.getElementById('sp'),
obj = {}
// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
// 设置 obj.msg 当obj.msg反生改变时set方法将会被调用
set: function (newVal) {
// 当obj.msg被赋值时 同时设置给 input/span
txt.value = newVal
sp.innerText = newVal
}
})
// 监听文本框的改变 当文本框输入内容时 改变obj.msg
txt.addEventListener('keyup', function (event) {
obj.msg = event.target.value
})
</script>
在文本框内输入内容后
动态添加数据的注意点
-
注意：只有
data中的数据才是响应式的，动态添加进来的数据默认为非响应式 -
可以通过以下方式实现动态添加数据的响应式
- 1
Vue.set(object, key, value)- 适用于添加单个属性 - 2
Object.assign()- 适用于添加多个属性
- 1
var vm = new Vue({
data: {
stu: {
name: 'jack',
age: 19
}
}
})
/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')
/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
异步DOM更新
-
说明：Vue 异步执行 DOM 更新，监视所有数据改变，一次性更新DOM
-
优势：可以去除重复数据，对于避免不必要的计算和 避免重复 DOM 操作上，非常重要
-
如果需要那到更新后dom中的数据 则需要通过 Vue.nextTick(callback)：在DOM更新后，执行某个操作（属于DOM操作）
- 实例调用
vm.$nextTick(function () {})
- 实例调用
methods: {
fn() {
this.msg = 'change'
this.$nextTick(function () {
console.log('$nextTick中打印：', this.$el.children[0].innerText);
})
console.log('直接打印：', this.$el.children[0].innerText);
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
