vue总结

1.vue的初始化

let vm = new Vue({
        el: '#app', //指定操作的dom
        data: { //定义属性
            msg: 1231,
            msg2: ''
        },
        methods: { //定义方法
            show() {
                alert('showFN')
            }
        },
        directives: { //自定义私有指令
            color: {
                bind(el, binding) {
                    el.style.color = binding.value;
                }
                inserted(el) {
      				el.focus()
   			    },
   			    updated(el) {
     				 console.log(123);
   			    }
            }
        },
        filters: { //定义私有过滤器
            fn(data) {
                return '过滤器data：' + data

            }
        },
        beforeCreate() { //生命周期函数 - 被创建之前

        },
        created() { //生命周期函数 - 被创建之后

        },
        beforeMount() { //生命周期函数 - 被挂载之前

        },
        mounted() { //生命周期函数 - 被挂载之后

        },
        beforeUpdate() { //生命周期函数 - 被修改之前

        },
        updated() { //生命周期函数 - 被修改之后

        },
        beforeDestroy() { //生命周期函数 - 被销毁之前

        },
        destroyed() { //生命周期函数 - 被销毁之后

        },
        components: {
            mytmp: {
                template: "<p>我是组件p</p>"
            }
        },
        // router,
        watch: { //被监听的数据
            msg(newVal, oldVal) {
                console.log('msg被修改前：' + oldVal);
                console.log('msg被修改后：' + newVal);
            }
        },
        computed: {
            msg4() {
                return "-----"
            }
        },
        render(creatEle) { //重新渲染页面
            return creatEle()
        },
    })

2.默认指令

@click.once.prevent //只阻止一次默认事件
@click.capture //进行捕获机制
@click.stop //阻止冒泡事件
@click.self //只有点击自己才出发，不经过捕获了冒泡来执行

3.各种v-指令

v-cloak  // [v-cloak] {display: none;} 可以在页面加载的时候隐藏插值表达式
v-text="msg"  //把data中的msg渲染出来，不会识别其中的标签，但是会覆盖标签中的原有内容
v-html  //把data中的msg渲染出来，可以识别其中的标签并渲染，但是会覆盖标签中的原有内容
v-bind:title/:title=“msg”  //为其绑定一个属性,如果想要绑定单纯的str的话，要:title=" ' msg' "（双层引号）
v-on:click/@click=“”  //为其绑定methods中的方法
v-model // 双向绑定data中的值，多用于文本框，开关按钮
v-for //v-for=“(item,idx) in arr、(val,key,idx) in obj、(item,idx) in 10” 用来循环数组，对象，数组对象等，要绑定:key值
v-if	//v-if=true  会在页面上生成或者彻底消失一个dom
v-show //v-show=false  会在页面是显示或者隐藏一个dom

4.自定义指令 （directive）

创建自定义指令（私有的为directives ： { xxx : {…}}）

Vue.directive('指令名称',{事件方法})
Vue.directive('focus', {
    bind(el，binding) {   //其中bind函数大多数情况用来处理css样式
      el.style.color = binding.value;  //bingding 表示一个对象，里面包含了name、value等值，为传的第二个参数中的内容
    },
    inserted(el) {  //其中inserted函数大多数情况用来处理js的行为
      el.focus()  //el 表示被绑定的dom，是个原生js对象，可以使用js的行为方法
    },
    updated(el) {   //当VNode（组件）进行更新时候会执行，可能会触发多次
      console.log(123); 
    }
  })

自定义指定的使用（使用的时候要加v-前缀）

<input type="text" placeholder="搜索" v-model=searchName v-focus v-color="'blue'">  

5.过滤器（filter）

