vue基础入门下

最新推荐文章于 2022-11-08 17:06:03 发布

要好好写代码才行

最新推荐文章于 2022-11-08 17:06:03 发布

阅读量189

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/visibleforest/article/details/120723427

版权

这篇博客介绍了Vue.js的基础知识，包括mixin的定义和数据优先级，自定义指令的开发，teleport传送门的使用，插件的作用和开发实例，以及Vue3的composition API，特别是setup函数及其响应式引用、props和context的使用，还探讨了计算属性、监听器、生命周期函数、provide和inject以及在setup中获取DOM元素的方法。

摘要由CSDN通过智能技术生成

一、mixin混入的基础语法

定义mixin：

全局mixin的定义方法和全局组件类似，局部mixin的定义方法和定义局部组件类似：

    // 定义局部mixin
        const myMixin = {
            data() {
                return {
                    count:222,
                }},}
const app = Vue.createApp({
            // 在需要混入的组件的mixins属性中接收
            mixins:[myMixin],
            // 可以像使用自己的数据一样去使用mixin的数据
            template:`
            <div>{
  {count}}</div>`
        });

    // 定义全局mixin，在组件中可以直接使用
        app.mixin({
            data() {
                return {
                    count:333,
                }},})

冲突数据的优先级

1.data中的数据和methods的方法：组件的data数据优先级>局部mixin中data优先级>全局mixin中data优先级；

2.生命周期函数中：组件和mixin中的生命周期函数都会执行，且先执行组件中的，再执行局部mixin中的，最后执行全局mixin中的；

3.自定义组件中（不写在data中，定义在最外层花括号中的属性）：默认组件的自定义属性优先级>局部mixin中自定义属性优先级>全局mixin中自定义属性优先级；可以修改优先级：

// 修改策略，改变优先级
        app.config.optionMergeStrategies.myprops
         = (mixValue, appValue) => {
            return mixValue || appValue;
        }

二、开发实现Vue中的自定义指令

<style>
        .header{
            position: absolute;
        }
    </style>
<script>
        // 定义局部自定义指令
        const myDirective ={
            mounted(el) {
               el.focus();
            },
        };

        const app = Vue.createApp({
            // 在directives属性中写app要使用的局部指令：
            directives:{
                myDirective
            },
            data() {
                return {
                    distance:40,
                }
            },
            template:`
            <div class="header" v-dis:left="distance">
                <input v-myDirective/>
                </div>`
        })

        // 定义全局自定义指令:
        /*  app.directive("dis",
         {
            // el是Dom元素，binding是
            mounted(el,binding) {
                el.style.top = binding.value+"px";
            },
            updated(el,binding) {
                el.style.top = binding.value+"px";
            },
        } */
        // directive的对象参数中如果写了且只写了mounted和updated,则可以缩写
        // 以上代码的缩写：
        app.directive("dis",(el,binding)=>{
            // binding.arg是属性的参数，binding.value是属性的参数的值
            el.style[binding.arg] = binding.value+"px";
            console.log()
        })
        const vm = app.mount("#root");
    </script>

三、teleport传送门

使用teleport标签包裹的部分，可通过teleport的to属性传送到任何其他元素上挂载。

 <style>
        .content{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #000;
        }
        .mask{
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(116, 67, 207, 0.5);
        }
    </style>

 <script>
        // teleport传送门
        const app = Vue.createApp({
            data() {
                return {
                    show:false
                }
            }