文章目录
VUE
读音:[vjuː],view
了解VUE
Vue.js 是一个基于MVVM模式的一套渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js
前端框架历史
- jquery阶段(2006-2013)
- 特点:节点操作简单易用,浏览器兼容
- angular阶段(2009-2014)
- 特点:MVC模式,双向数据绑定,依赖注入
- react阶段(2013)
- 特点:virtual DOM,性能上碾轧angularJS
- vue阶段(2014-2016)
- 特点:综合angular与react的优点,MVVM模式,是一款高性能高效率的框架
架构模式
复杂的软件必须有清晰合理的架构,更容易开发、维护和测试
-
MVC
MVC模式的意思是,软件可以分成三个部分。
- 模型(Model):数据处理
- 视图(View):数据展示
- 控制器(Controller):业务逻辑处理(M和V之间的连接器)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sA7nEJBi-1574243732099)(./img/mvc.png “MVC”)]
- View 传送指令到 Controller(用户发送指令)
- Controller 完成业务逻辑后,要求 Model 改变状态
- Model 将新的数据发送到 View,用户得到反馈
- 缺点:依赖复杂
- View 依赖Controller和Model
- Controller依赖View和Model
-
MVP
MVP 架构模式是 MVC的改良模式(改进Controller, 把Model和View完全隔离开)
- Model
- View
- Presenter 可以理解为松散的控制器,其中包含了视图的 UI 业务逻辑,所有从视图发出的事件,都会通过代理给 Presenter 进行处理;同时,Presenter 也通过视图暴露的接口与其进行通信。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1PFiJnzJ-1574243732100)(./img/mvp.png “MVP”)]
-
MVVM
由MVP模式演变而来
- Model
- View
- ViewModel 类似与MVP中的Presenter,唯一的区别是,它采用双向绑定:View的变动,自动反映在 ViewModel,反之亦然
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7u749Gi-1574243732101)(./img/mvvm.png “MVVM”)]
- 核心思想:关注Model的变化,让MVVM框架利用自己的机制去自动更新DOM,从而把开发者从操作DOM的繁琐中解脱出来!
安装和引入
- 开发环境:development
-
生产环境:production
-
script标签
-
cdn
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
- npm
能很好和webpack等打包工具配合使用
- vue-cli脚手架
快速的搭建基于webpack的开发环境
使用
实例化
var data = { name: 'laoxie' }
var vm = new Vue({
el: '# app',
data: data
});
常用配置选项
- 关于DOM节点
- el(类型:Selector|Element)
Vue实例的挂载目标(实例中所有的属性/方法可直接在el中直接使用),挂载元素会被 Vue 生成的 DOM 替换
- template(类型:String)
模板,如果不指定则以ele所在元素作为模板
- Selector:提取内容到template标签,并指定选择器
-
render(类型:Function)
template的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement(tagName,props,children) 方法作为第一个参数用来创建 VNode
- 优先级:render > template > el.outerHTML
new Vue({ //... el:'#app', template:`<div>{{username}}</div>`, render:createElement=>{ return createElement('h1',{title:'标题',class:'title'},'文章标题') } })
- el(类型:Selector|Element)
- 关于数据
-
data(类型:Object|Function)
Vue实例化时,它将data中所有的属性添加到响应式系统中,当这些数据改变时,视图会进行重渲染
-
computed(类型:Object)
对于需要复杂逻辑或运算才能得到的值,应当使用计算属性
-
methods(类型:Object)
一般用于编写公共方法、事件处理函数等,方法中的this指向实例,所以不应该使用箭头函数来定义 method 函数
-
watch(Object)
监听属性(Function),监听的值被修改时会自动调用函数,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
watch: { username: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } }
-
实例属性&方法
Vue实例化时,会遍历data/computed/methods中所有属性/方法,并写入Vue的实例
响应式属性
遍历data中所有属性,通过Object.defineProperty()方法把它们设置为存储器属性(getter & setter),并写入Vue实例
- 存储器属性(getter & setter)
let laoxie = {
firstName:'lao',
lastName:'xie',
get fullName(){
return this.firstName + ' ' + lastName
},
set(val){
let username = val.split(' ');
this.firstname = username[0];
this.lastName = username[1];
}
}
- 设置响应式属性
- 设置初始化数据data
- Vue.set(target,key,val) 向响应式系统中的对象添加属性并自动渲染视图
注意:target对象不能是 Vue 实例,或者 Vue 实例的根数据对象
- 数组变异方法
内置属性
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来
- $data: 同 data
- $el: 同 el节点
- $refs
- $parent
- $children
- $root
内置方法
- 数据data
- $watch():监听数据变化,同watch配置选项
- $set():Vue.set()的别名
- 事件event
- $on() :监听当前实例上的自定义事件
- $off() :移除自定义事件监听器
- $emit() :触发当前实例上的事件
- 生命周期函数
- $mount() :
如果实例化时未配置 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载
- $destroy()
完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。触发 beforeDestroy 和 destroyed 的钩子
- $nextTick(callback)
同Vue.nextTick(),将回调延迟到下次 DOM 更新循环之后执行,返回promise对象
- $forceUpdate() 强制刷新组件
- $mount() :
vm.$watch('name', function (newValue, oldValue) {
// 这个回调将在 `vm.name` 改变后调用
});
生命周期
生命周期函数(钩子函数)
在某个时刻被自动执行的函数,生命周期函数中的this指向实例,以下为v1.x与v2.x钩子函数对照表:
-
beforeCreate()
- 初始化完成,但为往实例添加属性
- 应用:可以在这加个loading事件
-
created()
- 应用:在这结束loading,还做一些初始化,实现函数自执行
-
beforeMount()
- 可以获取节点,但数据未渲染
- 应用:在这发起ajax请求,拿回数据,配合路由钩子做一些事情
-
mounted()
实例挂载到 DOM
- 应用:节点操作
-
beforeUpdate()
- 数据有更新但未更新节点
-
updated()
- 更新节点完毕
-
beforeDestroy()
-
destroyed()
执行destroy()后,不会改变已生成的DOM节点,但后续就不再受vue控制了
- 应用:清除定时器、延迟器、取消ajax请求等
指令directive
指令是带有 v-* 前缀的特殊属性,格式:v-指令名:参数.修饰符="值"
内置指令
数据绑定
-
单向数据绑定
-
{{}}:插值表达式
差值表达式中应当放置一些简单的运算(data中的数据、函数执行、三元运算等),对于任何复杂逻辑,你都应当使用计算属性操作完成后再写入插值表达式
-
v-text:显示文本
-
v-html:显示html内容
-
v-bind:
- 可绑定任意属性
<img v-bind:src="imgurl"> <!-- 简写 --> <img :src="imgurl">
- 对style与class的绑定
在将 v-bind 用于 class 和 style 时,Vue做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> </div> <script> new Vue({ data: { isActive: true, hasError: false, activeColor: 'red', fontSize: 30 } }) </script> <!-- 最终结果:<div class="static active" style="color:red;font-size:30px"></div> -->
- v-bind无参数绑定对象
<div v-bind="{username:'laoxie',age:18,gender:'男'}"></div> <!-- 等效于 --> <div v-bind:username="laoxie" v-bind:age="18" v-bind:gender="男"></div>
-
-
v-model双向数据绑定
v-model一般用于表单元素,会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源
-
v-model值绑定到value属性
- 单行文本框text
- 多行文本框textarea
- 单选框radio
- 选择框select(无value属性则与内容绑定)
-
复选框checkbox
- 初始值为数组,与value属性绑定
- 初始值为其他,与checked属性绑定(true,false)
- true-value:设置选中时的值
- false-value:设置补选中时的值
-
修饰符
- lazy input触发改成change触发
- number 输出值为number类型
- trim 自动清楚前后空格
-
双向数据绑定原理
- Model -> View 响应式属性
- View -> Model 事件
-
v-model的原理(替代方案)
- v-bind:value=“val”
- v-on:input=“val=$event.target.value”
组件中使用v-model等效于:v-on:input=“val=arguments[0]”
-
-
列表渲染
-
v-for
可遍历Array | Object | number | string | Iterable
- 遍历数组
<li v-for="(value, index) in arr">{{value}}</li>
- 遍历对象
<tr v-for="(value, key, index) in obj"> <td>{{index+1}}</td> <td>{{key}}-{{value}}</td> </tr>
-
key:Vue 识别DOM节点的一个通用机制(用于diff算法)
Vue对相同的元素进行展示排序等操作时,遵循“就地复用”原则,因为这样更加高效,性能更好
但对于依赖子组件状态或临时 DOM 状态 (如:表单输入值、复选框选中等)的列表,会出现操作混乱的问题,
指定key属性后,意为去掉“就地复用”特性(建议尽可能在使用 v-for 时提供 key)
-
显示隐藏
- v-show
- v-if
- v-else
- v-else-if
事件绑定
格式:v-on:事件类型.修饰符=“事件处理函数”
- v-on
- 事件修饰符
- stop
- prevent
- capture
- self 只当在 event.target 是当前元素自身时触发处理函数(e.target === e.currentTarget)
- once 事件将只会触发一次
- 按键修饰符
- 直接使用键码来作为按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit">
- 使用别名作为按键修饰符
- left,up,right,down
- enter
- tab
- esc
- space
自定义指令
- 全局指令
- 格式:Vue.directive(name,option)
- 参数
- name:指令名字,使用格式:v-name
- option
- Object:放钩子函数
- Function:默认为bind和update的钩子函数
- 局部指令
格式:directives: {} - 钩子函数(了解)
- bind:初始化时执行(默认)
- inserted:元素插入页面时执行
- update:所在模板更新时执行
- componentUpdated:所在模板完成一次更新周期时调用
- unbind:指令与元素解绑时执行
- 参数
- el 指令所绑定的元素,可以用来直接操作 DOM
- binding 一个对象,包含以下案例中的属性
- vnode 虚拟的解当
- oldVnode
仅在update 和 componentUpdated 钩子中可用
// 使用指令:v-laoxie
Vue.directive('laoxie', {
bind: function (el, binding, vnode) {
//binding参数如下
el.innerHTML =
'name: ' + JSON.stringify(binding.name) + '<br>' + //指令名
'value: ' + JSON.stringify(binding.value) + '<br>' + //指令值
'expression: ' + JSON.stringify(binding.expression) + '<br>' + //字符串形式的指令表达式
'arg: ' + JSON.stringify(binding.arg) + '<br>' + //指令参数,
'modifiers: ' + JSON.stringify(binding.modifiers) + '<br>' //指令修饰符
}
});