vue

1.讲义.md

@@ -0,0 +1,257 @@
+# Vue基本概念
+
+![Vue](./imgs/VUE-logo.png)
+
+
+
+## vue介绍
+
+- [vue 中文网](https://cn.vuejs.org/)
+- [Vue.js 是什么](https://cn.vuejs.org/v2/guide/index.html#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88)
+- Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。 
+
+### 渐进式的概念
+
+渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。
+
+![](imgs/渐进式.png)
+
+### 框架的概念
+
+- [我们所说的前端框架与库的区别？](https://zhuanlan.zhihu.com/p/26078359?group_id=830801800406917120)
+
+**Library**
+
++ 代表：jQuery
+
++ 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能
+
+- 使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。
+
+**Framework**
+
++ 代表：vue、angular、react、bootstrap
+
++ 框架，是一套完整的解决方案
+
+- 使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码
+- 比如在哪里发送请求获取数据，在哪里渲染页面...
+
+**库和框架的区别**
+
++ 使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
++ 使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，
++ 使用框架可以极大的提升开发的效率。
+
+## MVVM的概念
+
++ MVVM，一种软件架构模式，决定了写代码的方式。
+  + M：model数据模型(ajax获取到的数据)	
+  + V：view视图（页面）
+  + VM：ViewModel 视图模型
+
+- MVVM通过`数据双向绑定`让数据自动地双向同步  **不再需要操作DOM**
+  - V（修改视图） -> M（数据自动同步）
+  - M（修改数据） -> V（视图自动同步）
+
+![](imgs/MVVM.png)
+
+### Vue中的MVVM
+
+虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例
+
+注意：
+
+**1. 在vue中，不推荐直接手动操作DOM！！！** 
+
+**2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！**
+
+![](imgs/双向数据绑定.png)
+
+# vue初体验
+
+## 基本使用步骤
+
+- 安装：`npm install vue` 在做项目的时候使用这种方式
+- 引入`vue.js`文件
+
+```html
+<script src="./js/vue.js"></script>
+```
+
+- 创建Vue实例，指定el和data参数
+
+```js
+// 创建vue实例，需要指定el和data属性
+const vm = new Vue({
+    // 指定vue的模版，值是一个选择器
+    el: '#app',
+    // 提供了vue中使用的数据
+    data: {
+        msg: 'hello vue'
+    }
+})
+```
+
++ 在模版中显示数据
+
+```html
+<div id="app">
+    // 通过{{}}可以显示data中的数据
+    {{msg}}
+</div>
+```
+
+**注意事项：**
+
++ 在开发阶段，一定要引入未压缩版的vue.js，因为压缩版的vue.js去除了警告信息和错误提示
++ el不能是`html`或者`body`，如果是这两是会报错的，因为后期虚拟DOM会替换掉模板中的内容
+
+## 插值表达式
+
+插值表达式：`{{}}`，也叫Mustache语法，小胡子语法，因为长得像胡子
+
+- 解释：使用`{{}}`（插值表达式）从`data`中获取数据，并展示在模板中
+- 说明：`{{}}`中只能出现JavaScript表达式
+
+```html
+<h1>Hello, {{ msg }}.</h1>
+<p>{{ isOk ? 'yes': 'no' }}</p>
+<p>{{ 1 + 2 }}</p>
+```
+
+**注意点：**
+
++ 插值表达式中不能出现语句，比如if / else / for等
++ 插值表达式中访问的数据要在data中存在
++ 插值表达式不能在属性中使用，只能在**标签间的内容中**使用。
++ 插件表达式中可以写简单的业务逻辑，但不推荐
+
+# vue指令
+
+- 解释：指令 (Directives) 是带有 `v-` 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性
+- 作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为，增强模板的功能
+
+## v-bind指令
+
+- 描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令
+- 作用：动态的设置html的属性
+- 语法：`v-bind:title="msg"`
+- 简写：`:title="msg"`
+
+```html
+<!-- 完整语法 -->
+<a v-bind:href="url"></a>
+<!-- 缩写 -->
+<a :href="url"></a>
+```
+
+## v-model指令 
+
+v-model: https://cn.vuejs.org/v2/guide/forms.html
+
+- 作用：在**表单元素**上创建双向数据绑定
+- 说明：监听用户的输入事件以更新数据
+- 思考：如何在JS代码中获取到文本框的值？？？
+
+```html
+<input type="text" v-model="message" placeholder="edit me">
+<p>Message is: {{ message }}</p>
+```
+
+### 双向数据绑定原理
+
+- 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
+  - 数据的改变会引起DOM的改变
+  - DOM的改变也会引起数据的变化
+- 原理：数据劫持，`Object.defineProperty`中的`get`和`set`方法
+  - `getter`和`setter`：访问器
+  - 作用：指定`读取或设置`对象属性值的时候，执行的操作
+- 注意：`Object.defineProperty`方法是ES5中提供的，IE8浏览器不支持这个方法。因此，Vue不支持IE8及其以下版本浏览器
+- [Vue - 深入响应式原理](https://cn.vuejs.org/v2/guide/reactivity.html)
+- [MDN - Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
+
+```js
+/*
+  语法
+*/
+var obj = {}
+Object.defineProperty(obj, 'msg', {
+  // 设置 obj.msg 执行的操作
+  set: function () {},
+  // 读取 obj.msg 执行的操作
+  get: function () {}
+})
+```
+
+### Vue双向绑定的极简实现
+
+- [剖析Vue原理&实现双向绑定MVVM](https://segmentfault.com/a/1190000006599500)
+
+```html
+<!-- 示例 -->
+<input type="text" id="txt" />
+<span id="msgBox"></span>
+
+<script>
+const txt = document.getElementById('txt')
+const msgBox = document.getElementById('msgBox')
+const obj = {}
+
+// 给对象obj添加msg属性，并设置setter访问器
+Object.defineProperty(obj, 'msg', {
+  // 设置 obj.msg 执行的操作
+  set: function (curVal) {
+    txt.value = curVal
+    msgBox.innerText = curVal
+  }
+})
+
+// 监听文本框的改变
+txt.addEventListener('input', function (event) {
+  obj.msg = this.value
+})
+</script>
+```
+
+## v-on指令
+
+<https://cn.vuejs.org/v2/guide/events.html>
+
+- 作用：绑定事件
+- 语法：`v-on:click="say"` or `v-on:click="say('参数', $event)"`
+- 简写：`@click="say"` 适用于没有参数的函数调用
+- 说明：绑定的事件从`methods`中获取
+- 案例：跑马灯
+
+```html
+<!-- 完整语法 -->
+<a v-on:click="doSomething"></a>
+<!-- 缩写 -->
+<a @click="doSomething"></a>
+```
+
+### 事件修饰符
+
+- `.stop`       阻止冒泡，调用 event.stopPropagation()
+- `.prevent`    阻止默认行为，调用 event.preventDefault()
+- `.capture`    添加事件侦听器时使用事件`捕获`模式
+- `.self`       只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
+- `.once`       事件只触发一次
+
+### 按键修饰符
+
+在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符： 
+
+```js
+.enter
+.tab
+.delete (捕获“删除”和“退格”键)
+.esc
+.space
+.up
+.down
+.left
+.right
+```
+