VUE笔记(1)

Vue.js

XSS CSRF

1、什么是Vuejs?

渐进式javaScript的框架

特点：

易用：学习曲线相对低且平滑(react需要掌握什么事函数式编程，angular需要掌握什么事依赖注入，什么事内部模块)

灵活:可在一个库到一套生态中伸缩(小到只用部分组件来写，或者只应用到视图，大到可以用vue全家桶来构建整个系统)

高效:运行快，体积相对小(根据虚拟dom来执行，打包体积较小)

2、为什么使用Vue.js

Js是面向dom的操作，vue是面向数据的驱动。

Vue是一个MVVM设计模式

M-Model             数据模型(业务数据相关，纯js对象)

V-M ViewModel     沟通model与view的桥梁

V-                              业务展示相关，html/css

简单来讲就是：数据通过数据绑定映射到视图上，视图通过和用户的交互，例如点击输入 通过dom的事件回调来对视图的改变， view-model就是一个实例

3、Vuejs如何引入到工程

1)、标签引入

<script src=””></script>

2)、模块引入

import Vue from ‘vue’;

4、metheds和computed的区别

再依赖条件不变的情况下，methods中使用几次就会调用几次，computed是计算过后的依赖条件不变的情况下，只改变一次。

Computed的两种写法

1)、url:function(){

        Return this.protocal+’//’

}

2)、computed:{

        get:function(){

        return this.protocal+’//’+this.host;

},

set:function(val){

        var tmp = val.split(‘//’);

        if(tmp.length >1){

        this.protocal = tmp[0];

        this.host = tmp[1];

}

}

}

5、watch 侦听器(监听数据的变化)

1)、

data:{

        protocol:’http’

}

protocol:function(newValue,oldValue){

        this.url = newValue+’//’+this.host

}

 

2)、

protocol:{

        immediate:true,  //初始化的时候就执行此方法

        handler:function(newValue,oldValue){

        this.url = newValue+’//’+this.host

}

}

3)、如何监听一个对象 deep:true;

data:{

        local:{

protocol:’http’,,

host:’www.baidu.com’

 

}

 

local:{

        immediate:true,  //初始化的时候就执行此方法

        deep:true,                     //深层监听

        handler:function(newValue,oldValue){

        this.url = newValue+’//’+this.host

}

}

 

4)、使用vue内部的API来调用  第一个参数监听的数据，第二个监听的回掉函数 第三个参数接收配置选项

vm.$watch(‘local’, function(newValue,oldValue){

        this.url = newValue+’//’+this.host

},{

        immediate:true,  //初始化的时候就执行此方法

        deep:true,                      //深层监听

 

}

)

5、watch侦听器和computed的区别

1)、在依赖不变的情况下，计算属性能缓存上一次的计算结果，而不会重复执行

2)、计算属性和侦听器的实质，都是一个Watcher的实例

3)、计算属性会代理到对应的Vue实例上(如vm.text),而侦听器不会

6、v-if和v-show

1)、v-if会动态的增删节点

2)、v-show仅仅控制css属性

3)、v-if是惰性的，初始条件为false时不会参与模板编译，v-show始终会参与渲染

4)、v-if会缓存编译结果

 

7、vue封装过的方法

Sort  push pop unshift shift reverse splice

为封装过的方法

Filter concat  slice  vm.arr[i]=’xxx’

两者的区别封装过的直接改变数组，微风装过的需要复制给变量在应用

8、什么是生命周期？

一个事物从诞生、再到发展、持续、直至最后销毁的过程、叫他的生命周期

9、$nextTick([callback]) 设置一个回调，在下一次Dom更新之后执行

10、$forceUpdate()  强制更新

11、$destroy() 完全销毁