vue2.0 小记_vue2.0v-slot的指令-CSDN博客

事件修饰符

.self 点击自己才会触发，包括冒泡情况也会跳过
.capture 冒泡顺序倒置

绑定类名

:class="[‘classname’,flag ? ‘classname’ : ‘’,{‘classname’ : flag}]"
{‘需要绑定的类名’:是否绑定} 该对象也可以在data中声明赋值

绑定样式

:style="{color:‘red’,‘font-size’:‘16px’}"
样式的名称带-，必须用’'括起来；多个对象绑定时:style="[obj1,obj2]"

v-on绑定事件

可以写() 也可以不加 v-on=“fn” @on=“fn()”
$event 作为参数的时候传递原生的事件对象

自定义指令

第一个参数:指令的名称第二个参数:对象
指令名称不需要"v-";指令可以在不同的生命周期阶段执行
bind:指令被绑定到元素上的时候执行
inserted:绑定指令的元素被添加到父元素上的时候调用
Vue.directive(“color”,{
bind:function (el,obj){ //第二个参数是个对象,常用obj.value获取指令绑定的值
el.style.color = =‘red’
// el.focus(); 该事件在bind阶段中不生效,元素还未被渲染,应该在inserted生命周期中执行
}
})

红色

在bind的回调函数中调用第二个obj参数的value获得blue

局部指令

与methods同级
directives:{
“color”:{
bind:fucntion(el,obj){
el.style.color = obj.value;
}
}
}

计算属性

与methods同级
conputed:{
“key”:function(){
let value = ‘’;
return value;
}
}
计算属性不是函数所以调用的时候不要() 直接插值调用{ {计算属性名称}}
计算属性会将返回的结果缓存起来,结果没有发生变化,就执行一次;数据常变用函数,变动少用计算属性性能高

全局过滤器

Vue.filter(‘过滤名称’,function(value){
//处理数据的函数
value = value.replace(/学院/g,“大学”)
return value;
});
使用:{ {插值变量 | 过滤器名称}} 1.只能在插值语法和v-bind中使用 2.过滤器可以连续使用 { {插值变量 | 过滤器1 | 过滤器2}}

局部过滤器

只能在自定义过滤器的vue实例中使用
和methods同级
filters:{
‘过滤器名称’:function(value){
return value;
}
}

在使用过滤器的时候,可以在过滤器名称后面加上()给过滤器的函数传递参数
{ {number | filt(2)}}
filters:{
‘过滤器名称’:function(被过滤的值,过滤器参数){
return value;
}
}

过渡动画

