vue从入门到放弃

Posted 2022-11-28 胡金水

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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——filter过滤器

filterDemo.vue

App.vue

结果：

vue——watch

watchDemo.vue

App.vue

vue——自定义指令

directiveDemo.vue

main.js

App.vue

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

modelDemo.vue

parentModel.vue

App.vue

vue——nextTick

nextTickDemo.vue

App.vue

结果：

vue——provide和inject跨级通信

provideAndInjectDemo.vue

son.vue

grandson.vue

App.vue

结果：

vue——插槽slot

slotDemo.vue

childSlot.vue

App.vue

结果：

slotDemo2.vue

childSlot2.vue

App.vue

结果：

更多文章