黑马程序员技术交流社区

标题: 【武汉校区】前端学科笔记分享——vue.js [打印本页]

作者: 武汉分校-小舞 时间: 2017-6-15 16:05
标题: 【武汉校区】前端学科笔记分享——vue.js
本帖最后由武汉分校-小舞于 2017-8-8 10:48 编辑

【前端学科技术分享】武汉校区独家分享：vue.js

更多学习资源请关注微信公众号

“黑马程序员武汉中心”

vue 的一些语法和 Angular 的很相似，vue 的指令以 v-开始，而 angular 以 ng-开始（例如 v-if vs ng-if），数据绑定的方式也是一样的两个{}。这是由于 vue 早期的灵感来自于angular，对 angular 的研究对我学习 vue.js 的框架能起到很好的引导作用。

1）简介：

Vue.js是由尤雨溪大神开发的一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，有易于上手，便于与第三方库或既有项目整合的优点。

vue 的核心为数据驱动和组件化。vue 通过 MVVM 的数据绑定实现自动同步，原理如下图：

关于组件化：界面上各个部分分别对应着 ViewModel Tree 的各个分支，如下图：

2）与 angular 的不同点：

[hide=d365]双向数据绑定的机制不同：angular 主要是利用脏检测，而 vue 利用的是依赖收集机制。

在 angular 中，当 watcher 越来越多时会变得越来越慢，这是由于作用域内的每一次变化，watcher 的所有值都会重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次，这样无形之中会消耗很大的性能。

而 vue 依赖收集机制的实现类似 Knockout，精确到每一个属性，做到了避免大量的循环检查，比脏检测效率高很多，性能也不受限于 watcher 的数量。引入的包大小的方面，angular 明显比 vue 大，vue 的包 18kb，无外部依赖，更适合移动端的开发。[/hide]

3）使用：

在学习阶段，我主要是直接引入vue.js 文件来熟悉 vue 的基本使用，练习官网文档上的 demo 来加深自己对相应步骤和一些指令的了解，有以下几点

可以总结：

1.new 一个 vue 对象的时候可以设置它的属性，最主要的三个属性为：data、methods，watch。
2.data 代表 vue 对象的数据，methods 代表 vue 对象的方法，watch 设置了对象监听的方法。
3.vue 对象里的设置通过 html 指令进行关联。
4.注册组件首先定义一个组件，利用 vue.extend 的方法，传入对象{template：””，paramArrributes:[‘msg’]}，再调用 component 全局注册该组件。之后就可以当做一段 html 标
签来使用了。
5.重要的指令包括 v-text（渲染数据），v-if（控制显示），v-on（绑定事件），v-for（循环渲染），v-bind（属性绑定），v-model（表单控件绑定）等等。

除了对基础的学习外，我还总结了如何搭建项目主体：

利用官方脚手架（vue-cli）搭建项目主体：npm install -g vue-cli（全局安装），vue init webpack Vue-Project（开始搭建，同时配置文件信息），npm install （下载依赖），npm run dev（启动项目），之后就可以在 src 目录下的 app.vue 中进行开发。由于 npm 的服务器在国外，所以访问下载文件时较慢，可以使用淘宝镜像（服务器在国内）替代 npm 安装相应的依赖包。

4）小结：

对于一个框架的学习，不能仅仅停留在表面的死记硬背，更应该在于理解和活学活用。学习时从背景，框架性能，简单原理，以及与相同功能框架的优缺点对比等方面入手，可以让自己对该框架的大概脉络有一定的了解，学习效率才会更高。

作者: 今天吃什么 时间: 2017-6-15 16:23
紫薯布丁。。

作者: guoze 时间: 2017-7-23 00:44
11111111111111111111

作者: 柔断 时间: 2017-7-24 20:19
最近想学vue.js

作者: Jasper0196 时间: 2017-7-26 16:46
对于一个框架的学习，不能仅仅停留在表面的死记硬背，更应该在于理解和活学活用。学习时从背景，框架性能，简单原理，以及与相同功能框架的优缺点对比等方面入手，可以让自己对该框架的大概脉络有一定的了解，学习效率才会更高

作者: 喵帕斯 时间: 2017-7-28 17:15
感谢分享

作者: 秦城 时间: 2017-8-11 13:33
学习一下

作者: hcyccc 时间: 2017-8-16 19:33
黑马7期前来参观

作者: 榕树长枫叶 时间: 2017-8-30 14:56
万分感谢很实用

