Vue基础第一天

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>