From dd8e71564ab1a918a1351101be4d3c8dac89c80f Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 7 May 2018 00:11:35 +0800 Subject: [PATCH] =?UTF-8?q?update=EF=BC=9AVue=E7=9A=84=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E6=8C=87=E4=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/03-VS Code.md | 18 +- 21-Vue基础/00-Vue的介绍和vue-cli.md | 62 ++- 21-Vue基础/01-01.Vue基础语法：系统指令.md | 626 +++++++++++++--------- 22-前端工程化/01-Webpack.md | 2 +- 4 files changed, 450 insertions(+), 258 deletions(-) diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/03-VS Code.md index 99370df..c8ca426 100644 --- a/00-前端工具/03-VS Code.md +++ b/00-前端工具/03-VS Code.md @@ -29,6 +29,23 @@ "workbench.editor.enablePreview": false, ``` +### 在本地开启服务器 + +```bash +# 安装 +npm install -g live-server + +# 启动 +live-server +``` + + +参考链接：[Visual Studio Code + live-server编辑和浏览HTML网页](http://www.cnblogs.com/1zhk/p/5699379.html) + + + + + ## 常用插件 @@ -165,7 +182,6 @@ Sass 文件格式化。 - ### 代码格式化 diff --git a/21-Vue基础/00-Vue的介绍和vue-cli.md b/21-Vue基础/00-Vue的介绍和vue-cli.md index b07f499..f3aa5a0 100644 --- a/21-Vue基础/00-Vue的介绍和vue-cli.md +++ b/21-Vue基础/00-Vue的介绍和vue-cli.md @@ -11,6 +11,58 @@ - View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 + +## 关于框架 + + +### 为什么要学习流行框架 + +**1、企业为了提高开发效率**：在企业中，时间就是效率，效率就是金钱；企业中，使用框架，能够提高开发的效率。 + + +**提高开发效率的发展历程**： + +原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】） + + +2、在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑。 + + + +**3、增强自己就业时候的竞争力**： + +- 人无我有，人有我优。 + +- 你平时不忙的时候，都在干嘛？ + + + +### 框架和库的区别 + + +**框架**： + +框架是一套完整的解决方案。 + +对项目的**侵入性**较大，项目如果需要更换框架，则需要重新架构整个项目。但是优点也很明显：功能完善、提供了一整套的解决方案。 + + + + +**库（插件）** + +只是提供某一个小功能。 + +对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。 + +举例： + +- 从Jquery 切换到 Zepto + +- 从 EJS 切换到 art-template + + + ## 前端的各种框架 ### Vue、React、AngularJS @@ -24,6 +76,12 @@ AngularJS 提供更多的是一套解决方案，更像是一个生态。 ![](http://img.smyhvae.com/20180302_1623.png) +Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架。 + +Vue.js 是一套构建用户界面的框架，**只关注视图层**。 + + + ### Vue 和 React 的相同点 ![](http://img.smyhvae.com/20180302_1636.png) @@ -77,9 +135,9 @@ Vue框架中，没有控制器。 - Vue2.x 在线文档： -- Vue1下载地址：http://v1-cn.vuejs.org/js/vue.js +- Vue1下载地址： -- Vue2下载地址：https://unpkg.com/vue@2.2.1/dist/vue.js +- Vue2下载地址： diff --git a/21-Vue基础/01-01.Vue基础语法：系统指令.md b/21-Vue基础/01-01.Vue基础语法：系统指令.md index e423135..35b094f 100644 --- a/21-Vue基础/01-01.Vue基础语法：系统指令.md +++ b/21-Vue基础/01-01.Vue基础语法：系统指令.md @@ -13,8 +13,8 @@ Title - - + + @@ -24,9 +24,10 @@ + + + + + +``` + +运行结果： + +20180506_2240.png + + +## v-cloak + +`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。 + +v-cloak指令和CSS 规则一起用的时候，能够**解决差值表达式闪烁的问题**（即：可以隐藏未编译的标签直到实例准备完毕）。 + +就拿上一段代码来举例，比如说，`{{name}}`这个内容，**在网速很慢的情况下，一开始会直接显示`{{name}}`这个内容**，等网络加载完成了，才会显示`smyhvae`。那这个**闪烁的问题**该怎么解决呢？ + +解决办法是：通过`v-cloak`隐藏`{{name}}`这个内容，当加载完毕后，再显示出来。 + +```html + + + + + + Document + + + + +
+ + {{name}} + +
+ + + + + + + +``` + + +## v-text + +v-text可以将一个变量的值渲染到指定的元素中。例如： + +```html + + + + + + Title + + + + + +
+ +
+ + + + + +``` + +结果： + + +![](http://img.smyhvae.com/20180313_1645.png) + +### 差值表达式和 v-text 的区别 + +```html + + content:{{name}} + + + /span> +``` + +**区别1**： v-text 没有闪烁的问题，因为它是放在属性里的。 + +**区别2** :插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会**覆盖**元素中原本的内容。 + +为了解释区别2，我们来用代码举例： + +```html + +

