VUE学习笔记

1.基本语法

• 插值利用mustache语法,表现形式为：{{ }}

• 指令：

v-once: 只会渲染一次，不会随着数据改变而改变
v-bind: 动态绑定属性，缩写为: 可以为动态数组 可以为对象
            事例：动态绑定src(:src),动态绑定class(key,value判断true,false)
 v-for: 完整语法 v-for="(m,index) in item" 
 		需绑定:key 增加唯一标识 作用：key是为了高效更新虚拟DOM
 v-on: 语法糖写法举例：@click="method("123",$event)"
	   事件修饰符：
	        .stop 阻止单击事件继续传播 event.stopPropagation()
			.prevent 阻止事件默认行为 event.preventDefault()
			.once 点击事件将只会触发一次
			.native 监听组件根源素的原生事件
	   按键修饰符
	   		格式： v-on:keyup.按键名 或 @keyup.按键名
  v-if: 只显示一次用v-if
  v-show: 显示隐藏频繁切换用v-show		
  v-model: 双向绑定 使用事例：提交radio/select等
  		修饰符：
  			lazy：失去焦点时或回车时更新
  			number:使输入框内容自动转为数字类型
  			trim:去除输入框的空格

• 计算属性

  事例：

computed: {
  reversedMessage: function () {
    // `this` 指向 vm 实例
	return this.message.split('').reverse().join('')
  }
 }

 为什么使用计算属性/和methods属性的区别：
 	计算属性性能高，会进行缓存，多次使用的话，计算属性只会调用一次。

• ES6语法
  推荐使用let(定义变量)和const(定义常量)，var没有作用域。

	const A=1;
 	const B=2;
 	const arr={
 	  a,
 	  b
 	}
 	//参数内容为类型检测
	test(par:String){
	}

• 数组响应式方法

  1.push()
  2.pop() //删除数组最后一个元素
  3.shift() //删除数组第一个元素
  4.unshift() //在数组最前面添加元素
  //删除/插入/替换元素
  //删除元素（第二个参数你要删除几个元素，不传删除所有）
  //替换元素（第二个参数你要替换几个元素，不传替换所有，后续参数为要替换为的参数）
  //插入元素（第二个参数传0，后续跟上需要插入的元素）
  5.splice(start)
  //排序
  6.sort()
  //反转排序
  7.reverse()
  注：通过数组索引值直接修改不是响应式的！！！

• javascript高阶函数

  编程范式：函数式编程
  1.filter函数 过滤数组
  2.map函数 计算属性
  3.reduce函数 递加等

   //代码示例
   const nums =[1,2,3,4,5]
   let numbers=nums.filter(function(n){
 	  return n<3;
   }).map(function(n){
 	 return n*2;
   }).reduce(function(prevValue,n){
 	 return prevValue+n;
   },0)

• 组件component

  父子组件通信：
  利用props来声明父级接受到的数据；
  vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定!
  子传父：
  用自定义事件，流程为：
  在子组件通过$emit()出发事件在父组件，通过v-on监听子组件事件wotch（newValue,oldValue）:监听属性的改变父访问子：$children（获取所有）-refs(通过ref绑定)
  子访问父：root(顶级)、parent
  插槽：slot 可以有默认插槽，可以有多个插槽，定义name 通过属性slot=“name” 可以指定插槽
  插槽是有作用域的：
  插槽访问组件的里的数据 组件插槽定义:data

   		 <templant slot-scope="slot">
   		 	{{slot.data}}
   		  </templant>