在vue中所有的组件都继承自vue的原型
v-on修饰符的使用
- @click.stop: stop修饰符用于阻止点击事件的向上冒泡
- @click.prevent: 阻止事件的默认行为
- @keyup.enter: 监听键盘的抬起(按下为keydown),enter可以改为其他键
- @.native: 监听自定义组件的根事件,如click或者keyup等
- @click.once: 让事件只能触发一次
一个vue实例中的各种属性
computed(计算属性):
在多次调用时,computed内的函数是有缓存的,而method中的函数则是没有缓存的
该属性中的函数起名时一般不起动词,而是直接名词,如totalprice等
data:
methods:
数组
数组的响应式方法
- shift() :删除数组的第一个元素
- unshift() :从数组头开始增加元素,可以一次增添多个
- reverse() :反转数组
- sort() :排列数组元素
- push() :从第一个元素开始增加
- pop() :弹出第一个元素,返回第一个元素
- splice() :删除/替换/增加元素
数组的循环遍历
<div v-for="(item,index) in list" :key="index">{{item.name}}</div>
数组的filter()
1.filter 在调用filter时,其接收的参数为一个回调函数,该回调函数则必须返回一个boolean值。
返回true时:将该数据添加到新数组
返回false时: 将该数据过滤不添加到新数组
使用方式:
let newList=list.filter(function(n){
return n>100
})
数组的map方法
1.map方法会对数组的每个元素进行遍历
使用方法:
let newList=list.map(function(n){
return n*2
})
数组的reduce方法
reduce()方法用于对数组中的所有内容进行汇总(求和)
reduce()方法的参数:
let total=numList().reduce(function(pre,n){
return pre+n
},0)
在该函数中有两个参数,第一个参数是函数,第二个参数则是pre初始值,然后在进行一次计算后将
值传给pre进行下一次计算
按钮根据表达式被禁用
<button :disable="aa<=1"></button>
vue中v-model绑定变量
v-model大致可以看成是v-value(:value="{{numvalue}}")与某个响应式函数如@input的合集, 可以通过该函数改变value绑定的值。
1. v-model绑定radio
```
<input v-model="sex" type="radio" id="meal"/>
<input v-model="sex" type="radio" id="femeal">
```
以上两个input都绑定了同一个变量sex,并且此时只能对一个进行选择。
2. checkbox单选框
<input type="checkbox" v-model="isAgree">点击同意
<button :disable="!isAgree">下一步</button>
3. checkbox复选框
<input type="checkbox" v-model="balls" value=""篮球">篮球
<input type="checkbox" v-model="balls" value="排球">排球
<input type="checkbox" v-model="balls" value=""羽毛球">羽毛球
data:{
balls:[]
}
复选框的经典用法:
<label v-for="(item,index) in balls" :for="item">
<input type="checkbox" value="item" id="index" v-model="loveBalls"/>
</label>
<--循环展示列表,并按照元素展示复选框-->
data:{
balls:['游泳','乒乓球','篮球','羽毛球'],
loveBalls:[]
}
在以上代码中,选择了多个复选框的话,vue会自动将复选框的内容加入到ball中。
4. v-model结合select标签使用(下拉列表)
<select v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="凤梨">凤梨</option>
</select>
data:{
fruit:'香蕉'
}
此时我们fruit会随着用户的选择而发生改变,select标签可以添加multiple以达成选择多个的目的
5. v-model.lazy
<input v-model.lazy="userName" type="text">
使用了该属性后,会在input/textarea等绑定了该属性的组件失去焦点后才进行数据的交换
6. v-model.number
<input v-model.number="userAge" type="text">
使用了该属性后,会在input/textarea等绑定了该属性的组件输入的值转换为数字,需要注意的是,如果不
声明该属性,v-model中绑定的变量都会默认转换为字符串
7. v-model.trim
<input v-model.trim="userLastName" type="text">
使用了该属性后,会自动进行过滤空格
组件
1.局部组件与全局组件
使用脚手架搭建的一般都是注册为局部组件,在vue示例的component方法中注册。
2.组件内的数据必须以函数形式返回
data(){
return{
aa:"asdas"
}
}
若不以函数形式返回,则在复用组件时会使得多个实例共享一个作用域,导致数据出错,使用函数形式则
会在每次显示的时候,都重新开辟一块内存来存取数据,避免共享。
3.父子组件间传值
props支持的类型:
String Symbol Boolean Number Date Function Array Object
props是一种单向数据流,即父组件可以改变子组件的值,而子组件无法改变父组件的值。
当prop为数组或者对象时,其默认值需要一个函数进行传递。
在官方文档中,要求声明props时尽可能的详细,如:
props:{
status:{
type:String,
require:true, //必传
default:"aaa"
}
numList:{
type:Array,
require:false;//不一定要传
default(){
return []
}
}
propc:[number,array] , //该属性可能有多种
}
父组件向子组件传值:
<comp :status="{{haveSend}}"></comp>
子组件向父组件传值:
子组件:
<button @click="sendtofather"></button>
methods:{
sendtofather(){
//emit中有两个参数
//第一个是父组件调用子组件时所监听的属性
//第二个则是要传递给父组件的值
this.$emit('listenchild','a message from child')
}
}
父组件:
<div>
<child @listenchild="getMessage"></child>
</div>
methods:{
getMessage(data){
console.log(data)
}
}
4. 父组件通过$refs或者$children访问子组件
父组件中调用子组件:
<comp ref="aaaa"></comp>
<button @click="getRef"></button>
method:{
getRef(){
console.log(this.$refs.aaaa.name)
//name为子组件中的属性
}
}
5. 子组件通过$root访问vue实例
子组件方法:
methods:{
btnclick(){
//message为vue实例中定义的变量
console.log(this.$root.message)
}
}
插槽(slot)
插槽的基本使用
组件comp模板:
<div>
<h1></h1>
<h2></h2>
<slot></slot>
<slot name="first"></slot>
<slot name="second"></slot>
</div>
使用组件:
//在组件的使用过程中,会将h1 h2标签替换到slot标签中
<comp>
<h1 slot="first"></h1> //只会替换name为first的插槽
<h2></h2>
</comp>
作用域插槽
子组件如何将数据通过插槽传送到父组件:
在子组件模板中:
<templete>
<div>
<slot :data="numList">
<div v-for="itme in numList">{{item}}</div>
</slot> //将数据绑定在插槽中,这样可以获得子组件的数据
</div>
</templete>
在父组件调用该子组件时:
//需要重新写一个模板 在vue2.5以前
//当父组件需要重新排列子组件中所需要展示的数据时,就使用该方法来获取子组件中的数据并重新展示
<templete slot-scope="slot">
<div v-for="item in slot.data.numList">{{item}}</div>
</templete>
vue中自定义全局变量
在main.js中定义,而这可以被所有组件使用,也证明在vue中所有的组件都继承自vue的原型
Vue.prototype.test="aaa"