content:++++++{{name}}------

+ + +

------++++++

+``` + +上方代码的演示结果： + +20180506_2320.png + +其实，第二行代码中，只要浏览器中还没有解析到`v-text="name"`的时候，会显示`------++++++`；当解析到`v-text="name"`的时候，name的值会直接替换`------++++++`。 + + +## v-html + + +`v-text`是纯文本，而`v-html`会被解析成html元素。 + +注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。 + +代码举例： + +```html + + + + + + + + Document + + + +
+

{{msg}}

+

+

+ +
+ + + + + + +``` + +运行结果： + +20180506_2330.png + + +## v-bind + +`v-bind`：用于绑定属性。 + +比如说： + +```html + + +
+``` + + +上方代码中，给属性加了 v-bind 之后，属性值里的整体内容是**表达式**，属性值里的`imageSrc`和`size`是Vue实例里面的**变量**。 + +也就是说， v-bind的属性值里，可以写合法的 js 表达式。 + +上面两行代码也可以简写成： + +```html + + +
+``` + +**举例：** + +```html + + + + + + Title + + + + +
+ + + + + + 超链接 + +
+ + + + + + + +``` + +上面的代码中，我们给`value`这个属性绑定了值，此时这个值是一个变量。 + +效果： + +![](http://img.smyhvae.com/20180313_1745.png) + + +## v-model：双向数据绑定 + +上面的一段中，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，``标签里的内容会自动更新。 + +可我现在要做的是：我在``标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。 + +代码举例如下： + +```html + + + + + Document + + + +
+ +
+ + + + + +
+
+ + + + + +``` + + +此时，便可实现我们刚刚要求的双向数据绑定的效果。 + + + + + ## v-on：注册事件 ### v-on 的用法举例 @@ -222,256 +590,6 @@ 上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。 -## 插值表达式 {{}} - -数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如： - -```html -Message: {{ msg }} -``` - -Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。 -无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。 - -`{{}}`对JavaScript 表达式支持，例如： - -```javascript -{{ number + 1 }} - -{{ ok ? 'YES' : 'NO' }} - -{{ name == 'smyhvae' ? 'true' : 'false' }} - -{{ message.split('').reverse().join('') }} -``` - - -但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效： - -```html - -{{ var a = 1 }} - - -{{ if (ok) { return message } }} -``` - - -## v-text - -v-text可以将一个变量的值渲染到指定的元素中。例如： - -```html - - - - - - Title - - - - - -
- -
- - - - - -``` - -结果： - - -![](http://img.smyhvae.com/20180313_1645.png) - -## v-html - - -`v-text`是纯文本，而`v-html`会被解析成html元素。 - -注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。 - - -## v-cloak - -`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。 - - -这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过`v-cloak`隐藏元素，当加载完毕后，再显示出来。 - -```html - - - - - - Title - - - - - -
- {{name}} - -
- - - - - - - -``` - - -## v-bind - -`v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。 - -比如说： - -```html - - -
-``` - - -上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。 - -上面两行代码可以简写成： - -```html - - -
-``` - -**举例：** - -```html - - - - - - Title - - - - -
- - - - - - 超链接 - -
- - - - - - - -``` - - -效果： - -![](http://img.smyhvae.com/20180313_1745.png) - - - -## v-model：双向数据绑定 - -上面的一段中，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，``标签里的内容会自动更新。 - -可我现在要做的是：我在``标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。 - -代码举例如下： - -```html - - - - - Document - - - -
- -
- - - - - -
-
- - - - - -``` - - -此时，便可实现我们刚刚要求的双向数据绑定的效果。 - ## v-for：for循环 **作用**：根据数组中的元素遍历指定模板内容生成内容。 diff --git a/22-前端工程化/01-Webpack.md b/22-前端工程化/01-Webpack.md index c655878..89af88d 100644 --- a/22-前端工程化/01-Webpack.md +++ b/22-前端工程化/01-Webpack.md @@ -65,7 +65,7 @@ webpack.config.js : 是一个node模块，返回一个 json 格式的配置信 { "name": "webpackdemo", "version": "1.0.0" -}s +} ```