vue学习笔记
来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件。关于vue有一些点是文档中没有提及的,记录一下以便以后查询~
一、Vue的特点
新一代 Vue.js 框架非常关注如何用极少的外部特性来解决应用程序/视图状态同步问题。
Vue.js 大部分是基于vue实例(var vm = new Vue({ ... }))完成的。Vue.js 负责给浏览器 DOM 中绑定数据。
1、特点 —— 这部分借鉴浅谈Vue.js的几个特点
(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
2、vue与angularJS的区别
与angularJS1对比
vue很多的语法是借鉴的angular,比如v-if/ng-if、v-model、ng-model等。
复杂性
在API与设计两方面上Vue.js都比Angular1简单得多。vue的源码比angularJS小了将近一半
比如绑定点击事件:v-on:click='doSomething' 可写成 @click='doSomthing'
绑定动态数据:v-bind:href='url' 可写成 :href='url'
数据绑定
angular1使用双向数据绑定,vue在不同组件间强制使用单向数据流。尤其vue2.0中父子间也强制只能父向子传递数据。这使应用中的数据流更加清晰易懂。
而且angularJS绑定数据的代码也不如vue简洁。angular里有什么ng-app/ng-controller等等设置起来比较繁琐
性能
Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。
在 Angular 1 中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。
Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
Vue 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。
组件与指令
在 Vue 中指令和组件分得更加清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑
但是,在angular中两者有不少相混的地方。
与angularJS2对比
angularjs2实际是一个全新的框架了,而且还用vue一样的思路解决了angularJS1里的一些问题。angular1 面向的是较小的应用程序,angular2 已转移焦点,面向的是大型企业应用。
大小和性能
在性能方面,这两个框架都非常的快。
但目前尚没有足够的数据用例来具体展示。如果你一定要量化这些数据,你可以查看第三方参照,它表明 Vue 2 相比 Angular2 是更快的。
在大小方面,vue还是比angular2小得多
虽然 Angular 2 使用 tree-shaking 和离线编译技术使代码体积减小了许多。但包含编译器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 还是要小的多。但是要注意,用 Angular 2 的 App 的体积缩减是使用了 tree-shaking 移除了那些框架中没有用到的功能,但随着功能引入的不断增多,尺寸会变得越来越大。
灵活性
Vue 相比于 Angular 2 则更加灵活
Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何构建。有人可能喜欢用统一的方式来构建,也有很多开发者喜欢这种灵活自由的方式。
学习曲线
Vue能够快速上手。你使用的是熟悉的 HTML、符合 ES5 规则的 JavaScript(也就是纯 JavaScript)。有了这些基本的技能,你可以快速地掌握它(指南)并投入开发 。
Angular 2 的学习曲线是非常陡峭的。即使不包括 TypeScript,它的开始指南中所用的就有 ES2015 标准的 JavaScript,18个 NPM 依赖包,4 个文件和超过 3 千多字的介绍,这一切都是为了完成个 Hello World。而Vue’s Hello World就非常简单。甚至我们并不用花费一整个页面去介绍它。
二、使用过程中的一些总结
- 首先要提一下vue父实例中的data属性
写成data:function(){return{...}}的形式:表示的是一个返回数据对象的函数,而不是直接返回数据对象。采用该方法的原因是,你创建了一个可在多个位置重用的组件,你不希望所有类型实例共享data字段,如果它是一个直接对象,上述问题就不可避免。
- 过渡效果的实现
vue2.0也是有改动的,不过我实现过渡效果是用的vue1.0的要求实现的,因为公司原有的部分还是应用的vue1.0。大致写下1.0版本下实现的关键点:
// 在标签中加入transition,配合v-if/v-show改变,就触发过渡的css变化
<div v-if="show" transition='fade'>
// 或是写成下面这样,然后在vue父实例的data中定义transitionName: 'XXX'
<div v-if="show" transition='transitionName'> // 写CSS样式:
.fade-transition {} —— 始终保留在元素上的
.fade-enter {} —— 进入过渡状态的一瞬间的样式,结束后删除
.fade-leave {} —— 离开过渡的结束状态的一瞬间的样式,结束即删除 // 还可以配合hooks使用:
Vue.transition('fade',{
beforeEnter: function(el){},
enter: function(el){},
alertEnter: function(el){},
......具体有哪些需要的时候可以看文档~
})
这里你定义的transitionName是XXX,CSS样式这里就写XXX-transition/enter/leave,要对应!
- 还有就是在使用了v-for后,如果我们要动态的去取每一个的值,比如放在方法内做参数,或是放在style中,如何书写?我总结为大致三种写法:
<div class="recommend_shop" v-for="rshop in recommend_shop">
<div class="group_img" :style="{ backgroundImage: 'url('+ rshop.group_header +')'}"v-on:click="openGroup( rshop.group_id )">
</div> <div class="group_info">成交 {{ rshop.goods_nums }}</div>
</div>这里:style="{ backgroundImage:'url('+ ... +')' }" 和 v-on:click="openGroup( ... )"的写法要注意!
- 如何封装组件?
一开始我写组件,只知道组件就是把一个常用的功能封装起来,具体这个封装体现在哪里?就好比你拿一个转换插头,你不知道里面它有什么逻辑,装了什么乱七八糟的东西,但是你提供了一个插孔和一个插头,这个插孔就是组件要预留出来的可能要传进来的一些数据,插头就是组件最后要传给外部的一些外部需要的数据。
- 还有就是slot的使用,
这个我之前也记录过,我当时理解slot的时候把官方文档的三个例子都写了一遍,盯着看了好一会才懂。。。我也是对自己无语了。。。
三、vue2.0的改变点:
- 1.0里的钩子函数ready废弃了,在2.0使用mounted代替。还移除了beforeCompile(Created代替)、compiled(mounted代替),新增了beforeMount、beforeUpdate、update等(这几个我还没用过哈哈)
- events、$dispatch、$broadcast废弃了。
- 子组件给父组件传递参数,发送事件时原来我们使用$dispatch(),但是2.0删掉了这个方法,但是有它的办法来实现,我总结为以下三个关键点(以做过的一个分页组件部分代码为例):
// 在父实例page.js中定义想要操作的事件
data: function(){
curPage: 1
}
methods: {
changePage: function(){
this.curPage = cur;
}
}// 在html的<page>标签上添加v-on:click事件
// 父组件用v-on监听事件
<page :data-num="pagedata.length" :each="eachPageSize" :visiblepage="visiblepage" v-on:change-page="changePage"></page>// 子组件模板(pages是个数字数组)
<li v-for="index in pages" v-bind:class="{ active: curPage == index }">
<a v-on:click="btnClick(index)">{{ index }}</a>
</li> // 在子组件page.vue中:点击事件中添加:$emit(),将事件传播到父组件
methods: {
btnClick: function(index){
this.curPage = index
this.$emit('change-page', index)
}
}怎么把点击的是哪个数字传到父组件,使父组件可以使用这个数字去做其他的操作?整体流程是:点击子组件中的点击按钮触发btnClick(index)方法,btnClick中,利用this.$emit('change-page',index)触发change-page事件并且将当前的页码值以index参数的形式传到父组件,父组件利用v-on:change-page='changePage'监听到子组件传来的change-page,调用父组件中的changePage方法,在这里完成 “子组件数据传到父组件” 这件事~ this.curPage = index; 这句就将子组件里的点击的那个数字赋值给curPage了,这个curPage是在父组件的data里定义的~~吼吼,就是这么个过程~~
- v-for循环中常用的$index、$key也不支持了。
- 不支持双向绑定啦~v-bind的.once .sync都删掉啦!props里传进来的data值是不可变的!!而且还需要验证~有两种方式会改变props:
- 定义一个局部的data属性,将props的初始值作为局部数据的初始值传入:
props: {
navs: { // 从父级传来的navs
type: Array
, default: function(){
return {}
}
}
}
, data: function(){
return { // 这里利用传来的navs来设置初始值cur
cur: this.navs[0].en_name
}
} - 定义一个computed属性,里面可以定义一些属性从props的值计算得出:
props: {
dataNum: { // 传进来的内容总数
type: Number
, default: 100
}
, each: { // 单页的个数
type: Number
, default: 10
}
}
, computed: {
totalPages: function(){ // 计算得出总页数,根据父组件传进来的值的不同得到不同的页数
return Math.ceil(this.dataNum / this.each) || 0
}
用的多了果然觉得顺手多了。。。还是要继续学习~~~最近终于弄明白了原型、原型链还有闭包,接下来要复习一些算法和基础知识~~~回了学校还要写论文,时间真的是不够用。。。不过想到要回家了还是忍不住小激动~今天把上线的所有需求改完,最近一版的工作就告一段落了,看小哥还在学vue2.0改版的内容,我也不好闲着,写完我也去看看。。。同志们共同进步呀~
vue学习笔记的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
随机推荐
- 改变CSS世界纵横规则的writing-mode属性
改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...
- mysql 存储 emoji报错( Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F)的解决方案
1.报错原因: mysql utf-8 编码储存的是 2-3个的字节,而emoji则是4个字节. 2.解决办法: 修改mysql的配置文件,windows下的为my.ini(linux下的为my.cn ...
- TypeError: window.open is not a function
想必大家现在都已经到家了,而苦逼的我还要坐在办公室混拿微薄的工资,技不如人,平常不努力给自己充电,年终一毛钱都没多给.不说这扫兴的话题了,在这给同样在苦逼坚守岗位的同志们节日的问候,新的一年,好运连连 ...
- 虚拟机启动linux系统报错,此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态
在使用虚拟机启动linux的时候报错,如下: 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态. ...
- [转载]什么是FCKeditor?功能强大的HTML编辑器!
天天在用FCKeditor写博客,但一直不清楚FCKeditor到底是什么,今天终于找到了一些相关的资料,大家一起来分享下. FCKeditor文本编辑程序(共享软件)为用户提供在线的文档编辑服务,其 ...
- 【 2013 Multi-University Training Contest 2 】
HDU 4611 Balls Rearrangement 令lcm=LCM(a,b),gcd=GCD(a,b).cal(n,a,b)表示sum(abs(i%a-i%b)),0<=i<n. ...
- Android中的DrawerLayout
简介 Drawerlayout是google自带的控件,功能类似开源的SlidingMenu,在support-v4包下用来替代SlidingMenu(google好无耻啊). 使用方法 在activ ...
- Maven仓库
http://search.maven.org/#search%7Cga%7C1%7C
- 观点:BPM已经过时了?
在这个信息爆炸的世界,业务转型通常是以数字系统和流程的方式发生. 根据Forrester的报告“软件必须丰富你的品牌”,人们要依靠这些技术实现期望的商业成果,比如品牌联系.客户服务创新.更好的产品和提 ...
- AnyCAD.NET C#开发CAD软件实践(一)
免费的AnyCAD.NET发布了!俺喜欢的C#有了大展前途的机会了. 打算用这个框架搭建一套实用的CAD系统,目标是能买出去10套以上. 先看看AnyCAD.NET的自我介绍. http://www. ...