vue 项目中笔记-持续更新

9.class常用操作：

:class="packUp ? 'search-form-btn active fr' : 'search-form-btn fr'"

:class=" timeClass "   this.timeClass ="class1 class2"

:class="{'active':queryParam.sort=='asc'}"

8.watch监听属性，顾名思义需要先在data里面定义了才能监听到 ； computed 计算属性，不能在data中定义，

watch中能执行异步操作例如 setTimeout函数，computedu不可以  会返回undefined，只能直接return；

简写形式都是不需要改变数据，只获取数据才用，否则都需要写出复杂格式

<template>
  <div>
      <p>mesage:{{newMessage}}</p>
      <p>reversed message:"{{reverMessage}}"</p>
      <button @click="changeInfo">改变info</button>
      <ul>
        <li v-for="item in list">{{item.name}}--{{item.age}} </li>
      </ul>
  </div>
</template>

<script>
  export default{
    name:"myCom",
    data(){
      return{
        message:'hellow',
        message2:'world',
        info:{
          a:1,
          b:'zhangsan'
        },
        list:[{
          name:'zhangsa',
          age:12
        },{
          name:'lisi',
          age:12}],

      }
    },
    watch:{
      info:{//对象 改变对象的属性触发，简写是不会触发的
        deep:true,//监视多层数据改变,针对对象和数组
        handler(current){
          console.log('info发生了改变',current);
        },
      },
      list:{//数组 改变数组里面的某个值触发
        deep:true,
        handler(current){
          console.log('list发生了改变',current);
        }
      },
      message(current,old){ //简写  不改变数据时这样写
        console.log('info发生了改变',current,old);
      },
    },
    computed:{
      reverMessage:function(){//简写形式
        return (this.message||'').split("").reverse().join('')
      },
      newMessage:{ //需要修改数据的时候要这样写
        get(){
          return this.message+this.message2;
        },
        set(v){
          return v;
        }
      }
    },
    methods:{
      changeInfo(){
        this.info.a =  this.info.a+1;
        this.message = 'name';
        this.list[1].age=this.list[1].age+1;
      },
    },
   
  }
</script>

<style>
</style>

　　

------------------------------------------------------------------------------------从这开始倒着写-----------------------------------------------------------------------------

1.路由跳转：非view页面要实现跳转：

import router from '@/router' //先引入router才能后面使用push

router.push({ path:'/login' });

 2. nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

     pick:从 object 中选中的属性的对象。使用需要先引入：import pick from 'lodash.pick'

this.$nextTick(() => {
   this.form.setFieldsValue(pick(this.model,'userName','inDate','outDate','userLevel','userTag','extra1','extra2'))
//时间格式化
});

3.props数据类型：Number、String、Boolean、Object、Array、Date、Function、Symbol

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})
// 对象语法，提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

4.<router-link></router-link> 添加事件监听函数

       <router-link
              :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
              :title="tag.title"
              tag="span"
              @click.native="showCurrentPage(tag)" //tag为当前的路由
           >{{tag.title}}</router-link>

5.模板字符串换行显示 :

  例如：let a =`aaaaa
                        bbbb`;

1.使用textarea标签保留样式

2.pre标签 ：被包围在 pre 元素中的文本通常会保留空格和换行符

其他的标签暂未发现有保留的功能，当a有空格的时候是有空格的样式展示出来且只有一个空格

6.动态组件切换 简单例子两个组件相互切换：

<template>
  <div>
    <keep-alive>
      <!-- 动态组件 -->
      <component :is="componentName"></component>

     <!-- <my-com v-if="name=='myCom'"></my-com>
      <my-com-two v-show="name=='myComTwo'"></my-com-two> -->
    </keep-alive>
    <button @click="changeCom">切换组件</button>
  </div>
</template>

<script>
  import myCom from './myCom.vue'  //组件一
  import myComTwo from './myComTwo.vue'   //组件二
  export default{
    name:"activeCom",
    components:{myCom,myComTwo},
    data:function(){
      return{
        componentName:myCom,
        name:'myCom'
      }
    },
    methods:{
      changeCom(){
        let {name} = this;
        this.componentName = name=='myCom'?myComTwo:myCom;
        this.name= name=='myCom'?'myComTwo':'myCom';
        console.log("com:",this.componentName);
      }
    }
  }
</script>

<style>
</style>

7.beforeDestroy和destroyed触发条件:关闭当且页面或者关闭路由，但是v-if或者v-show这样的切换都不会触发这两个生命周期