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属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定!
子传父:
用自定义事件,流程为:
在子组件通过 e m i t ( ) 出 发 事 件 在 父 组 件 , 通 过 v − o n 监 听 子 组 件 事 件 w o t c h ( n e w V a l u e , o l d V a l u e ) : 监 听 属 性 的 改 变 父 访 问 子 : emit()出发事件 在父组件,通过v-on监听子组件事件 wotch(newValue,oldValue):监听属性的改变 父访问子: emit()出发事件在父组件,通过v−on监听子组件事件wotch(newValue,oldValue):监听属性的改变父访问子:children(获取所有)-refs(通过ref绑定)
子访问父:root(顶级)、parent
插槽:slot 可以有默认插槽,可以有多个插槽,定义name 通过属性slot=“name” 可以指定插槽
插槽是有作用域的:
插槽访问组件的里的数据 组件插槽定义:data<templant slot-scope="slot"> {{slot.data}} </templant>