vue数据驱动
-操作dom js,jq频繁操作dom 导致页面重会 高性能
js 数据类型
基本：number string boolean null undefined
Object function
Symbol(es6)
vue 类型 {} []
操作数组方法
js: （pop push unshift shift slice splice reverse sort） indexOf lastIndexof concat
vue:数组的变异（括号中的能改变原数组）
用的比较多的：
面试题：forEach，for in ,for,for of 的区别
forEach: 声明式(不关心如何实现) 不支持return
for in : key会变成字符串，包括数组的私有属性也可以打印出来
for of : 即支持return，又可以拿到私有属性 并且是值of数组(不能遍历对象)
filter(过滤) map(映射) some every reduce( includes find -es6方法)
用vue
node版本 cmd：node -v
webstorm vscode
渐进式
vue全家桶 = vue.js + vue-router (客户端路由) + vuex (大规模状态管理) + axios(获取数据) + vue-cli(构建工具)
核心:响应式的数据变化：数据发生改变->组件更新
MVC(backbone) 单向 : model 数据 + view 视图 + controller 控制器
MVVM(angluar,vue) 双向: model 数据 + view 视图 + viewModel 视图模型
Object.defineProperty(es5) 的方法没有替代方案 不支持ie8一下
安装vue
cdn : 给个网址，直接引入网址链接
npm: node packge manger node的包管理工具
记录依赖 npm init 在当前目录下生成一个packge.json文件，用来描述项目的依赖，不能有大写 特殊字符
version 版本号 description 描述
npm install vue
基础
<div id="app">
<!-- 小胡子表达式 可放 表达式 赋值 取值 三元表达式 -->
{{msg === 'aaa'?'bbb':'ccc'}}
</div>
<script>
let vm = new Vue({
el:'#app',//告诉vue能管理的范围 querySelector
data:{//data中的数据会被vm代理，通过vm.msg取到对应的内容
msg:'aaa'
}
});
</script>
双向数据绑定(数据影响视图，视图改变影响数据)
表单元素：input checkbox textarea radio select
通过vue指令实现：directive zhishi dom上的行间属性,vue给这类属性赋予一定的意义实现特殊功能，所有指令都以v- 开头
input中的value属性默认会被忽略掉：selected checked 都没有意义
v-model
v-text === {{}} 放置大括号出现在页面
v-once 只绑定一次 当数据变化不会导致页面刷新
v-html 把html当做html渲染，把普通字符串当成dom渲染，一定是可信任的
Object.defineProperty
<input type="text" id="input">
let obj = {}
Object.defineProperty(obj,'name',{
configurable:false,//是否可删除 delete obj.name
writable:false,//是否可重新赋值 obj.name=1000;
enumerable:false,//是否可枚举
value:1
get(){},//取obj的name值会触发get方法
set(){},//给obj赋值会触发set方法
})
Object.defineProperty双向绑定的原理
let obj={};
let temp = {};
Object.defineProperty(obj,'name',{
get(){//取obj的name属性会触发
return temp.name;
},
set(val){//给obj赋值会触发set方法
temp.name=val;// Maximum call stack size exceeded 超出最大调用错误
input.value = val;
}
})
input.value = obj.name;//页面一加载时，会调用get方法
input.addEventListener('input',function(){
obj.name=this.value;
})
/*
* 实现原理
* 1.页面一加载时，会调用get方法 并把temp.name 赋值给了input.value
* 2.等待输入框的变化,调用set方法，并给obj.name赋值了，set方法接收val(输入的)参数后，又赋值给了temp.name,最后将新的值给了输入框
* */
数据响应的变化-1 对象操作
let vm = new Vue({
el:'#app',
data:{
a:{
// scroll:''
}
}
});
/*
* vue会循环data中的数据(数据劫持) 依次的增加getter 和 setter 从而视图改数据跟着变化
* 使用变量时 先要初始化 否则新的属性不会导致页面刷新
* 设置属性
* 1.data:{a:{scroll:'直接设置属性和值'}
* 2.vm.$set: vm.$set(vm.a,'scroll',12)//可以添加不存在的属性，给对象添加响应式的数据变化
* 3.替换原对象: vm.a = {scroll:'aaaa',age:18}
* */
数据响应的变化-2 数组操作
<div id="app">{{arr[1]}}</div>
let vm = new Vue({
el:'#app',
data:{
arr:[1,2,3,4,5]
}
});
改数组的值：
vm.arr = vm.arr.map(item=>item*=3)
/*
* 改变数组的值
* 1)vm.arr[0]=100;2)vm.arr.length-=2;都是错误的
* 使用数组变异(-能改变原数组)方法 pop push shift unshift sort reserve splice
* vm.arr.reverse()翻转
* 使用数组变异(-不能改变原数组)方法 map filter
* vm.arr = vm.arr.map(item=>item*=3)
* */
