Es6后增加了let和const
1.const修饰的标识符被赋值后,不能修改。
2.在使用const定义标识符,必须进行赋值。
3,常量的含义是指对象不能修改,打完是可以改变对象内部的属性
4,let是加强后的var,var没有作用域,let有作用域
建议,在es6开发中,优先使用const,只有改变某个一个标识符的时候才使用let。
v-on:的语法糖为@,比如v-on:click 变为@click
v-bind:的语法糖为:
当通过methods中定义方法,以供@click调用的时候
情况一:如果该方法不需要额外参数,那么方法后的()可以不添加
情况二:如果需要用时传入某个参数,同时需要event时,可以通过 $event传入事件
.stop修饰符的使用,阻止冒泡
.prevent阻止默认事件的发生。比如form中的提交
监听某个键盘的键帽
@keyup.enter 监听 enter键抬起
,once只触发一次回调
v-if当条件为false时,压根不会有对应的元素在Dom中。
v-show当条件为false时,仅仅是将原的display的属性设置为none而已
当我们使用key来为每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟dom
splice()作用:删除元素/插入元素/替换元素
删除元素:第二个参数传入你要删除几个元素
替换元素:第二个参数,标识我们要替换几个元素,后面是用于替换前面的元素。
插入元素:第二个参数,传入0,并且后面跟上要插入的元素。
sort()用来排序 reverse()进行反转
vue.set(this.letter,0,“bbbbb”)
123.tofixed(保留几位小数)
设置按钮是否可用,使用disabled当为true,disabled生效,无法被点击。:disabled=“item.count<=1”
使用过滤器在filters:{}写属性
js高阶函数
const num=[4,65,42,43,65,53] let total=num.filter(n => n<100).map(n => n*2).reduce((pre,n)=>pre+n);
<input type="text" v-model="message">{{实现双向绑定}}
lazy修饰符:
默认情况下,v-model默认是在input事件中同步输入框的数据的。
lazy修饰符可以让数据在失去焦点或者回车时才会更新、v-model .lazy=""
number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符可以过滤内容左右两边的空格
组件
1.创建组件构造器
const cpnc= Vue.extend({
tepalte:
<div></div>
})
2,注册组件(全局组件)
Vue.component('cpn',cpnc)
3.使用
模板分离的写法
<template ID="mycdn"> <div>xiaoming <h1>hhaha </h1> </div>
components:{ 'cdn':{ template:"#mycdn" } }
cdn为组件的名称
required:必须的,再添加required属性值,就必须给他传值
什么时候需要自定义事件?
当子组件需要想父组件传递数据时,就要用到自定义事件了。
自定义事件的流程:
在子组件中,通过$emit()来触发事件
在父组件中,通过v-on来监听子组件事件
前面所学的综合应用
<div id="app"> <cpn :number1="num1":number2="num2"@numb1change="num1change"></cpn> </div> <template id="cdn"> <div> <h1>{{number1}}</h1> <H1>{{dNumber1}}</H1> <input type="text" :value="dNumber1" @input="inputnum1"> <H2>{{number2}}</H2> </div> </template> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> <script> const vm = new Vue({ el: "#app", data: { num1:'xiaoming', num2:'小m', }, methods: { num1change(value){ this.num1=value; } }, components:{ cpn:{ template:'#cdn', props:{ number1:String, number2:String }, data(){ return{ dNumber1: this.number1, dNumber2:this.number2, } }, methods: { inputnum1(event){ this.dNumber1= event.target.value; this.$emit('numb1change',this.dNumber1) } } } } }) </script>
ref的使用
<cdn ref="aaa"></cdn> <button @click="btnclick">按钮</button>
methods:{ btnclick(){ console.log(this.$refs.aaa.name) }
插槽的基本用法:
<slot></slot>
插槽的默认用法<slot><button></button></slot>
export,import导入导出
vue的具体详情