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)、标签引入

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() 完全销毁

 

你可能感兴趣的:(vue)