第一天：关于vue的基础（1）

1.$vm.$destroy()的作用是解除dom和挂载元素数据之间的关系，当使用了vm.$destory() 的时候，如果这个时候改变数据元素，dom元素之间的渲染并不会发生变化，比如这个时候写，vm.name ='hahha'这个时候dom元素就不会发生变化

2.vue的生命周期

总共有八个钩子函数，构造出一个vue实例之后，第一步先beforeCreate,然后created的，这哥时候会判断vue实例是否有template模板元素，如果有template之后就渲染template元素上面的东西，如果没有的话，就直接渲染div上面的内容比如没有template就渲染变量name的内容

 

mounted 的时候是把数据一斤挂载到dom元素上面了

3.模板语法

渲染总共三种方式，第一种{{变量}}，第二种v-text="变量名"，第三种 v-html="变量名"

4.计算属性

computed的作用就是为了避免语法全部写在{{}}里面，闲的比较冗余，或者的话在定义一个变量就也很冗余，所以就有了计算属性这个东西，计算属性具有缓存机制，当页面刷新与compute中涉及元素无关的时候，这个时候computed不会再次执行，如，当只有vm的name 和name1发生改变的时候这个时候computed才会去执行，当age发生改变的时候，computed并不会执行

 

注意computed与方法 的区别就是，methods里面的方法，只要页面刷新就会进行执行一次，如果一个方法中的返回值要展示在dom中的时候应该是{{方法名()}}

这个方法的写法文档上面生效了，但是我写的没有生效也不知道是什么原因

watch 写的时候也是很麻烦的说，所以同样的情况下还是用computed比较划算，同样的watch也是有缓存机制的

computed里面可以写对象，对象中 包含两个方法，一个是get还有一个是set方法，

使用computed的时候那个set方法，记住直接修改一个值只能是数据上面的修改，如果想要dom元素的修改，还必须给vm中的数据元素进行赋值

 

 

5.dom样式绑定，分成class以及style

class的绑定形式分成两种一种是对象是绑定还有一种是数组

对象的方式是: :class ={'类名'： ‘data中的数据’}，

 

判定条件是当后面的数据条件成立的时候才会展示类名中的样式

点击改变颜色的方法

 

第二种class是的方法是数组的方法

：class= "[data中的变量名]"

需要注意的是，数组中别的变量可能不只是一个还有可能是很多个

 

style的样式绑定也有两种，第一种是obj格式，第二种是数组格式

：style= "data中的对象或者直接是一个对象{}"

第二种是： style=[],其实十一个数组对象

6.v-if he v-show 的区别

如果都是false的情况下，v-if的话dom元素根本就不会渲染，但是v-show的话，dom元素会被渲染但是现实的是display:none

r如果没有将数据挂载到元素下面的时候，就是数据改变，dom元素没有发生渲染

如果动态展示是否显示一个元素的时候，v-show的性能可能会更好因为，v-if要重新渲染dom元素，而v-show只是显示和隐藏

v-if ="show" v-else if ="" v-else这谢东席必须连用中间不能夹杂其他的东西，否则会报错的

注意：dom中的元素渲染的时候会尽可能的复用，所以可能导致有些输入框的内容清除不掉，这个时候加个key表示独一无二，dom元素不能将其复用的意思

如果不加可以的时候，如果邮箱中input输入之后，改变vm.showTest 的值，这个时候qq中也会存在值

 

8.遍历渲染:包括数组和对象

数组的话 v-for="(item,index) of  arr"

对象 v-for ="(item,key,index) of obj"第一个是元素内容，第二是对象的键，第三个是index顺序

为了避免复用也要加上key值进行标志，:key ="index"的话性能会降低，所以一般使用eldata数据中的东西进行标注

增加一个数组重新渲染的方法：一般想到的可能是 arr[arr.length] = '一个新的数据'，但是内容根本不会渲染进去,可以看出来数据元素已经是添加上去了，但是dom元素却是没有渲染进来

原因是因为，vue渲染的时候是根据对象中的set和get进行渲染的，但是数组中并没有get和set

解决方法

一： 重新赋值,这样子的haul会显得比较冗余

二：使用一些变异方法，比如push pop shift 等等

 三是手动set方法

包括两个，第一个是在vm实例中直接set，主要vmde属性要加上$

d

第二个就是在vuez中进行set操作

 

直接修改对象属性或者是添加对象属性的时候应该怎么样操作

传统想法肯定是vm.obj.属性 = 值

但是这个并不能实现

也是只改变了数据元素而dom元素没有去渲染

如果直接修改get和set name 是可以发生触发打印的，但是如果在person.name.name ='111'这个是不能触发的

这个时候就没有触发set方法

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。例如
 

解决方法和数组相同

第一就是直接全部赋值

第二就是

 

9.template 的作用就是包裹，渲染的时候不会被渲染成div元素

10.for of 和for in的区别

 for in的话 index是一个字符串

但是for of 中的index不是一个字符串

然后就是 for of 不能去遍历一个对象的， 如果去遍历对象的手就会发生报错

总而言之的话，for in适用于对象

for of适用于 数组

如果要用for of 去遍历对象的时候就必须使用for (var i of Object.keys(obj))这个时候才能遍历出key值

使用for in遍历的时候就能直接遍历出key值

使用for of遍历数组的时候就，遍历的直接是数组的值，使用forin的时候遍历的时候，遍历的是数组小标