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 ===> 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>
<!-- 引入 vue.js -->
<script src="vue.js"></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中的所有属性,或者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
:访问器- 作用:指定
读取或设置
对象属性值的时候,执行的操作
- Vue - 深入响应式原理
- MDN - Object.defineProperty()
/* 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);
}
}
指令
- 解释:指令 (Directives) 是带有
v-
前缀的特殊属性 - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
v-text
- 解释:更新DOM对象的 textContent
<h1 v-text="msg"></h1>
v-html
- 解释:更新DOM对象的 innerHTML
<h1 v-html="msg"></h1>
v-bind
- 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
- 语法:
v-bind:title="msg"
- 简写:
:title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on
- 作用:绑定事件
- 语法:
v-on:click="say"
orv-on:click="say('参数', $event)"
- 简写:
@click="say"
- 说明:绑定的事件定义在
methods
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
事件修饰符
.stop
阻止冒泡,调用 event.stopPropagation().prevent
阻止默认行为,调用 event.preventDefault().capture
添加事件侦听器时使用事件捕获
模式.self
只当事件在该元素本身(比如不是子元素)触发时,才会触发事件.once
事件只触发一次
v-model
- 作用:在表单元素上创建双向数据绑定
- 说明:监听用户的输入事件以更新数据
- 案例:计算器
<code class="html" style="box-sizing: border-box; font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 1em; padding: 0px; color: inherit; backgro