创建filter过滤器（私有的为filters: { xx( ) {…}）

Vue.filter('fn',function (data,text) {   // data为原始的数值，text为第二参数
    return data+'123'+text    
})
{{ item | fn('999') }}  //item='哈哈' 返回结果为：哈哈123999

6.动画效果（transition）

使用transition包裹住内容，并使用css进行过度效果

<transition name="my">  //加了name的话，css要是控制为 .my-enter, .my-leave-to ...
    <h3 v-if="flag" >哈哈哈</h3>
</transition>
..v-enter //进入前时的样子
.v-leave-to //离开后的样子
.v-enter-active //进入时的过度效果
.v-leave-active //离开时的过度效果

使用第三方动画库进行动画效果

<transition enter-active-class="animated flipInX" leave-active-class="animated flipOutY"
      :duration="{enter:2000,leave:500}">
      <h1 v-if="flag">{{msg}}</h1>
</transition>
enter-active-class="第三方库的类名"
leave-active-class="第三方库的类名" 
:duration="{enter:200,leave:500}" 设置线性的过度时间

半场动画

<transition
    @before-enter="beforeFn"  //给予绑定半场动画的3个函数
    @enter="Fn"
    @after-enter="afterFn"
>
	<span v-if="flag"></span>
</transition>
然后在methods中的方法中定义：
beforeFn(el){
   el.style.opacity=0
   el.style.transform='translate(0,0)'
},
Fn(el,done){
   el.offsetWidth;  //不加的话没有动画过度效果
   el.style.opacity=1
   el.style.transform='translate(50px,450px)'
   el.style.transition='all 1s ease'
   done(); //加上后，表示执行完了立即执行下面的函数，增加流畅连贯性
},
afterFn(el){
   this.flag=!this.flag;
}

多个列表等的动画过度（transiton-group）

<transition-group appear tag="ul" mode="out-in">
      <li v-for="(item,idx) in list" :key="item.id" @click="removeFn(idx)">{{item.id}}--{{item.name}}</li>
</transition-group>
// 其中appear表示已加载就执行一次  
// tag="" 表示把此标签渲染成别的标签
// mode="out-in" 表示先执行完离开在执行进入动画

7.组件（component）

创建定义组件(私有的为components: { name : { template : xx } } )

Vue.component('name', {template :'<h3>哈哈是否</h3>'})
Vue.component('name', {template :'#aaa'})
<template id="aaa"><h4>456464</h4></template>

组件中的data

components:{
   temp: {
    template:'#temp',
      data() {  //组件的的data为一个对象 
        return {  //需要return来返回
        	a : 1,
        	b : 2
        } 
     },
   }
}

子组件使用父组件的数据（props）

 <son-temp :sonmsg="msg"></son-temp> //在父组件的标签中使用：属性='xx' 来绑定数据到子组件
 props:['sonmsg']  //再在子组件中使用 props：['属性名'],就可以在子组件中使用了

子组件使用父组件的方法（$emit）

<haha :ss="msg" @func="log"></haha> //在父组件的标签中使用@名字=‘方法名’ 来绑定方法到子组件
在子组件中使用this.$emit ( 'func' ) 就可以使用父组件的方法
如果给予父组件中的方法函数，子组件调用之后，可以返回给父组件想要的数据
methods: {
   log(test){
     console.log('123' + test);
     this.tt=test   //父组件接收后，进行操作
   }
}
this.$emit('func',this.sun) //子组件执行父组件的方法，并把data中的sun返回给父组件，

使用ref来获取页面中的dom操作

<h4 ref="myh4">啊哈哈哈</h4>  //定义ref，
this.$refs.myh4.innerHTML  //可以操作定义的dom
<son-temp ref="zj1"></son-temp>  //给予子组件上ref
this.$refs.zj1.msg // 可以拿到子组件中的data中的msg的数据
this.$refs.zj1.fn( )  //可以执行子组件中的方法

8.路由（router）

引入与使用

 routes:[  //配置完后，要在vue中使用，router：xxx
      {path:'/',redirect:'/login'},  //path：'表示url地址' , redirect : '重定向到..'
      {path:'/login',component:{template:'#login'}}, component: { 显示的组件 },
      {path:'/reg',component:{template:'#reg'},children:[{path:'ll',component:ll}]} //路由的嵌套,是在本页面进行渲染的
],
<router-link to="/login" tag="span">登陆</router-link>  //to='要到的地址' tag='变成定义的标签'
<router-view></router-view>  //路由的显示窗口

获取url中的数据（params和query）

<router-link to="/login?num=12">登陆</router-link>
{path:'/reg',component:regcmp}  //这种的如果想要获取num的话，需要使用this.$route.query.num 来获取
<router-link to="/login/10">登陆</router-link>
{path:'/login/:num',component:login},  //这种的如果想要获取num的话，需要使用this.$route.params.num 来获取

多个路由的指向

routes:[{
   path:'/',
     components:{
     default:{template:'#header'},
     lefts:{template:'#left'},
     rights:rights,
   }
}]
<router-view></router-view>
<router-view name="lefts"></router-view>
<router-view name="rights"></router-view>

9.监听数据（watch）

watch:{  // 监听data中的数据，如果发生改变会执行此方法
      msg(newval,oldval){   //监听msg，newval为新的数据的值，oldval为旧的数据的值
        console.log(‘change’)
      }，
      '$route.path'(newval,oldval){  //监听路由的改变
        if(newval=='/login'){
          alert('登陆')
        }else{
          alert('注册')
        }
      }
}

10.计算属性（computed）

computed: {  //和watch类似，机制不同
      //是一个方法， 当属性（data）来用
      //使用后会被存入缓存
      //如果多次使用，并且没有改变其中的值，则会使用缓存中的值，而不去再次调用，提高性能
      name3(){
        console.log(123);
        return this.name1+'--'+this.name2
      },
}