声明式和命令式

  • 声明式:按照命令实现，不管你的需求是什么，例如for

  • 命令式：告诉他你的需要，让他自己想出实现的办法，例数组内置方法forEach

    1. ![](https://cdn.nlark.com/yuque/0/2019/png/456562/1570388620160-39041079-a64f-4ea4-8b96-6f33951dd8b4.png?x-oss-process=image/resize,w_465#align=left&display=inline&height=262&margin=%5Bobject%20Object%5D&originHeight=262&originWidth=465&status=done&style=none&width=465)

    渐进式

    类库或者框架都是重量级的，里面包含很多方法，但是实际项目开发中，用不到全部的方法，就需要在开发时，会用功能按照模块进行单独开发，使用者可根据自身情况选择需要的模块进行使用

    vue的基础语法

    new Vue(options)

  1. 返回值vm（viewModel）
  2. el:挂载元素，基于querySelector获取视图容器，不能使用在html或者body上；把那个标签挂载到vue当中，一般一个页面，只实例一个vue对象，一般是一个id选择器
  3. data
  • 可通过vm数据名的方式去访问数据
  • 胡子语法中绑定的数据值是对象类型，会基于JSON.stringify把其编译为字符串呈现出来，不是直接toString处理

  • 不是所有的数据更改最后都会通知视图重新渲染

    1. 初始数据是一个对象，对象中没有xx键值对，后期新增的键值对不会让视图重新渲染 

      1.   1.在初始数据的时候，就把视图需要的数据提前声明，（可以使用空值，但是需要有这个属性）-》原理：只有data中初始化过的属性才有get/set
      2.     2.不要修改某个属性名，而是把对象的值整体替换（指向新的堆内存）
      3.     3.可以基于vm.$set内置方法修改数据：vm.$set(obj,key,value)key 是要修改或者新增的属性名

      val 属性的新值

    2. 当数据是一个数组时，修改数据基于arr[n]=xx或者借助arr.length—等操作方式，不能让视图重新渲染的，需要基于：

      1.   1.push/pop等内置的方式
      2.     2. 重新把arr的值重写（指向新的堆内存）
      3.     3. vm.$set 用$set方法修改完数据，页面会自动更新；

  • 必须是函数的原因：组件是复用的，js对象里对应是引用关系，当组件是一个对象时，子组件中的data属性值会相互污染，产生副作用，因此data必须是一个函数，返回时，不会改变其值，但是new Vue的实例不需要被复用，不用是返回对象

  1. methods
    methods和data中的数据会放在vm上，名字不能冲突，冲突会报错，methods中的this指向都是实例

    vue的基础指令

    v-model

    v-model=”变量”：（表单元素）相当于把这个变量跟这个表单元素绑定在一起，变量改变表单元素的内容跟着改变，内容改变，变量也会改变。会忽略value,checked，selected，将数据绑定到视图上。
    1. 先把数据绑定给表单元素，一般把数据赋值给表单元素的value
    2. 监听表单元素的内容改变
    3. 内容改变后，会把对应的数据也改变
    4. 对应的数据改变，视图中所有用到数据的地方都会重新渲染，在vue框架中给表单元素设置value等属性没有意义

单复选框:（补个例子）

  1. 按照v-model分组，单选框装备的数据是一个值，复选框真被的数据是一组值
  2. 每个矿都有自己的value,谁被选中，数组值就是被选中元素的value值；反之，值是多少，对应的value的元素也会被默认选中

v-model原理
语法糖：也译为糖衣语法，主要是方便程序员使用，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。
v-model在内部为不同的输入使用不同的属性并抛出不同的事件：

  1. input输入框，文本域，下拉选择框,组件级别封装普通元素
  • 将其 value 绑定到一个名叫 value 的 prop 上
  • 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出 下拉选择框如果是多选的话value应传入一个数组，this.$emit(‘input’,arr)时也应该是一个数组
  1. 对于单选框，多选框
  • 将其 checked 绑定到一个名叫 checked 的 prop 上
  • 在其 change 事件被触发时，将新的值通过自定义的 change 事件抛出 如果是多选框的话checked应传入一个数组，this.$emit(‘change’,arr)时也应该是一个数组 因为 text 和 textarea ,select元素使用 value 属性和 input 事件； checkbox 和 radio 使用 checked 属性和 change 事件. ```javascript

相当于

  2. ** v-model知识**:[https://www.cnblogs.com/yaoyao- sun/p/10542612.html](https://www.cnblogs.com/yaoyao-sun/p/10542612.html)<br />[https://zhuanlan.zhihu.com/p/113947656](https://zhuanlan.zhihu.com/p/113947656)![](https://cdn.nlark.com/yuque/0/2020/png/335555/1578455958421-44afcf84-b152-43cf-8e82-39921869f9f7.png?x-oss-process=image%2Fresize%2Cw_573#align=left&display=inline&height=113&margin=%5Bobject%20Object%5D&originHeight=113&originWidth=573&status=done&style=none&width=573)
  3. <a name="EN4Rm"></a>
  4. #### v-text
  5. v-text='变量'相当于小胡子，避免小胡子的毛病，v-text取代{{}} v-cloak 解决闪烁（块）问题,后期都可以不采用，使用v-cloak要加样式<br />v-once:绑定一次，后面不论数据怎么改变，视图也都不会重新渲染
  6. <a name="d7e1C"></a>
  7. #### v-bind
  8. v-bind="变量":用来处理行内属性（str,class,style...）的属性<br />class和style如何实现绑定v-bind<br />v-class<br />    v-bind:class时 ，绑定的样式和class绑定的样式不冲突<br />
  9. > 1. 绑定的是对象  <div  :class="{样式类名:响应式数据,....}">麽</div>
  10. > 
  11.          响应式数据为true则有这个样式类，反之没有
  13. ```javascript
  14. //第一种写法
  15. <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
  17. data: {
  18.   isActive: true,
  19.   hasError: false
  20. }
  21. // 第二种写法
  23. <div v-bind:class="classObject"></div>
  24. data:{
  25.      isActive:true,
  26.      error:null
  27.    },
  28.     computed:{
  29.         classObject:function(){
  30.             return{
  31.                active:this.isActive && !this.error,
  32.               'text-danger': this.error && this.error.type === 'fatal'
  33.             }
  34.         }
  35.     }
  1. 绑定的是数组：
    麽
  1.          控制响应式数据的值是对应的样式类或者没有值，来控制是否有这个样式
  1. //第一种写法
  2. <div v-bind:class="[activeClass,errorClass]"></div>
  4. data: {
  5.    activeClass:'active',
  6.    errorClass:'text-danger'
  7. }
  9. //第二种写法
  10. //三元表达式
  11. <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  13. //当有多个条件class时，可以在数组语法中使用对象语法
  15. <div v-bind:class="[{ active: isActive }, errorClass]"></div>

v-style

v-bind:style时，绑定的样式 1.绑定的是对象

我很帅

  1. div v-bind:class="[activeClass, errorClass]"></div>
  3. data: {
  4.   activeClass: 'active',
  5.   errorClass: 'text-danger'
  6. }
  7. //用法同class

v-bind:style,绑定的是数组，可以将多个样式对象应用到同一个元素上

  1. <div v-bind:style="[baseStyles, overridingStyles]"></div>

v-on

v-on:绑定需要定义在methods中，不能和data里的内容重名，this指向的是实例，不能使用箭头函数，事件源对象如果不写括号，可以自动传入，否则只v-on能手动传入$event

1.事件触发的时候，需要传递参数信息，把方法加小括号，$event是事件对象 v-on:click=’sum($event,10,20)’

  1. 事件修饰符

    1.    常规修饰符：@click.prevent/stop = 'xxx'
    2.     按键修饰符：@keydown.enter/space/delete/up/right/down/left...='xxx'
    3.    键盘码：@keydown.13 = 'xxx'
    4.    组合按键：@keydown.alt.67 = 'xxx'  //=>ALT+C

v-html=变量’’：相当于原生的inneHTML，不要用在用户提交的地方（不安全）

v-show&v-if

v-show:控制元素样式的显示与隐藏，后面是一个布尔类型(不是的会转换成布尔)
v-if:在template标签使用时，v-show不支持，v-if可以；如果对应的值是TRUE，当前元素会在结构中显示，如果是FALSE，当前元素会在结构中移除（它控制的是组件的加载和卸载的操作 =>DOM的增加和删除，是条件渲染）；还有对应的 v-else-if / v-else 等指令；

v-if和v-show的区别

  1. v-if是控制组件存不存在，对于结果是false，不存在的组件来说，视图渲染的时候不需要渲染这部分内容，而v-show则不行，因为不管是显示还是隐藏，结构都在，所以试图渲染的时候这部分也需要渲染
  2. 过于频繁的切换操作中，v-if及v-if系列的频率要低一些
  3. v-if是完整的销毁与重新创建，v-show属于css切换

v-for

v-for:解决循环问题（数组，对象，字符串，数字），会复用原有的结构，要循环谁就在谁的身上增加v-for属性，默认是value of |in 数组/ (value,index) of|in 数组/(value,key,index) of |in 数组

v-for在对像上使用

for of循环

  1. 获取的不是属性名是属性值
  2. 不会遍历原型上公有的属性方法，自定义的属性方法也不可以
  3. 只能遍历可以被迭代的数据类型值（（Symbol.iteratoer）：Array、String、Arguments、NodeList、Set、Map等）,普通对象是不可以被迭代的数据，因而不能用for of 循环

for in for(let key in obj ){} key 遍历的属性名
obj[key]属性值 优先遍历属性名为数字的， 会把所属类原型上自定义的属性方法也遍历到

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。不推荐同时使用
key的重点（详细见dom diff）
Vue 中 key 的作用是：key 是为 Vue 中 vnode 的唯一标记利于diff操作
更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快，