【Vue】第九部分 Vue一些高级知识点

【Vue】第九部分 Vue一些高级知识点


文章目录


9.1 ref属性

  1. 作用:用来给元素或子组件注册引用信息(相当于是id的替代者)

  2. 使用方式

​ 打标识:<h1 ref = "xxx"></h1>

​ 获取:this.$refs.xxx

  1. 被应用在组件上获取的事件为该组件的实例对象(vc),被应用在html标签上获取的是真实的DOM元素

绑定在html标签上

<template>
  <div>
    <h1>欢迎来学习Vue!</h1>
    <h2>学校的名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
    <button @click="showEle" ref="title">点击我查看DOM元素</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            name:"清华大学",
            address:"北京"
        }
    },
    methods:{
        showEle(){
            console.log(this.$refs.title); //真实的DOM元素
        }
    }
};
</script>

绑定在组件上

<template>
  <div>
      <school ref="sch"></school>
      <br>
      <button @click="showvc">点击我查看school组件的实例对象</button>
  </div>
</template>

<script>
import school from "./components/school.vue"
export default {
    components:{school},
    methods:{
        showvc(){
            console.log(this.$refs.sch); //schoool组件的实例对象
        }
    }
}

</script>

9.2 props的配置项

作用:用于组件==接收==外部传过来的数据

有三种方式:

  1. 只接收外部的数据

    props:['anme','age']

  2. 限制数据的类型

    props:{name:String,age:Number}

  3. 限制类型,限制必要性,指定默认值

      props:{
            name:{
                type:String,
                required:true
            },
            age:{
                type:Number,
                required:false,
                default: 99
            }
     }
    

注意:props是只读的,Vue底层会监测你对props的修改(浅层次监视),如果进行了修改,就会发出警告,若业务需求确实 需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。

<template>
    <div class="wrapper">
         <h1>{{msg}}</h1>
         <h2>以下是我的个人信息</h2>
         <h3>学生姓名:{{name}}</h3>
         <h3>性别:{{sex}}</h3>
         <h3>年龄:{{modifyage+1}}</h3>
         <button @click="modifyage++">点击我年龄加1</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            msg:"大家好!我是一名学生",
            modifyage:this.age
            /* 
                为什么可以看的到age是因为props的优先级
                高,会先执行外部传进来的数据所以可以看得到
            */
        }
    },
    
    props:{
        name:{
            type:String,
            required:true
        },
        age:{
            type:Number,
            required:true,
            default: 99
        },
        sex:{
            type:String,
            required:true,
        }
    }
}
</script>

<style>
    .wrapper{
        background-color: antiquewhite;
        color: cadetblue;
    }
</style>

9.3 mixin(混入)

作用:可以把多个组件共用的配置提取成一个混入对象

在这里我创建一个mixin.js文件,以下是代码:

//将共同的方法和数据放在一起
export const mixin = {
    methods:{
        showinfo(){
            alert(this.name);
        }
    },
    data(){
        return {
            x:100,
            y:200
        }
    }
}

第一步导入:

在需要使用的组件中导入(局部导入)

import {mixin} from "../mixin.js";

如果要使用全局mixin,就需要导入到main.js文件里(全局导入)

第二步使用:

  • 全局混入:Vue.mixin(xxx)
  • 局部混入:mixins:['xxx']

全局mixin:

import Vue from "vue"
import App from "./App.vue"

Vue.config.productionTip = false   //阻止vue在生成时自动产生提示
import {mixin} from "./mixin"  //导入
Vue.mixin(mixin)  //使用
new Vue({
    el: '#app',
    data: {
        
    },
    render:h=>h(App)
})

局部mixin

<template>
    <div>
         <h1 @click="showinfo">学校信息</h1>
         <h2>学校名称:{{name}}</h2>
         <h2>学校地址:{{address}}</h2>
    </div>
</template>

<script>
import { mixin} from "../mixin.js";  //导入
export default {
  props:["name","address"],
//  要写成数组的形式,即使一个也要写成数组的形式
  mixins:[mixin,mixin2]  //使用
}
</script>

9.4 Vue插件

  1. 功能:用于增强Vue

  2. 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

  3. 定义插件:

    对象.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }
    
    

    4.使用插件

    vue.use()

main.js

import Vue from "vue";
import App from "./App.vue";
//引入插件
import plugins from "./plugins";
Vue.config.productionTip = false; //关闭Vue的生产提示

//应用(使用)插件,可以在后面传参数
Vue.use(plugins, 1, 2, 3);
//创建vm
new Vue({
  el: "#app",
  render: (h) => h(App),
});


组件中使用

<template>
  <div>
    <h2>学校名称:{{ name | mySlice }}</h2>
    <h2>学校地址:{{ address }}</h2>
    <button @click="test">点我测试</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "清华大学",
      address: "北京",
    };
  },
  methods: {
    test() {
      console.log(this.name)
    },
  },
};
</script>


创建一个plugins.js文件,以下里面的代码:

export default {
  install(Vue, x, y, z) {
    console.log(x, y, z);
    //全局过滤器
    Vue.filter("mySlice", function (value) {
      return value.slice(0, 4);
    });

    //定义全局指令
    Vue.directive("fbind", {
      //指令与元素成功绑定时(一上来)
      bind(element, binding) {
        element.value = binding.value;
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus();
      },
      //指令所在的模板被重新解析时
      update(element, binding) {
        element.value = binding.value;
      },
    });

    //定义混入
    Vue.mixin({
      data() {
        return {
          x: 100,
          y: 200,
        };
      },
    });

    //给Vue原型上添加一个方法(vm和vc就都能用了)
    Vue.prototype.hello = () => {
      alert("你好啊");
    };
  },
};


9.5 scoped样式

  • 作用:让样式在局部生效,防止类名冲突。
  • 写法:<style scoped>

9.6 nextTick(经常用)

  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

举个例子:比如获取焦点


总结

以上就是今天要讲的内容,本文一些Vue高级部分的知识点,希望对大家有所帮助!

上一篇:pf4j spring 集成几个问题


下一篇:spring管理实务有几种方式