vue学习笔记

vue.js

提醒:Vuejs 如今正处在快速发展中,很多资源随时都有可能过时(outdated),记得查看最新文档,使用最新资源。

Vue 的官方说明

数据驱动的组件,为现代化的 Web 界面而生。

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

关于 Vue 的作者

尤雨溪 / 昵称:尤小右 / 英文名:Evan You

是个介于设计师和程序员之间的大牛,设计能力比程序员好,编程能力比设计师(和普通程序员)好太多!

如今辞了工作,专心投入到了 Vuejs 的发展和推广中。

工作信息:

Meteor (2014 - 2016)

地区:海外 ,美国

职位:Core dev

Google (2012 - 2014)

地区:海外 ,美国

职位:Creative Lab

相关信息:

JavaScript Air Episode 016: JavaScript Frameworks: Vue.js

和 Vue.js 框架的作者聊聊前端框架开发背后的故事 | Teahour.fm

Vue 的基本用法

Vue 相比于 React 和 Angular 容易上手多了,因此我对 Vue 的学习主要以文档为主,视频为辅(只有像我这种菜鸟才看视频教程,真正的牛人文档瞄几眼就会了(-_-#))。

下载使用(两种方式)

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

平时对于 Dom 操作比较频繁的小项目可以直接这样使用。

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

针对单页应用的构建推荐使用这种方式,可以更好的体验到 vue 所提供的组件化功能 (单文件组件),顺带着享受到 webpack 带来的流畅的自动化开发体验。

# 全局安装 vue-cli

$ npm install -g vue-cli

# 创建一个基于 "webpack" 模板的新项目

$ vue init webpack my-project

# 安装依赖,走你

$ cd my-project

$ npm install

$ npm run dev

Vue 的使用教程

废话不多说,大家直接看官方文档,已经写得非常棒了。

页面上的搜索功能可以快速帮助你定位到相关文档说明,非常方便。

针对相关问题的解决方法:

问题:Vue 还未实例化前, HTML 模板中的 "{{ }}"( Mustache 标签) 会暴露在用户界面上,也就是说页面有那么一瞬间会将所有的 "{{ }}" 都显示出来,如何解决?

解决:

方法一:使用 v-cloak 指令,这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

v-cloak 文档说明

[v-cloak] {

  display: none;

}<div v-cloak>

  {{ message }}

</div>方法二:使用 v-text

v-text 文档说明

<span v-text="msg"></span>

<!-- same as -->

<span>{{msg}}</span>问题:新增的 data 数据没法同步响应到页面?

解决:认真阅读官方文档里的深入响应式原理。

在实例创建之后添加属性并且让它是响应的:

对于 Vue 实例,可以使用 $set(key, value) 实例方法:

vm.$set('b', 2)

// `vm.b` 和 `data.b` 现在是响应的对于普通数据对象,可以使用全局方法 Vue.set(object, key, value):

Vue.set(data, 'c', 3)

// `vm.c` 和 `data.c` 现在是响应的注意事项:

注意如果 prop 是一个对象或数组,是按引用传递。在子组件内修改它会影响父组件的状态,不管是使用哪种绑定类型

针对同一个元素的后一个 watch 会覆盖前一个 watch,无论是不是 deep

自定义指令内部可以通过 this.vm.someKey 来访问到组件的数据

自定义指令名不要有大写,props 命名也不要有大写

Vue 的组件化实践

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

使用上文提到的官方命令行工具:

目前可供使用的模板包括(模板名-说明):

webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.(全功能的 Webpack + vue-loader 设置,包括热加载,静态检测,测试,css 提取)

webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.(一个简易的 Webpack + vue-loader 设置,以便于快速开始)

browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.(全功能的 Browserify + vueify 设置,包括热加载,静态检测,单元测试)

browserify-simple - A simple Browserify + vueify setup for quick prototyping.(一个简易的 Browserify + vueify 设置,以便于快速开始)

simple - The simplest possible Vue setup in a single HTML file

相关阅读:

Announcing vue-cli

(译)Vuejs 自己的构建工具 vue-cli

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 个人基于对 Vuejs 的学习制作了一个 Todo 单页应用 Lightodo,功能包括:添加待办事项卡片,对卡片...
    AlessiaLi阅读 21,468评论 16 308
  • 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序(SPA)。开发SPA过程中,路由必不可少...
    间阳幕宾阅读 268评论 0 1
  • 一、Vue.js介绍 Vue.js也称为Vue,读音类似view,错误读音v-u-e,由华人尤雨溪开源并维护。 V...
    间阳幕宾阅读 549评论 1 6
  • 班级情况: ...
    A越单纯越幸福阅读 371评论 0 0
  • 曾经看到过这样一个女生,我一看她的眼睛就觉得整个世界都安静下来了!此生,我看到过无数只眼睛,只觉得她的眼睛最好看。...
    缘眸阅读 401评论 0 4