vue

html/html简介.md

@@ -166,7 +166,7 @@
       - controls   值为controls  向用户显示控件（如播放按钮）
       -   loop  值为loop 循环播放
   - 音频（audio） 
-    - 属性
+    - 属性  和video标签属性类似
       - src  播放音频的URL
       - autoplay  值为autoplay  视频在就绪后马上播放
       - controls   值为controls  向用户显示控件（如播放按钮）

vue/class和style绑定.md

@@ -0,0 +1,165 @@
+# class 和 style绑定
+
+### 绑定HTML class
+
+- 对象语法
+
+  - 给v-bind:class 传入一个对象 来动态切换class
+
+     v-bind:class="{类名:判断条件}"
+
+    ```
+    <div v-bind:class="{ active: isActive }"></div>
+    ```
+
+    > 表示active这个class是否存在 取决于isActive 的值转化过后是否为true
+
+  - 传入更多字段来切换多个class  
+
+    ```
+    <div
+      v-bind:class="{ active: isActive, 'text-danger': hasError }"
+    ></div>
+    ```
+
+    附带如下 data
+
+    ```
+    data: {
+      isActive: true,
+      hasError: false
+    }
+    ```
+
+    元素渲染结果为：
+
+    ```
+    <div class="active"></div>
+    ```
+
+    > 如果data 中的hasError的值变成 true
+    >
+    > 元素的渲染结果为：
+    >
+    > ```
+    > <div class="active text-danger"></div>
+    > ```
+
+  - v-bind:class 可以和元素上普通的class属性并存
+
+    ```
+    <div
+      class="static"
+      v-bind:class="{ active: isActive, 'text-danger': hasError }"
+    ></div>
+    ```
+
+    附带如下data:
+
+    ```
+    data: {
+      isActive: true,
+      hasError: false
+    }
+    ```
+
+    元素的渲染结果为：
+
+    ```
+    <div class="static active"></div>
+    ```
+
+- 数组语法
+
+  - 可以把一个数组传给 v-bind:class 
+
+    v-bind:class="[第一个类名, 第二个类名]"
+
+    ```
+    <div v-bind:class="[activeClass, errorClass]"></div>
+    ```
+
+    ```
+    data: {
+      activeClass: 'active',
+      errorClass: 'text-danger'
+    }
+    ```
+
+    渲染结果为：
+
+    ```
+    <div class="active text-danger"></div>
+    ```
+
+    
+
+  - 在数组中用对象语法
+
+    ```
+    <div v-bind:class="[{ active: isActive }, errorClass]"></div>
+    ```
+
+### 绑定内联样式
+
+- 对象语法
+
+  - 用javascript 对象表达css属性（不推荐）
+
+    v-bind:style="{css属性名:  data中定义的属性值}"
+
+    示例：
+
+    ```
+    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
+    ```
+
+    附data:
+
+    ```
+    data: {
+      activeColor: 'red',
+      fontSize: 30
+    }
+    ```
+
+    
+
+  - 直接绑定到一个样式对象上（推荐）
+    v-bind:style="data中的数据"
+
+    ```
+    <div v-bind:style="styleObject"></div>
+    ```
+
+    附data：
+
+    ```
+    data: {
+      styleObject: {
+        color: 'red',
+        fontSize: '13px'
+      }
+    }
+    ```
+
+  - 绑定多个style对象
+
+    ```
+    <div v-bind:style="[static,choose]"></div>
+    ```
+
+    ```
+    data: {
+      static: {
+        fontSize: '13px'
+        border:'1px solid red'
+      },
+      choose:{
+      	color:'red'
+      }
+    }
+    ```
+
+    
+

vue/vue简介.md