标签包围,通过css控制样式,过程中写transition:all 3s;
.v-enter 进入开始前 opacity:0;
.v-enter-active 移入开始后 transition: all 3s;
.v-enter-to 进入过程中 opacity:1;
.v-leave 离开开始前 opacity:1;
.v-leave-active离开后 transition: all 3s;
.v-leave-to 离开过程 opacity:0;
一个transition标签中只能放一个元素
appear刷新页面的时候执行动画
class对应的v-enter类名为 .one-enter
钩子函数:v-on:before-enter=“beforeEnter” enter after-enter before-leave
beforEnter(el){//el是当前元素} enter(el,done){//done 是否已经执行完毕,执行完毕后要调用 done(); 回调,否则afterEnter不会执行} afterEnter(el){}
通过js钩子函数实现动画,vue会查找类名;transition标签中可以通过v-bind:class=“false” 取消查找类名
如果通过js钩子函数来实现过渡动画,要在执行过程执行结束回调前执行el.offsetWidth 或 el.offsetHeight
一刷新就执行js动画,最好在过程中延迟后执行done()回调;

第三方js动画库过渡 example : Velocity

enter(el,done){
Velocity(el,{opacity:1,marginLeft:“500px”},3000)
el:元素 Object 动画的属性 Number 动画时长
}

第三方css动画库 example: animated

绑定自定义过渡类名(组件属性):enter-class(动画进入开始) enter-active-class(动画进入过程) enter-to-class(动画进入结束) leave-class leave-active-class leave-to-class
使用:

动画盒子

多个元素动画可用包裹,其使用和transition标签一致

for注意点

v-for在渲染元素的时候,会先查看缓存中有没有需要渲染的元素
如果缓存中没有要渲染的元素,就会创建一个新的放到缓存中,如果缓存中有要渲染的元素,就不会创建一个新的,而是直接复用原有的
在vue中,只要数据发生改变,就会重新渲染
不要用index当做key

自定义全局组件

1.创建组件构造器

模板只能有一个根元素
let Profile = Vue.extend({
template:<div>模板html内容</div>
})

2.注册已建好的组件

Vue.component(“abc”,[Profile])
第一个参数:注册组件的名称
第二个参数:构建好的组件构造器
使用:

全局组件简写

Vue.component(‘组件名称’,{这个对象就是组件构造器,不需要Vue.extend创建})
也可以将html模板写在
然后使用VUe.component(‘组件名称’,{template:"#模板id"})注册组件
在Vue中有template标签可以写html模板内容,带上id属性即可

局部组件

在当前vue实例中使用
使用与methods同级定义:
components:{
“组件名称”:{
template:"#模板id"
}
}
组件中data必须是个函数,与vue实例不太一样
data:function(){
return {
abc:“你好”
}
}

组件中的data如果不是通过函数返回,多个相同组件就会共用一份数据,导致数据混乱.
通过函数返回data的组件,每创建一个新的组件就会调用这个方法,将这个方法返回的数据和当前创建的组件绑定在一起,这样就避免了数据混乱

切换组件

与元素切换一样,v-if控制

动态组件:

与v-if的区别:v-if每次都会删掉组件再加载,而动态组件被包住后切换就不会销毁,从缓存中取.

给组件添加动画:单个组件添加到标签中即可;多个组件添加到中即可
组件切换时动画是同时进行,则可以切换动画模式: 1.in-out:新元素进行过渡完成后当前再进行过渡离开; 2.当前元素先进行过渡,完成后新元素过渡进入;
过渡模式使用:

父子组件

Vue.Component(“father”,{
template:"#father",
components:{
“son”:{
template:"#son"
}
}
})
父组件中调用了子组件,子组件在父组件中注册,只能在父组件调用;

子组件访问父组件数据要通过 v-bind:自定义接收名称=“传递数据” ; 子组件通过props:[“自定义接收名称”] 接收数据
子组件使用{ {自定义接收名称}} ; 接收名称不能用驼峰命名,最好小写字母;若使用的时候要驼峰命名使用,接收名称需要在大写字母前面加- 并且大写改为小写; 如: 使用: props[“parentName”] 插值{ {parentName}}

组件命名注意:注册的时候使用驼峰命名,使用的时候是不能使用驼峰命名的,大写字母前面要使用- ;
例如:Vue.component(“myFather”,{template:"#father"})使用
传递方法的时候也是不能使用驼峰命名的 <son @parent-say=“say”> 子组件中调用父组件方法:this.emit(“parent-say”) 用了横杠也不能使用驼峰命名调用,只能横杠调用

父组件传递子组件方法 v-on:自定义接收名称=“要传递的方法” ；或者 @自定义接收名称=“要传递的方法”
使用与传递属性不同，不需要在子组件props中接收；需要在子组件中自定义一个方法；使用this.$emit(“自定义接收名称”)

子组件传递给父组件传递参数:

在父组件中定义方法,传递给子组件;然后在子组件调用父组件方法,通过传递参数的方式设置父组件的数据
this.$emit(‘自定义方法名称’,参数1,参数2)

多级传递:需要一级一级往下传递
爷爷组件中调用爸爸组件爸爸组件中pros[‘gfvalue’]接收;{ {gfvalue}}使用;传递给儿子组件类似再在儿子组件中pros[“fvalue”] 接收后{ {fvalue}}使用
方法的传递也是一级一级传递 <father @gffun=“gfFun”> 爸爸组件中调用自己在methods里面创建方法fFun(){this.emit(“gffun”)} ; 然后在爸爸组件中传递给儿子组件 <son @ffun=“fFun”> 儿子组件使用在methods中创建方法 sonFun(){this.emit(“ffun”)} 使用到爷爷组件中的方法

匿名插槽:

想在子组件的时候,给子组件动态添加内容就需要使用插槽
组件的模板中使用slot标签就是插槽,插槽其实就是一个坑,只要有了这个坑,就可以根据需要填坑
默认数据
插槽可以指定默认数据,如果没有填坑就显示这个默认数据,填了坑就使用填坑的数据

我是追加内容

div内容就填坑了
注意:插槽是可以指定名称的,默认情况没有指定名称,称为匿名插槽
匿名插槽特点:有多少个匿名插槽,填充数据就会被拷贝多少份.推荐只使用一个匿名插槽

具名插槽:

想在组件中填充不同的内容就可以使用具名插槽
可以在定义插槽的时候给插槽添加一个name属性,通过这个name属性来指定插槽的名称;若没有通过slot属性告诉Vue,当前的内容是不知道要填充到哪个插槽中,则不会填充.

在组件的模板中使用

<template>
	<slot name="one">具名插槽1默认内容</slot>
	<slot name="two">默认内容2</slot>
</template>

在使用组件时

<son>
    <div slot="one">指定插槽内容1</div>
    <div slot="two">指定插槽内容2</div>
</son>

v-slot标签

v-slot指令只能使用在template标签上

<son>
    <template v-slot:one>
		<div>我是插槽one的内容1</div>
		<div>我是插槽one的内容2</div>
    </template>
    <template v-slot:two>
    	<div>我是插槽two的内容1</div>
    </template>
</son>

指定具名插槽的名称进行插槽填充

v-slot的简写形式 #one

<son>
	<template #one>
    	<div>插槽one的内容</div>
    </template>
</son>

VueX

虽然通过借助父组件能够实现兄弟组件之间的数据传递,但这种方式非常的复杂,;则可以使用VueX

使用

1.导入Vuex.js前先导入Vue.js
2.创建Vuex对象

  const store = new Vuex.Store({
    <!-- state相当于组件中的data,专门用于保存共享数据的 -->
    state:{
      msg:'共享数据'
    }
  })

3.使用:在祖先组件中和template同级添加key store:store, 必须通过this.$store.state.msg 调用
4.只要祖先组件中保存了Vuex对象,祖先组件和所有的后代都可以使用Vuex中保存的共享数据了

修改共享数据:this.$store.state.共享数据变量名称 = 值;
但是!VueX不推荐直接赋值修改,数据错误不好排查;使用mutations

const store = new Vuex.Store({
   
  state:{
   
    共享数据:"值"
  },

mutations:{ //用于保存修改共享数据的方法
mAdd(state){ //自动传递一个state参数,state中保存了共享数据
state.共享数据 = state.共享数据 + 1; //内部对共享数据进行操作
},
}
})
修改共享数据方法使用:this.$store.commit(“mAdd”) 进行调用

Vuex - getters属性

与computed计算属性类似,将返回结果缓存起来
const store = new Vuex.Store({
state:{
msg:“你好”,
},
mutations:{},
getters:{
format(state){
console.log(“返回值一样只执行一次”)
return state.msg + “东东”;
}
},
})
页面中使用: 先引入vuex store:store, { {this.$store.getters.format}}