作者: wolflj 时间: 2017-9-6 15:30
6666666666666666666666666666

作者: 柠檬不酸 时间: 2017-9-7 13:25
666666666666666666666666

作者: 天道轮回 时间: 2017-9-27 10:15
233333333

作者: 慕容初晨 时间: 2017-10-12 10:29
学习。。学习

作者: 魏聪 时间: 2017-10-23 16:20
http://bbs.itheima.com/forum.php ... &extra=page%3D1

作者: GUOJM 时间: 2017-10-24 10:55
谢谢大佬

作者: 18789055986 时间: 2017-10-24 23:42
http://bbs.itheima.com/forum.php ... a=page%3D1?1704xwnt

作者: newu 时间: 2017-10-25 13:38
谢谢大佬,真是难得给力的帖子啊

作者: Justwangs 时间: 2017-10-29 02:16
123……123123

作者: kzzier 时间: 2017-11-15 11:50
666666666666666666

作者: zhu2018zhu 时间: 2017-11-17 09:31
万分感谢很实用

作者: bbaaoo 时间: 2017-11-20 14:55
学习学习

作者: 幸运的小猪 时间: 2017-11-23 21:47
好好学习，天天向上

作者: missYsg 时间: 2017-11-29 21:18
vue这个前端框架听说是一个跨平台的还不错

作者: qqlcx5 时间: 2017-12-8 09:13
我对您的佩服之情犹如黄河之水滔滔不绝，一发不可收拾！

作者: ccdxxxx 时间: 2017-12-13 23:53
hiuijj hdtfuyiguhijokl;'

作者: zpwh 时间: 2017-12-17 15:25
前端学科笔记分享

作者: baohan666 时间: 2017-12-18 12:03
goodgood-------------------

作者: zhaojiping 时间: 2017-12-26 01:20
csb nvcsxczx nbvc

作者: hz有盼头啊 时间: 2017-12-26 07:32
感谢分享

作者: chybcool 时间: 2018-1-10 21:08
好东西,不错啊

作者: Jane套 时间: 2018-1-17 09:05
【武汉校区】前端学科笔记分享——vue.js

作者: jinglan 时间: 2018-1-31 14:58
学习学习

作者: yuyadongid 时间: 2018-1-31 15:38
xiexie

作者: 子非鱼886 时间: 2018-3-9 11:17
来学习啊

作者: 仲恺学子 时间: 2018-3-13 14:15
6666666666666666666

作者: 小鸡爱吃番薯 时间: 2018-3-22 09:24
111111111111111111111111111111111111111111111111

作者: var_obj 时间: 2018-3-28 04:06
谢谢分享啊

作者: cx01 时间: 2018-3-28 13:54

66666666

作者: w3607887 时间: 2018-4-6 18:38
66666666666666666666

作者: a2467683839 时间: 2018-4-8 13:39
学习一下整个神奇的东西

作者: 郑达倩 时间: 2018-4-8 15:25
给力给力给力给力给力给力给力

作者: ylbo 时间: 2018-4-14 21:26
最近想学vue.js

作者: mvpicy 时间: 2018-5-4 19:59
666666666666666

作者: 德玛丨西亚 时间: 2018-5-7 18:30
kan

作者: 慕容凌风 时间: 2018-5-9 20:56
委曲求全群群群群群群群群群群群群

作者: 海阔天空420 时间: 2018-5-14 10:53
666666666666

作者: 剑海情涛 时间: 2018-5-14 15:36
我就看看到底难点在哪里！

作者: web萌新 时间: 2018-5-15 07:10
好的话题了吧兄弟，噢噢噢哦哦

作者: swlin 时间: 2018-5-23 14:41
规划规划规划规划规划规划规划规划规划规划

作者: Port 时间: 2018-5-30 12:44
66666666666666666666

作者: infantile、往日 时间: 2018-6-1 16:12
1234567890-

作者: Wueraoqila 时间: 2018-6-3 00:22
框架学习

作者: koouu 时间: 2018-6-3 12:21
6666666666666666

作者: giosin 时间: 2018-6-4 16:39
不错不错不错不错不错不错

作者: ycprs460 时间: 2018-6-5 09:52
万分感谢

作者: 泰牛牛程序员 时间: 2018-6-11 02:23
1111111111

作者: liuhuo 时间: 2019-2-28 09:09
放大地方速度发的分啊分啊啊

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2