@@ -0,0 +1,103 @@
+# vue简介
+
+### vue是什么
+
+Vue  是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层
+
+### vue引入
+
+- 创建一个html文件
+
+- 通过cdn 引入v
+
+  - ```
+    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    ```
+
+  - ```
+    <!-- 生产环境版本，优化了尺寸和速度 -->
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    ```
+
+  > 当按下f12， 查看console里显示如下内容  证明我们的vue引入成功啦
+
+  ![image-20201221153546347](vue简介.assets/image-20201221153546347.png)
+
+- 下载vue 源码 然后从本地引入
+
+
+
+
+### vue 创建基本实例：
+
+文本插值：{{data中的属性}}
+
+html:
+
+```
+<div id="app">
+  {{ message }}
+</div>
+```
+
+js部分：
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    message: 'Hello Vue!'
+  }
+  //data属性就是用来绑定数据到HTML的
+})
+```
+
+效果：
+
+![image-20201221154507952](vue简介.assets/image-20201221154507952.png)
+
+
+
+> 注意：
+>
+> 	1. 一个vue应用汇挂载到一个dom 元素上，对于这个实例是id=app的div
+> 	2. 现在数据和dom 已经建立了关联，而且所有内容都是响应式的，这意味着我们如果在js中修改app.message的值，那么页面上显示的内容也会随之改变 查看过程中无需刷新
+> 	3. 现在开始我们不再直接和html直接交互了,交互操作放在新创建的Vue实例内部
+
+
+
+
+
+绑定元素的属性（attribute）  **v-bind**
+
+
+
+html:
+
+```
+<div id="app-2">
+  <span v-bind:title="message">
+    鼠标悬停几秒钟查看此处动态绑定的提示信息！
+  </span>
+</div>
+```
+
+
+
+js：
+
+```
+var app2 = new Vue(var app2 = new Vue({
+  el: '#app-2',
+  data: { 
+    message: '这是悬停时的提示信息哦'
+  t}
+})
+```
+
+> v--bind  被称为指令。指令带有前缀‘v-’ 来表示他们是vue 提供的 特殊内容。他们会在渲染的dom上应用特殊的相应行为  即为渲染的dom添加一个属性
+>
+> v-bind:+属性名="属性值"
+>
+> v-bind 的缩写是 :

vue/事件.md

@@ -0,0 +1,115 @@
+# vue 方法（事件处理）
+
+### 事件监听
+
+可以用v-on指令监听DOM事件，并在触发时运行一些javascript  v-on 简写为@
+
+事件处理方法
+
+- 直接触发javascript代码(不推荐)
+
+示例：
+
+```
+ <div id="app" >
+        <button v-on:click="alert('hello!!!')">测试</button>
+ </div>
+```
+
+- 在内联javascript 语句中调用方法（不推荐）
+
+  ```
+  <div id="example-3">
+    <button v-on:click="say()">Say hi</button>
+  </div>
+  ```
+
+  ```
+  new Vue({
+    el: '#example-3',
+    methods: {
+      say: function () {
+        alert('hi')
+      }
+    }
+  })
+  ```
+
+  
+
+- 事件处理方法（推荐）
+
+  ```
+   <div id="app" >
+          <button v-on:click="say">测试</button>
+   </div>
+  ```
+
+  ```
+  new Vue({
+    el: '#example-3',
+    methods: {
+      say: function () {
+        alert('hi')
+      }
+    }
+  })
+  ```
+
+  > methods中注册的是触发时执行的函数，也叫方法
+
+
+
+### 事件修饰符
+
+- `.stop`
+
+  > 等同于JavaScript中的event.stopPropagation()，防止事件冒泡
+
+- `.once`
+
+  > 只会触发一次
+
+使用：
+
+```
+<a v-on:click.stop="doThis"></a>
+```
+
+可以同时使用多个修饰符
+
+```
+<a v-on:click.stop.once="doThat"></a>
+```
+
+
+
+
+
+### 按键修饰符（自行拓展）
+
+监听键盘事件：
+
+@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
+
+```
+获取按键的键码 e.keyCode
+@keyup.delete    删除键
+
+@keyup.enter 回车
+
+@keyup.esc  ESC
+
+@keyup.space 空格
+
+@keyup.tab TAB
+
+@keyup.left     左键
+
+@keyup.right    右键
+
+@keyup.up    上键
+
+@keyup.down  下键
+```
+

vue/循环渲染.md

@@ -0,0 +1,89 @@
+# 循环渲染
+
+### v-for 遍历数组
+
+语法：
+
+​	v-for="(item,index) in arr" :key="index"
+
+> ​	arr是被渲染的数组，item是被迭代的数组元素的别名 ， index 指代数组的索引值 
+
+示例：
+
+```
+ <div v-for="(item,index) in arr" :key="index">
+      第{{index}} 个元素  值为{{item}}
+ </div>
+ 
+ 变体：
+  <div v-for="(i,j) in pics" :key="j">
+      第{{j}} 个元素  值为{{i}}
+ </div>
+```
+
+```
+var app = new Vue({
+            el: '#app',
+            data: {
+               arr:['a','b','c','d','e']
+            },
+        })
+```
+
+效果如下：
+
+![image-20201222101315624](循环渲染.assets/image-20201222101315624.png)
+
+
+
+### v-for 遍历对象的属性
+
+
+
+语法： 
+
+​	v-for="(item,index) in obj" :key="index"
+
+> obj 是要遍历的对象   item 指代的是对象的值    index 指代的是对象的键
+
+示例：
+
+```
+ <div v-for="(item,index) in obj" :key="index">
+      键为index  值为{{item}}
+ </div>
+```
+
+```
+var app = new Vue({
+    el: '#app',
+    data: {
+        obj: {
+        title: 'How to do lists in Vue',
+        author: 'Jane Doe',
+        publishedAt: '2016-04-10'
+        }
+    },
+})
+```
+
+
+
+效果如下：
+
+![image-20201222110247849](循环渲染.assets/image-20201222110247849.png)
+
+
+
+### v-for 遍历范围值
+
+```
+<div>
+  <span v-for="n in 10">{{ n }} </span>
+</div>
+```
+
+![image-20201222111007833](循环渲染.assets/image-20201222111007833.png)
+
+
+

vue/条件渲染.md

@@ -0,0 +1,94 @@
+# 条件渲染
+
+### v-if
+
+v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染
+
+```
+<h1 v-if="show">条件符合</h1>
+//show的值转化后为true的时候显示条件符合
+```
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+   	show:true
+  }
+  //data属性就是用来绑定数据到HTML的
+})
+```
+
+
+
+### v-else
+
+也可以用v-else 添加一个"else"块 用来显示条件不符合时展示的内容
+
+```
+<h1 v-else="show">条件不符合</h1>
+```
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+   	show:false
+  }
+})
+```
+
+
+
+### v-else-if
+
+`v-else-if`，顾名思义，充当 `v-if` 的“else-if 块”，可以连续使用
+
+```
+<div v-if="type === 'A'">
+  A
+</div>
+<div v-else-if="type === 'B'">
+  B
+</div>
+<div v-else-if="type === 'C'">
+  C
+</div>
+<div v-else>
+  Not A/B/C
+</div>
+```
+
+
+
+
+
+# v-show
+
+v-show 也适用于根据条件展示元素  用法跟v-if基本一样  
+
+但是v-show不支持template元素 也不支持v-else, v-else-if
+
+```
+<h1 v-show="ok">Hello!</h1>
+```
+
+不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中。`v-show` 只是简单地切换元素的 CSS property `display`。
+
+### v-show vs v-if
+
+v-if  只有在条件计算后值为true时，元素才会被渲染
+
+v-show 是不管条件为true还是false 元素总会被渲染 只是 如果条件为false 元素就会被附上display:none 从而隐藏
+
+
+
+> 引自官方：
+>
+> `v-if` 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
+>
+> `v-if` 也是**惰性的**：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
+>
+> 相比之下，`v-show` 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
+>
+> 一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。

vue/表单输入绑定v-model.md

@@ -0,0 +1,175 @@
+# 表单输入绑定 v-model
+
+### 基本用法
+
+用v-model 指令在表单input, textarea, select 元素上创建双向绑定值
+
+v-model 使用时，会忽略所有表单元素的value, checked, selected 属性设置的初始值，表单元素的初始值由v-model的初始值决定
+
+
+
+v-model为不同的输入元素使用不同的property并抛出不同的事件
+
+- text 和 textarea 元素使用 `value` property 和 `input` 事件；
+- checkbox 和 radio 使用 `checked` property 和 `change` 事件；
+- select 字段将 `value` 作为 prop 并将 `change` 作为事件。
+
+### v-model 使用
+
+语法：v-model="data中的属性"
+
+示例：
+
+- 文本
+
+  ```
+  <input v-model="message" placeholder="edit me">
+  <p>Message is: {{ message }}</p>
+  ```
+
+  
+
+- 多行文本
+
+  ```
+  <span>Multiline message is:</span>
+  <p style="white-space: pre-line;">{{ message }}</p>
+  <br>
+  <textarea v-model="message" placeholder="add multiple lines"></textarea>
+  ```
+
+  
+
+- 复选框
+
+  - 单个复选框
+
+  ```
+  <input type="checkbox" id="checkbox" v-model="checked">
+  <label for="checkbox">{{ checked }}</label>
+  ```
+
+  ![image-20201222175835286](表单输入绑定v-model.assets/image-20201222175835286.png)未选中
+
+  
+
+  ​	![image-20201222175902811](表单输入绑定v-model.assets/image-20201222175902811.png)    已选中
+
+  
+
+  - 多个复选框  绑定到同一个数组
+
+    ```
+    <input type="checkbox" id="jack" value="Jackval" v-model="checkedNames">
+    <label for="jack">Jack</label>
+    <input type="checkbox" id="john" value="Johnval" v-model="checkedNames">
+    <label for="john">John</label>
+    <input type="checkbox" id="mike" value="Mikeval" v-model="checkedNames">
+    <label for="mike">Mike</label>
+    <br>
+    <span>Checked names: {{ checkedNames }}</span>
+    ```
+
+    ```
+    new Vue({
+      el: '...',
+      data: {
+        checkedNames: []
+      }
+    })
+    ```
+
+    未选择时：![image-20201222180149362](表单输入绑定v-model.assets/image-20201222180149362.png)
+
+    选中时：![image-20201222180209565](表单输入绑定v-model.assets/image-20201222180209565.png)
+
+    > 注 选中的时候v-modal对应的是input元素的value 属性
+
+- 单选按钮
+
+  ```
+  <div id="example-4">
+    <input type="radio" id="one" value="Oneval" v-model="picked">
+    <label for="one">One</label>
+    <br>
+    <input type="radio" id="two" value="Twoval" v-model="picked">
+    <label for="two">Two</label>
+    <br>
+    <span>Picked: {{ picked }}</span>
+  </div>
+  ```
+
+  ```
+  new Vue({
+    el: '#example-4',
+    data: {
+      picked: ''
+    }
+  })
+  ```
+
+  未选时：![image-20201222180600963](表单输入绑定v-model.assets/image-20201222180600963.png)
+
+  选择后：
+
+  ![image-20201222180642082](表单输入绑定v-model.assets/image-20201222180642082.png)
+
+  > 注 选中的时候v-modal对应的是input元素的value 属性
+
+- 选择框
+
+  - 单选：
+
+  ```
+  <div id="example-5">
+    <select v-model="selected">
+      <option disabled value="">请选择</option>
+      <option>A</option>
+      <option>B</option>
+      <option>C</option>
+    </select>
+    <span>Selected: {{ selected }}</span>
+  </div>
+  ```
+
+  ```
+  new Vue({
+    el: '...',
+    data: {
+      selected: ''
+    }
+  })
+  ```
+
+  
+
+  未选择：![image-20201222180952802](表单输入绑定v-model.assets/image-20201222180952802.png)
+
+  选择后：![image-20201222181015791](表单输入绑定v-model.assets/image-20201222181015791.png)
+
+  > 注 选中的时候v-modal对应的是option元素的value属性
+
+  - 多选
+
+    ```
+    <div id="example-6">
+      <select v-model="selected" multiple style="width: 50px;">
+        <option>A</option>
+        <option>B</option>
+        <option>C</option>
+      </select>
+      <br>
+      <span>Selected: {{ selected }}</span>
+    </div>
+    ```
+
+    ```
+    new Vue({
+      el: '#example-6',
+      data: {
+        selected: []
+      }
+    })
+    ```
+
+    

vue/计算属性和监听属性.md

@@ -0,0 +1,172 @@
+# 计算属性和监听属性
+
+## 计算属性
+
+使用场景：对于任何复杂逻辑，都应该使用计算属性
+
+计算属性的声明：
+
+只有get 的计算属性使用：
+
+- 在computed属性对象中定义计算属性的方法
+- 在页面中使用{{方法名}}来显示计算的结果
+- 通过getter/setter实现对属性数据的显示和监视
+
+计算属性由两部分组成，
+
+- get		获取计算属性的值
+
+- set        设置计算属性的值
+
+  get和set都有的计算属性的使用（用的时候可以只用一个）：
+
+  ```
+   <div id="app">
+          <p>{{firstName}}</p>
+          <p>{{lastName}}</p>
+          <p>{{fullName}}</p>
+          <button @click="changename">change</button>
+      </div>
+  ```
+
+  ​		
+
+```
+var app = new Vue({
+            el: '#app',
+            data: {
+                firstName:"顾",
+                lastName:"青衣",
+            },
+            methods:{
+                changename(){
+                    this.fullName="顾 念" //中间需要加空格，不然下面的没法拆分
+                } 
+            },
+            computed: {
+                fullName: {
+                    // getter
+                    get: function () {
+                        
+                        return this.firstName + ' ' + this.lastName
+                    },
+                    // setter
+                    set: function (newValue) {
+                        //this.fullName = newValue 这种写法会报错
+                        var names = newValue.split(' ')
+                        this.firstName = names[0]//对它的依赖进行赋值
+                        this.lastName = names[names.length - 1]
+                    }
+                }
+            }
+        })
+```
+
+注：
+
+计算属性是基于它们的依赖进行缓存的，只有相关的依赖发生改变时才会重新求值。只要相关的依赖未改变，只会返回之前的结果，不会执行函数。
+
+computed依赖监控自己定义的变量，computed不能计算已经在data里面定义过的值，该变量在computed里面定义，然后可以在页面上进行数据绑定
+
+computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
+
+
+
+
+
+## watch
+
+#### 作用
+
+- 主要用于监控vue实例的变化，监控的变量必须在data里面声明才可以
+- 可以监控一个变量或者一个对象，但是只能监控整个对象或单个变量，无法监控对象的具体属性
+
+### 使用
+
+- 通过vm对象的$watch()或watch配置来监视指定的属性
+- 当属性变化时，回调函数自动调用，在函数内部进行计算
+- watch不能双向的绑定值
+
+### 使用场景
+
+- watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
+
+示例：
+
+```
+watch:{
+    // 监听firstName
+    firstName(value){
+        console.log(`watch监视到firstName发生改变：${value}`);
+        //更新fullName
+        this.fullName  = value + '·' + this.lastName
+        },
+    // 监听lastName
+    lastName(value){
+        console.log(`watch监视到lastName发生改变：${value}`);
+        this.fullName  = this.firstName + '·' + value
+        }
+    }
+```
+
+监听复杂数据类型： （拓展）
+
+> watch:{
+>
+> ​	监听的数据名:{
+>
+> ​		handler(val,oldval){
+>
+> ​			...  发生变化后的回调函数 
+>
+> ​		}，
+>
+> ​		deep:true  是否深度监听
+>
+> ​	}
+>
+> }
+
+```
+var app = new Vue({
+            el: '#app',
+            data: {
+                b: {
+                    c: 1
+                }
+            },
+            watch: {
+                // newValue(val, oldVal) {
+                //     console.log("b.c: " + val, oldVal);
+                // }
+                b: {
+                    handler(val, oldval) {
+                        console.log(val, oldval)
+
+                    },
+                    deep:true
+                }
+            },
+
+        })
+        app.b.c = 3
+```
+
+
+
+## 计算属性&监听属性&方法
+
+#### 计算属性vs 方法
+
+不同的是**计算属性是基于它们的响应式依赖进行缓存的**。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `message` 还没有发生改变，多次访问 `reversedMessage` 计算属性会立即返回之前的计算结果，而不必再次执行函数。 
+
+但是 方法每次调用都会执行
+
+
+
+#### 计算属性vs监听属性
+
+- computed 的变量不在data中定义； watch的变量需要在data中定义
+- computed支持缓存，只有依赖数据发生改变才会重新计算 ；watch 
+- computed 可以监听对象的某个具体属性 ；watch一般用来监听简单数据类型，如果监听对象等复杂数据类型，则无法监听对象具体某个属性  但是watch 也可以进行深度监听，监听整个对象的变化
+