vue的学习(常用功能1)

1、MVP和MVVM模式！！！

传统的前端开发 mvp模式

mvp模式，其中m是数据层 （模型层，可以抽象理解为数据，例如：用ajax中获取数据），

v是视图层（html），

p是控制器，就是使用jq来实现业务逻辑相关操作(DOM操作很多)

vue框架同样有v层和m层，没有p层，多了一层vm层。

M是new实例里面相关操作，v是视图层，vm即vue自己进行操作转化！

vm层：虚拟dom+es5的小方法Object.defineProperty

mvvm层最核心的层是数据层

2、vue中的基本语法

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图(例如ajax请求列表)。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作（dom渲染完）。

 

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）。

 

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，故输出了结果“唐浩益”。

 

计算属性（computed）、方法（methods）、事件监听（watch）
computed属性，会有一个缓存机制，计算页面重新加载，只要计算的属性没有发生改变，就不会重复执行computed，而方法methods中，只要页面有重新加载就会被重复执行，
对于监听事件（watch），需要监听的属性有发生变化时才会执行！！也既有缓存机制，但是相比代码量会比computed多！！

computed中的get和set函数！！！

 

3、类名跟样式表达式

：class=“{active：isActive}” 这时候，是通过isActive来控制active类名是否要显示

：class=“[actived]” 这个时候activde的值是通过data里面的值来控制的

样式表达式

：style=“styleObejt”  styleObject的值是通过data来赋值==》styleObject：{color：#fff；}

4、key值标识唯一性

vue虚拟dom中，会有自带缓存复用机制，如果它检测到页面上相同的东西没有发生变化，它就会进行有效的复用！

例如：用户名的时候input的输入值是小明，当你把用户名切换为密码是，input上的值还是小明，这是因为input被复用了

当给下面的两个input加key值，那么这时候input中的元素就不会被有效地复用！

v-for指令

使用该指令的时候，设置key值是不要使用index来赋值，而是使用后端提供的id，这样可以保证唯一性跟提高性能

5、数组操作

在vue中，对数值进行时不能直接通过下标来增加（删除）数组，通过这种方式增加数组（删除），数据上是变了，但是页面上不会变。

例如list[4]={"id":4,name:"55"}这时候页面上的list元素还是只有三个！

在vue中如果想操作数组的同时，页面跟着变化。有两种方法。

第一种是使用数组中的7种编译方法来操作数组

// push/pop/shift/unshift/spalice/sort/reverse

 第二种是直接改变list数据的指定空间来改变

在列表渲染中使用包裹占位符template，来包裹需要循环的列表，这时候template不会被页面渲染出来！！

对象操作

第一点：遍历对象的时候，直接往对象里面加值，这时候页面也是没有跟着变的，同样可以改变对象的引用==》数据指向新的引用对象

第二点：用vue中的set方法方法来改变对象（第一个参数是key，第二个参数是name）和数组（第一个参数是下标，第二个参数是对应的值）

对象：

 

使用vue实例化方法的$set方法！！！！ 

this.$set(this.data, 'name', 'zhangsan')  第一个参数是key,第二个参数是value

除了$set，还可以使用object.assign

Object.assign({}, this.data, { age:'lisi' })