vue从入门到放弃（四）

vue——filter过滤器

filterDemo.vue

<template>
  <div>
    <h1>过滤器</h1>
    {{message | lower}}
  </div>
</template>
<script>
export default {
  data(){
    return{
      message:'Hello World'
    }
  },
  filters:{
    lower(val){
      return val.toLowerCase()
    }
  },//过滤器
  computed(){},//计算属性
  methods: {},//普通函数
  props: {},//接收参数
  created(){},//创建后
  mounted(){},//挂载后
  beforeDestroy() {},//销毁前
  components: {}//注册组件
}
</script>

App.vue

<template>
  <div id="app">
    <filterDemo/>
  </div>
</template>
<script>
import filterDemo from './components/advanceDemo/filterDemo.vue'
export default {
  name: 'App',
  components: {
    filterDemo
  }
}
</script>

结果：

vue——watch

watchDemo.vue

<template>
  <div>
    <h1>watch监听</h1>
    <p>{{message}}</p>
    <p><input type="text" v-model="message"></p>
    <p>{{obj.name}}</p>
    <p><input type="text" v-model="obj.name"></p>

  </div>
</template>
<script>
export default {
  data(){
    return{
      message:'Hello World',
      obj:{
        name:'张三',
        job:{
          jobName:'前端工程师'
        }
      }
    }
  },
  // 写法一：
  // watch:{
  //   message:(newMsg,oldMsg)=>{
  //     console.log('oldMsg='+oldMsg);
  //     console.log('newMsg='+newMsg);
  //   }
  // }
  // 写法二：
  watch:{
    message:{
      'handler':'watchMessage',
      deep:true, // 深度监听
      immediate:true // 首次先执行一次
    },
    obj:{
      'handler':'watchObj',
      deep:true, // 深度监听
      immediate:true // 首次先执行一次
    }
  },
  methods: {
    watchMessage(newMsg,oldMsg) {
      console.log('oldMsg='+oldMsg);
      console.log('newMsg='+newMsg);
    },
    watchObj(newMsg,oldMsg) {
      console.log('oldMsg='+oldMsg);
      console.log('newMsg='+newMsg);
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <watchDemo/>
  </div>
</template>
<script>
import watchDemo from './components/advanceDemo/watchDemo.vue'
export default {
  name: 'App',
  components: {
    watchDemo
  }
}
</script>

vue——自定义指令

directiveDemo.vue

<template>
  <div>
    <h1>全局自定义指令</h1>
    <input type="text" v-foc>
    <h1>局部自定义指令</h1>
    <input type="text" v-foc2>
  </div>
</template>
<script>
export default {
  directives:{
    foc2:{  // 局部自定义指令
      inserted:(el)=>{
        el.focus()
      }
    }
  },
  data(){
    return{

    }
  }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 全局自定义指令
Vue.directive('foc',{ // 自定义指令v-foc
  inserted:el=>{
    el.focus() // 聚焦
  }
});
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <directiveDemo/>
  </div>
</template>
<script>
import directiveDemo from './components/advanceDemo/directiveDemo.vue'
export default {
  name: 'App',
  components: {
    directiveDemo
  }
}
</script>

vue——自定义双向绑定（v-model）

modelDemo.vue

<template>
  <div>
    <h1>双向数据绑定</h1>
    <p>{{message}}</p>
      <input type="text" :value="message" @change="changeMsg"/>
  </div>
</template>
<script>
// 自定义v-model，是用在组件上
// 内置v-model是用在表单上 【它就是通过:value绑定值，change事件来绑定一个函数】
export default {
  model:{ // 双向数据绑定，替换
    prop:'message',
    event:'changeMsg'
  },
  props: {
    message:String
  },
  // data: () => ({
  //     message:'默认值'
  // }),
  methods: {
    changeMsg(event) {
      // console.log(event);
      // this.message = event.target.value
      this.$emit('changeMsg',event.target.value)
    }
  }
}
</script>

parentModel.vue

<template>
  <div>
    <!-- <modelDemo :message="message" @changeMsg="changeMsg"/> -->
    <modelDemo v-model='message'/>
  </div>
</template>
<script>
import modelDemo from './modelDemo.vue'

export default {
  components: {
    modelDemo
  },
  data(){
    return{
      message:'父组件传递默认值'
    }
  },
  methods: {
    changeMsg(val) {
      this.message = val
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

App.vue

<template>
  <div id="app">
    <modelDemo/>
    <parentModel/>
  </div>
</template>
<script>
import modelDemo from './components/advanceDemo/modelDemo.vue'
import parentModel from './components/advanceDemo/parentModel.vue'
export default {
  name: 'App',
  components: {
    modelDemo,
    parentModel
  }
}
</script>

vue——nextTick

nextTickDemo.vue

<template>
  <div>
    <h1>nextTick</h1>
    <ul ref="mydom" v-if="isshow">
      <li v-for="(item,index) in arr" :key="index">
        {{item}}
      </li>
    </ul>
    <button type="button" @click="addFun">添加</button>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
      arr:['a','b','c','d'],
      isshow:false
  }),
  methods: {
    addFun() {
      this.arr.push('k')
      this.isshow = true
      console.log(this.$refs.mydom);// 获取不到dom节点，因为是异步问题
      // 使用$nextTick，可以在数据更新之后，获取到最新的dom节点
      this.$nextTick(()=>{
        // 在dom渲染完成之后就会调用$nextTick
        console.log(this.$refs.mydom);
      })
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <nextTickDemo/>
  </div>
</template>
<script>
import modelDemo from './components/advanceDemo/nextTickDemo.vue'
export default {
  name: 'App',
  components: {
    nextTickDemo
  }
}
</script>

结果：

vue——provide和inject跨级通信

provideAndInjectDemo.vue

<template>
  <div>
    <h1>provid和inject组件通信</h1>
    <p>{{msg}}</p>
    <son/>
  </div>
</template>
<script>
// provide 和 inject 主要在跨级通信
// 场景：全局样式、全局字体、中英文转换，全局布局
import son from './son.vue'
export default {
  components: {
    son
  },
  provide(){
    return{
      lhq:this.mony, // 传递单个
      commProvide:this // 传递当前组件
    }
  },
  data: () => ({
    msg:'爷爷辈组件',
    mony:'零花钱'
  })
}
</script>

son.vue

<template>
  <div>
      <p>{{sonMsg}}</p>
      <grandson/>
  </div>
</template>
<script>
import grandson from './grandson.vue'
export default {
  components: {
    grandson
  },
  data: () => ({
      sonMsg:'儿子辈组件'
  })
}
</script>
<style lang="scss" scoped>
</style>

grandson.vue

<template>
  <div>
      <p>{{sunMsg}}</p>
      <p>展示爷爷给的{{lhq}} - {{commProvide.mony}}</p>
  </div>
</template>
<script>
export default {
  inject: ['lhq','commProvide'],
  data: () => ({
      sunMsg:'孙子辈组件'
  })
}
</script>
<style lang="scss" scoped>
</style>

App.vue

<template>
  <div id="app">
    <provideAndInjectDemo/>
  </div>
</template>
<script>
import provideAndInjectDemo from './components/advanceDemo/provideAndInjectDemo.vue'
export default {
  name: 'App',
  components: {
    provideAndInjectDemo
  }
}
</script>

结果：

vue——插槽slot

slotDemo.vue

父组件 给萝卜坑填萝卜，父给子传递萝卜

<template>
  <div>
      <h1>slot插槽——基本使用</h1>
      <childSlot>
        <div>
          <a href="#">我是一个萝卜</a>
        </div>
    </childSlot/>
  </div>
</template>
<script>
// 父组件 给萝卜坑填萝卜，父给子传递萝卜
import childSlot from './childSlot.vue'
export default {
  name: "",
  components: {
    childSlot
  },
  data: () => ({

  })
}
</script>
<style lang="scss" scoped>
</style>

childSlot.vue

<template>
  <div>
    <p>这里是子组件</p>
    <slot>
      这里有一个萝卜坑
    </slot>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({

  })
}
</script>

App.vue

<template>
  <div id="app">
    <slotDemo/>
  </div>
</template>
<script>
import slotDemo from './components/advanceDemo/slotDemo.vue'
export default {
  name: 'App',
  components: {
    slotDemo
  }
}
</script>

结果：

slotDemo2.vue

父组件 拿子组件中 slot中的数据

<template>
  <div>
    <h1>作用域插槽</h1>
    <childSlot2>
      <!--
      写法一：
      <template v-slot="myData">
        {{myData.slotData[0].name}}
        <ul>
          <li v-for="item in myData.slotData" :key="item.id">
              {{item.name}}
          </li>
        </ul>
      </template> -->
      <!-- 写法二： 多个插槽的写法-->
      <template v-slot:luobo>
          <p>胡萝卜</p>
      </template>
      <template v-slot:wosun>
          <p>莴笋</p>
      </template>
    </childSlot2>
  </div>
</template>
<script>
// 父组件 拿子组件中 slot中的数据

import childSlot2 from './childSlot2.vue'
export default {
  name: "",
  components: {
    childSlot2
  },
  data: () => ({

  })
}
</script>

childSlot2.vue

<template>
  <div>
      <p>子组件</p>
      <slot :slotData="arr" name="luobo">
        萝卜坑
      </slot>
      <slot name="wosun">
        莴笋坑
      </slot>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
      arr:[
        {id:1,name:'hhh1'},
        {id:2,name:'hhh2'},
        {id:3,name:'hhh3'},
      ]
  })
}
</script>

App.vue

<template>
  <div id="app">
    <slotDemo2/>
  </div>
</template>
<script>
import slotDemo2 from './components/advanceDemo/slotDemo2.vue'
export default {
  name: 'App',
  components: {
    slotDemo2
  }
}
</script>

结果：

更多文章

vue从入门到放弃（五）
vue从入门到放弃（三）
vue从入门到放弃（二）
vue从入门到放弃（一）

----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------