阅读时间预估:3分钟
啥是Vue?
当你看到这篇文章的时候,想必这位大侠难免多少略知Vue这个世界级别的框架的来头,华裔程序贵族尤雨溪大佬的开源作品(膜拜大佬三分钟...),从面世至今gitHub上的点赞数量已经超过Angular,React等著名框架,🔥的发紫,着实有后来者居上的感觉,Vue借鉴了前两者的优秀设计模式和思想以一种渐进式的模式呈现给我们,意图也非常明显,小白上手首选,学习成本低,开源社区活跃,废话不多说,接下来跟(da)着(lao)我的脚步,带你从小白进阶大佬(chui niu)..
Vue -渐进式JavaScript框架
介绍
大佬叮嘱: 万层高楼平地起,作为vue小白vue官方中文网一定要努力的通读几遍,案例一定要多敲几遍哦.
- vue 中文网
- vue github
- Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架
库和框架有啥区别
Library
库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
- 代表：jQuery
- jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
- jQuery 源码分析系列
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 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）
后端中常常采用MVC模式.
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要转化JS老观念
- 不要在想着怎么操作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: '大家好,我是Geek-James'
}
})
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() - 适用于添加多个属性
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);
}
}
Vue是个啥? 看完这篇不知道面前的这位大侠是否真正的领略到,欢迎留言点赞加评论,文章有不对的地方恳请各位大佬提出.
如果我的分享对面前的这位大侠有所启发,恳请以程序员最高礼遇点✨ 星加分享的方式鼓励我.
关注公众号回复:学习 领取前端最新最全学习资料,也可以进群和大佬一起学习交流
image
猛戳我点星星
网友评论