vue数据类型
1.操作数据
2.JS数据类型
- number string boolean null undefined
- obj>function
- Symbol(es6)
3.数组的变异(括号中的能改变原数组)
- 操作数组的方法(pop push unsift shift splice reverse sort) indexOf lastIndexof concat slice
4.forEach filter(过滤) map(映射) som every reduce (includes find 》es6)
forEach(function(value, index){
console.log(value);
})
- 不支持return
- for in会遍历数组的私有属性,for of不会遍历数组的私有属性。for in是key(索引)in 数组,key会变成字符串类型。for of是value(值)of 数组。可以直接输出value,不能遍历对象。
4-1.filter(过滤器)
filter(function ( item, index ){
return "过滤的结果";
})
- 不会改变原数组
- 返回结果:过滤后的新数组
- 回调函数返回的结果:如果返回true,表示这一项放到新数组中。
let arr = [1,2,3,4,5,];
arr.filter(function(item,index){
return item>2&&item<5;
})
4-2.map(映射)对于数组的映射
map(function(item, index){
return `<li>${item}</li>`
}
4-3.includes,返回boolean类型
4-4.find,找到后立刻停止,返回找到的值,找不到返回undefined
4-5.some,找true,找到true停止返回true,找不到返回false
4-6.every,找false,返回false停止返回false
4-7.reduce(收敛函数)
let arr = [{price:18,count:3},{price:18,count:4},{price:18,count:5}];
let result = arr.reduce(function(prev,next,index,item){
return prev+next.price*next.count;
},0);//这里的0是默认指定第一次的prev是0;
console.log(result)
- perv代表的是第一项,next代表第二项,index是索引,item是原数组
- perv是undefined,next代表第三项,index是索引,item是原数组(循环下去…)
- prev是undefined是因为没有return值,本次return的值将会作为下一次的prev。
5.箭头函数
- 如何确定this是谁,看谁调用的,前面是谁,this就是谁。
function a(b){ return b+1;} === let a = b => b+1;
//如果只有一个参数,小括号可以省略,小括号和大括号之间有一个箭头,大括号不写直接会返回值,有大括号必须写return
function a(b){
return function(c) {
return b+c;
}
}
//这两个相等
let a = b => c => b+c;
- vue很多时候不能用箭头函数,因为很多时候,事件的指向是vue实例。
6.闭包
- 函数执行的一瞬间叫闭包,(不销毁的作用域),当执行后返回的结果必须是引用数据类型,被外界变量接收 此时这个函数不会被销毁(模块化)
7.Vue渐进式框架
- 操控数据,vue给这类属性赋予一定的意义,来实现特殊的功能,value属性默认情况下会被vue忽略,selcted,checked都没有意义
8.Vue指令
- v-model绑定在表单元素中,实现双向数据绑定
- v-text === {{}},防止{{}}出现在页面上
- v-once 只绑定一次,当数据再次发生变化,也不导致页面刷新
- v-html 把html字符串当作html渲染,一定是可信任的html
9.Vue数据响应的变化
1.vue会循环data中的数据(数据劫持)依次的增加getter和setter(在视图修改的时候能够相应)
2.使用变量时,先要初始化,否则新加的属性不会导致页面刷新
vm.$set(vm.a, 'school', '1');
- 此方法可以给对象添加响应式的数据,第一个参数是给谁加,第二个是加的属性名,第三个是属性值。(新增一个属性)
- 需要添加多个属性,可以直接替换原对象,vm.a = { school: ‘zfpx’, age: 8, address: ‘xxx’ }(新增多个属性)
3.vue数组操作,vue中去改变数组中的某一项是监控不到的,也不能使用改变数组长度的方法
变异方法:pop push shift unshift sort reverse(倒序) splice
4.v-for循环二维数组,先循环外层。
<li v-for="(item, index) in fruits">{{item.name}}
//再嵌套一个li循环里面那层数组
<li v-for="(c, childIndex) in item.color" v-text="c"></li>
//定义的“item”和“index”不能一样。(这里有个问题,就是外层不能使用v-text,否则内层将会渲染不出来。)
- v-for=" c in ‘aaa’",可以写字符串,aaa,会直接循三个a,这里说明了v-for可以循环的有“数组“,”对象”,“字符串“,“数字”。
5.event,methods和data中的数据会全部放到vm上,而且名字不能冲突,冲突会报错,methods的this指向都是实例。
@mouseover="fn"
//如果不传参数,则不要写括号,会自动传入事件源,如果写括号了要手动传入$event属性
@mouseover="fn($event, 1)"
//对应的函数如下
fn(event, a){
console.log(event)
}
6.todo
- vue的键盘修饰符
@keyup.enter="add"
在按下enter才会触发add事件。 - 如果vue模板有嵌套标签不能使用v-text形式渲染数据,否则内层渲染会无效(这是个人学习过程中遇到的问题)
- 添加按钮删除事件,需要再button事件上传入一个从li元素拿到的index给button的事件接收,然后用filter过滤器操作数组,通过索引对比点击的是哪个元素,讲filter返回的数组赋值给list。从而实现删除功能。
7.checkbox
- 如果是复选框,只有一个复选框的时候,会把v-demol的值转化为boolean类型,如果tru代表选中。
- 如果是多个checkbox,要增加value属性并且数据类型要为数组。
- v-model(表单元素)忽略掉value,checked,selected,将数据绑定在视图上,视图修改后会影像数据的变化。
8.radio
- v-model的值将会接收给选中的radio的value值,与多个复选框用法相同
<input type="radio" name="sex" value="男" v-model="picked">
<input type="radio" name="sex" value="女" v-model="picked">
var vm = new Vue({
el: "#app",
data: {
picked: ""
}
})
指令
- dom元素的行间属性,vue提供了内置的指令,必须以v-开头,后面的值均为变量。
- v-text取代 {{}} v-cloak解决闪烁(块)问题,后期都可以不采用,使用v-cloa要加“display:none”样式
- v-once 绑定一次,数据在变化不会导致视图刷新,写在不想刷新的标签上。
- v-html 将html字符串转化成html
- v-for 循环(数组,对象,字符串,数字)
<div v-for="value in/of 数组"></div>
<div v-for="(value, index) in/of 数组"></div>
事件 v-on(@)
- 绑定给dom元素,函数需要定义在methods中,不能和data的内容重名,this指向的是实例,不能使用箭头函数,事件源对象如果不写括号,可以自动传入,否则只能手动传入$event
<div @事件名="fn"></div>