@VUE个人理解重点

@VUE个人理解重点

1=>VUE渐进式框架

没有多做职责之外的事情，要什么拿什么，一点一点渐进，没有那么多硬性要求和主张问题，不需要强制主张

2=>Mvvm定义

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定

3=>响应式系统

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

4=>VUE的vdom=>虚拟dom

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

5=>全局注册组件

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})
用这个组件
<todo-item></todo-item>

6=>子组件接收父组件传值props（父组件向子组件传值问题）

父组件：通过v-bind绑定传给子组件的值,例如(:msg=‘false’)
子组件：通过props接受父组件的值，例如(props:[‘msg’])
这样就实现了父组件向子组件传值，子组件接受值的过程

7=>计算属性（computed）是一种属性！（计算属性默认只有getter，必要时可以自己定义setter）

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: "Hello"

Computed reversed message: "olleH"

关于计算属性的缓存：计算属性是基于响应式依赖进行缓存的，只要这个message不变，计算属性会立即返回之前的计算结果，而不是再次执行这个函数

关于计算属性和侦听属性，当一个数据A的变化依赖于其他数据的变化B和C时，侦听属性侦听B和C的变化得出A的值，而计算属性则是直接看BC和A的表达式得出A的值是否变化

8=>样式绑定（class和style）

v-bind:class =>绑定HTML的class属性，可以动态的切换class
1. 对象语法，{ active: isActive}作为对象,isActive直接定义在data里(true/false)，active作为类选择器在style里面定义css样式

	v-bind:class="{ active: isActive}"
		data: {
 		 isActive: true
		}

2.对象语法，classObject作为一个对象定义在data里，classObject里可以定义多个css类选择器，active作为类选择器在style里面定义css样式

	v-bind:class="classObject"
		data: {
 	 	classObject: {
 	   	active: true,}
		}

3.数组语法，active和text-danger作为类选择器定义在css中

	v-bind:class="[activeClass, errorClass]"
		data: {
 		 activeClass: 'active',
 		 errorClass: 'text-danger'
		}

v-bind:style =>绑定HTML的style属性，通过style属性绑定到一个对象上，通过在data里定义这一个对象的样式(color,font-size…等）
1.对象语法

v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
	data: {
  	activeColor: 'red',
  	fontSize: 30
	}

2.对象语法，直接绑定到一个样式对象

v-bind:style="styleObject"
	data: {
	  styleObject: {
 	   color: 'red',
  	  fontSize: '13px'}}

3.数组语法

v-bind:style="[baseStyles, overridingStyles]"

9=>v-if/v-else/v-else-if

v-else充当v-if的else块
v-else-if充当v-if的else if块

10=> v-if和v-show

v-if：有更高的切换开销，即每次都要重建DOM
v-show：有更高的初始渲染开销，即保存在缓存里，可以频繁切换
如果一个元素有很高的出现率经常会被使用或者被频繁切换，更加适合v-show
如果不会频繁切换适合用v-if，因为他的初始渲染比较快
！！！当v-if和v-for一起使用的时候，v-for的优先级比较高，所以不建议同时使用

11=>v-for

数组: 在遍历渲染数组时可以用item in/of items 这时v-for还可以有第二个参数=>索引即下标
对象：在对象中使用v-for时可以在（a,b,c） in/of items 括号里有三个参数，但是顺序一定是value,key,index（与括号里面的形参无关，如果是一个参数是value，两个参数是value和key，三个参数是全部这三个）
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
根据diff算法对虚拟DOM进行更新时：

12=> 数组更新的检测

变异方法：会改变被这些方法调用的原始数组
举例：
push() 往数组最后面添加一个元素，成功返回当前数组的长度
pop() 删除数组的最后一个元素，成功返回删除元素的值
shift() 删除数组的第一个元素，成功返回删除元素的值
unshift() 往数组最前面添加一个元素，成功返回当前数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除 的个数（必选），第三个是删除后想要在原位置替换的值（可选）
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() 将数组倒序，成功返回倒序后的数组

非变异方法：不会改变原始数组，总是会返回一个新数组例如filter()、concat() 和 slice()

13=>Vue.set===vm.$set

14=>v-model

v-model 指令在表单 input、textarea 及 select元素上创建双向数据绑定。
在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
单选框和复选框差别：data里面绑定的数据一个是数组[ ]，一个是对象’ '。
选择框：

<select  v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

15=>标签中的for属性

for 属性规定 label 与哪个表单元素绑定

16=>组件中的data

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。每一次用组件都会有新的实例被创建。
当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了。

17=>子组件向父组件传值/父组件监听子组件

在子组件中绑定事件：
$emit('方法名'，子组件默认传给父组件的值)
在父组件中监听这个事件：
v-on:方法名=‘方法’，在父组件methods里写这个方法

18=>插槽

如果在一个html里定义一个全局组件，那么<template>里面的元素必须要有一个最大的<div>包裹
为什么要用插槽：当用一个组件的时候，组件里的数据确实可以显示出来，但是如果要在父组件的组件标签里面定义自己的内容那么要在子组件中加入<slot>标签，至于加在哪里就要看父组件的内容需要加在哪里。
插槽的用法：在父组件中用插槽可以对应名字，父组件<template slot="girl">...</template>子组件<slot name="girl"></slot>这样就可以把父组件中…放到子组件应该放的地方，如果插槽没有名字就直接<div>，子组件就直接<slot>