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