Vue [Day5]

已于 2024-02-02 09:44:52 修改
阅读量417 收藏
点赞数 1
分类专栏： Vue学习 文章标签： vue.js javascript 前端
于 2023-08-07 13:19:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63681863/article/details/132135167
版权

自定义指令

全局注册 和 局部注册

在这里插入图片描述
inserted在指令所在的元素 被插入到页面中时，触发


在 Vue 3 中，指令的生命周期钩子函数发生了变化。inserted 钩子函数在 Vue 2.x 中用于在指令所在的元素被插入到页面中时触发，但在 Vue 3 中已经被废弃了。

取而代之的是 mounted 钩子函数，它在指令所在的元素被挂载到页面上时触发。因此，将 inserted 钩子函数替换为 mounted 钩子函数是在 Vue 3 中正确的做法。

在您提供的代码中，将指令的钩子函数从 inserted 改为 mounted 后，指令正常工作并输出了控制台日志。同时，您还在 mounted 钩子函数中设置了元素的样式，并使用 render 函数将一个 h 函数创建的虚拟节点渲染到了指令所在的元素中。

总结来说，在 Vue 3 中，应该使用 mounted 钩子函数来替代 Vue 2.x 中的 inserted 钩子函数，以确保指令的生命周期正确触发。

main.js

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

Vue.config.productionTip = false

// 1.全局注册指令
Vue.directive('focus', {
    // inserted在指令所在的元素 被插入到页面中时，触发
    inserted(el) {
        // el就是指令所绑定的元素
        console.log(el);
        el.focus()
    }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
    <div class="app">
        <h1>自定义指令</h1>
        <input v-focus ref="inp" type="text" />
    </div>
</template>

<script>
export default {
    // mounted() {
    //     this.$refs.inp.focus()
    // }

    // 2.局部注册指令
    directives: {
        focus: {
            inserted(el) {
                el.focus()
            }
        }
    }
}
</script>

<style>
</style>


Day4 $nextTick改标题的光标异步问题

App.vue

<template>
    <div class="app">
        <div v-if="isEdit">
            <input v-focus  ref="inp" v-model="editValue" type="text" />
            <button @click="over">ok</button>
            <!-- 直接v-fous -->
        </div>
        <div v-else>
            {{ title }}
            <button @click="changeTitle">edit</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            editValue: '',
            title: '我是title',
            isEdit: false
        }
    },
   
    methods: {
        changeTitle() { 
            // 1.显示输入框（异步dom更新
            this.isEdit = true

            // 2.让输入框获取焦点
            // $nextTick等dom更新完，立刻执行函数体
            // this.$nextTick(() => {
                // this.$refs.inp.focus()
            // })
        },
        over() {
            this.title = this.editValue
            this.isEdit = false
        }
    }
}
</script>

<style>
</style>


main.js

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

Vue.config.productionTip = false


Vue.directive('focus',{
    inserted(el){
        console.log(el);   
        el.focus()
    }
})


new Vue({
  render: h => h(App),
}).$mount('#app')


指令的值

在这里插入图片描述


App.vue 
<template>
    <div class="app">
        <h1 v-color="color1">11111</h1>
        <h1 v-color="color2">22222</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            color1: 'red',
            color2: 'pink'
        }
    },
    directives: {
        color: {
            // 1.inserted提供的是元素被添加到页面中时的逻辑
            inserted(el, binding) {
                // binding.value就是指令的值
                el.style.color = binding.value
            },

            // 2.update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
            update(el, binding) {
                el.style.color = binding.value
            }
        }
    }
}
</script>

<style>
</style>


小结

binding.value，可以拿到指令的值
在这里插入图片描述


Vue3实现指令

在 Vue 3 中，可以使用 app.directive 方法来注册自定义指令。下面是一个具体的示例代码：

// main.js 或者你的入口文件
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('highlight', {
  mounted(el, binding) {
    el.style.backgroundColor = binding.value;
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value;
  }
});

app.mount('#app');

在上述代码中，我们注册了一个名为 highlight 的自定义指令。该指令可以修改元素的背景颜色。

在 mounted 钩子函数中，我们接收了两个参数：el 和 binding。el 是指令所绑定的元素，而 binding 是一个对象，包含了指令的信息。

通过 binding.value 可以获取到指令的值。在这个例子中，我们使用指令值来设置元素的背景颜色。

此外，在 updated 钩子函数中，我们也可以监听指令值的变化，并在更新时重新设置元素的背景颜色。

在 Vue 模板中，你可以使用 v-highlight 指令来应用这个自定义指令：

<template>
  <div v-highlight="'yellow'">Highlighted Div</div>
</template>

在这个示例中，我们将 v-highlight 指令应用到一个 <div> 元素上，并传递了 'yellow' 作为指令的值。这将使该 <div> 元素的背景颜色变为黄色。

这只是一个简单的示例来说明如何实现自定义指令，你可以根据自己的需求来定义更复杂的指令逻辑。

希望这个示例对你有所帮助。如果还有其他问题，请随时提问。

v-loading 指令封装

在这里插入图片描述


在这里插入图片描述

App.vue

<template>
    <div class="main">
        <div class="box" v-loading="isLoading">
            <ul>
                <li v-for="item in list" :key="item.id" class="news">
                    <div class="left">
                        <div class="title">{{ item.title }}</div>
                        <div class="info">
                            <span>{{ item.source }}</span>
                            <span>{{ item.time }}</span>
                        </div>
                    </div>

                    <div class="right">
                        <img :src="item.img" alt="" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
  
  <script>
// 安装axios =>  yarn add axios
import axios from 'axios'

// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {
    data() {
        return {
            list: [],
            isLoading: true
        }
    },
    async created() {
        // 1. 发送请求获取数据
        const res = await axios.get('http://hmajax.itheima.net/api/news')

        setTimeout(() => {
            // 2. 更新到 list 中
            this.list = res.data.data
            this.isLoading = false
            console.log('111')
        }, 2000)
        console.log('22222')
    },
    directives: {
        loading: {
            inserted(el, binding) {
                // if (binding.value == true) {
                //     el.classList.add('loading')
                // } else {
                //     el.classList.remove('loading')
                // }
                // 用三元写
                binding.value
                    ? el.classList.add('loading')
                    : el.classList.remove('loading')
            },
            update(el, binding) {
                binding.value
                    ? el.classList.add('loading')
                    : el.classList.remove('loading')
            }
        }
    }
}
</script>
  
  <style>
/* 伪类 - 蒙层效果 */
.loading:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff url('../public/loading.gif') no-repeat center;
}

/* .box2 {
    width: 400px;
    height: 400px;
    border: 2px solid #000;
    position: relative;
  } */

.box {
    width: 800px;
    min-height: 500px;
    border: 3px solid orange;
    border-radius: 5px;
    position: relative;
}
.news {
    display: flex;
    height: 120px;
    width: 600px;
    margin: 0 auto;
    padding: 20px 0;
    cursor: pointer;
}
.news .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10px;
}
.news .left .title {
    font-size: 20px;
}
.news .left .info {
    color: #999999;
}
.news .left .info span {
    margin-right: 20px;
}
.news .right {
    width: 160px;
    height: 120px;
}
.news .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>


插槽

他本身就还是个组件，只不过是活的，可定制的

类别1：默认插槽

在这里插入图片描述



<slot></slot>是写在子组件里的
在这里插入图片描述

MyDialog2.vue          子组件是 <slot>

<template>
    <div class="MyDialog2">
        <div class="log-header">
            <h1>友情提示</h1>
            <span>✖️</span>
        </div>
        <hr />

        <div class="log-body">
            <slot></slot>
        </div>

        <div class="log-footer">
            <button class="cancel">取消</button>
            <button class="ok">确认</button>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.MyDialog2 {
    width: 400px;
    margin: 20px auto;
    padding: 0 20px;
    border: 1px black solid;
    border-radius: 10px;
    background-color: #fff;
}
.log-header {
    height: 60px;
    display: flex;
    justify-content: space-between;

    line-height: 60px;
}

.log-body {
    padding: 10px;
    height: 80px;
}

.log-footer {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
}

button.cancel {
    width: 50px;
    height: 30px;
    background-color: #fff;
    margin-right: 20px;
    border: black 1px solid;
    border-radius: 5px;
}

button.ok {
    width: 50px;
    height: 30px;
    background-color: #05defa;
    border: black 1px solid;
    border-radius: 5px;
}
</style>


App.vue 
<template>
    <div class="app">
        <!-- 直接写 不用{{}} -->
        <MyDialog2>确认删除吗 </MyDialog2>
        <MyDialog2>确认退出吗 </MyDialog2>
    </div>
</template>

<script>
import MyDialog2 from './components/MyDialog2.vue'
export default {
    components: {
        MyDialog2
    }
}
</script>

<style>
body {
    background-color: #cac2c2;
}
</style>


后备内容（有默认值的）

在这里插入图片描述


在这里插入图片描述




MyDialog.vue

<div class="log-body">
         <slot>有后备内容</slot>
 </div>


Vue.vue

    <div class="app">
        <!-- 有数值，就照常显示 -->
        <MyDialog2>确认删除吗 </MyDialog2>
        <MyDialog2>确认退出吗 </MyDialog2>

        <!-- 没数值，就显示默认 -->
        <MyDialog2> </MyDialog2>
    </div>


类别2：具名插槽

在这里插入图片描述



在这里插入图片描述


MyDialog2.vue               子组件<slot name="xxxx">

 <div class="MyDialog2">
        <div class="log-header">
            <slot name="head"></slot>
        </div>
        <hr />

        <div class="log-body">
            <slot name="body">有后备内容</slot>
        </div>

        <div class="log-footer">
            <slot name="footer"></slot>
        </div>
    </div>


App.vue 父组件
<template v-slot:head> <template #footer>
class=“cancel” class="ok"等css样式，还是在MyDialog.vue里面没动，但是还是可以正常渲染，yyds

<div class="app">
        <MyDialog2>
        <!-- head没有加“”，就直接写了哎 -->
            <template v-slot:head>
                <h1>友情提示</h1>
                <span>✖️</span>
            </template>
            <template v-slot:body> 确认删除吗</template>
            
            <template #footer>
                <button class="cancel">取消</button>
                <button class="ok">确认</button>
            </template>
        </MyDialog2>
    </div>


在这里插入图片描述



插槽的传参语法：作用域插槽 （子传父

在这里插入图片描述



在这里插入图片描述


在这里插入图片描述





在这里插入图片描述
妙在 App.vue有两个数组，要求的两个表格也是显示不同的数据，但MyTable.vue里只用写一个table，如果写两个，反而会出现4个表单，而且两次的传数据必须同名,都是data

App.vue

        <MyTable :data="list">
            <template #default="obj">
                <button @click="del(obj.row.id)">删除</button>
            </template>
        </MyTable>

        <MyTable :data="list2">
            <template #default="{ row }">
                <!-- 还能直接解构 -->
                <button @click="show(row.id)">查看</button>
            </template>
        </MyTable>

MyTable.vue

<template>
    <div class="MyTable">
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年纪</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in data" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <!-- 1.给slot标签，以添加属性的方式，传值 -->
                    <slot :row="item" msg="look test"></slot>
                    <!-- 2.将所有的属性，添加到一个对象中 -->
                    <!-- {
                        row:{id:1,name:'sdsdsd',age:13},
                        msg:'look test'

                    } -->
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props: {
        data: Array
    }
}
</script>

<style>
table {
    border: 1px black solid;
    border-spacing: 0;
}
td,
th {
    border: 1px rgb(176, 175, 175) solid;
}
</style>


App.vue

<template>
    <div class="app">
        <!-- 传数据是在 MyTable    父传子-->
        <MyTable :data="list">
            <!-- 接收数据 是在template   子传父
            
             <template v-slot:head>
                制定插槽名字，也是在template
            -->

            <!-- 3.通过template #插槽名=“变量名” 接收 -->
            <template #default="obj">
                <button @click="del(obj.row.id)">删除</button>
            </template>
        </MyTable>

        <MyTable :data="list2">
            <template #default="{ row }">
                <!-- 还能直接结构 -->
                <button @click="show(row.id)">查看</button>
            </template>
        </MyTable>
    </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
    components: {
        MyTable
    },
    data() {
        return {
            list: [
                { id: 1, name: '张小花', age: 18 },
                { id: 2, name: '孙大明', age: 19 },
                { id: 3, name: '刘德忠', age: 17 }
            ],
            list2: [
                { id: 1, name: '赵小云', age: 18 },
                { id: 2, name: '刘蓓蓓', age: 19 },
                { id: 3, name: '姜肖泰', age: 17 }
            ]
        }
    },
    methods: {
        del(tt) {
            this.list = this.list.filter((item) => item.id != tt)
        },
        show(tt) {
            alert(`name:${tt.name},age:${tt.age}`)
        }
    }
}
</script>

<style>
</style>


在这里插入图片描述



【综合案例】—— 商品列表

在这里插入图片描述



App.vue

<template>
    <div class="table-case">
        <MyTable :mydata="goods">
            <template #head>
                <th>编号</th>
                <th>名称</th>
                <th>图片</th>
                <th width="100px">标签</th>
            </template>

            <!-- 对应名字，并接受数据 -->
            <!-- <template #body="obj"> -->
            <!-- 解构 -->
            <template #body="{ item, index }">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td>
                    <img :src="item.picture" />
                </td>
                <td>
                    <!-- 标签组件 -->
                    <MyTag v-model="item.tag"></MyTag>
                </td>
            </template>
        </MyTable>
    </div>
</template>
  
  <script>
// my-tag 标签组件的封装
// 1. 创建组件 - 初始化
// 2. 实现功能
//    (1) 双击显示，并且自动聚焦
//        v-if v-else @dbclick 操作 isEdit
//        自动聚焦：
//        法1. $nextTick => $refs 获取到dom，进行focus获取焦点
//        法2. 封装v-focus指令

//    (2) 失去焦点，隐藏输入框
//        @blur 操作 isEdit 即可

//    (3) 回显标签信息
//        回显的标签信息是父组件传递过来的
//        v-model实现功能 (简化代码)  v-model => :value 和 @input
//        组件内部通过props接收, :value设置给输入框

//    (4) 内容修改了，回车 => 修改标签信息
//        @keyup.enter, 触发事件 $emit('input', e.target.value)

// ---------------------------------------------------------------------

// my-table 表格组件的封装
// 1. 数据不能写死，动态传递表格渲染的数据  props
// 2. 结构不能写死 - 多处结构自定义 【具名插槽】
//    (1) 表头支持自定义
//    (2) 主体支持自定义
import MyTag from './components/MyTag.vue'
import MyTable from './components/MyTable.vue'
export default {
    name: 'TableCase',
    components: { MyTag, MyTable },
    data() {
        return {
            text: 'slx',
            goods: [
                {
                    id: 101,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',
                    name: '梨皮朱泥三绝清代小品壶经典款紫砂壶',
                    tag: '茶具'
                },
                {
                    id: 102,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',
                    name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌',
                    tag: '男鞋'
                },
                {
                    id: 103,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',
                    name: '毛茸茸小熊出没，儿童羊羔绒背心73-90cm',
                    tag: '儿童服饰'
                },
                {
                    id: 104,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',
                    name: '基础百搭，儿童套头针织毛衣1-9岁',
                    tag: '儿童服饰'
                }
            ]
        }
    }
}
</script>
  
  <style lang="less" scoped>
.table-case {
    width: 1000px;
    margin: 50px auto;
    img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        vertical-align: middle;
    }
}
</style>


main.js

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

Vue.config.productionTip = false

// 1.全局注册指令
Vue.directive('focus', {
    // inserted在指令所在的元素 被插入到页面中时，触发
    inserted(el) {
        // el就是指令所绑定的元素,binding用不到，所以没写
        console.log(el);
        el.focus()
    }
})

new Vue({
  render: h => h(App),
}).$mount('#app')


MyTable.vue

<template>
    <table class="my-table">
        <thead>
            <tr>
                <slot name="head"></slot>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in mydata" :key="item.id">
                <!-- 用作用域插槽，将数据绑在插槽 -->
                <!-- 以添加属性的方式，传值 -->
                <slot name="body" :item="item" :index="index"></slot>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    props: {
        mydata: {
            type: Array,
            required: true
        }
    }
}
</script>

<style lang="less" scoped>
.my-table {
    width: 100%;
    border-spacing: 0;
    img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        vertical-align: middle;
    }
    th {
        background: #f5f5f5;
        border-bottom: 2px solid #069;
    }
    td {
        border-bottom: 1px dashed #ccc;
    }
    td,
    th {
        text-align: center;
        padding: 10px;
        transition: all 0.5s;
        &.red {
            color: red;
        }
    }
    .none {
        height: 100px;
        line-height: 100px;
        color: #999;
    }
}
</style>


MyTag.vue

<template>
    <div class="my-tag">
        <input
            v-if="isEdit"
            v-focus
            ref="inp"
            @blur="isEdit = false"
            @keyup.enter="handleEnter"
            :value="value"
            class="input"
            type="text"
            placeholder="输入标签"
        />
        <div @dblclick="handleClick" v-else class="text">{{ value }}</div>
    </div>
</template>

<script>
export default {
    props: {
        value: String
    },
    data() {
        return {
            isEdit: false
        }
    },
    methods: {
        handleClick() {
            // 切换显示状态
            this.isEdit = true

            // // 立刻获取焦点 异步
            // this.$nextTick(() => {
            //     this.$refs.inp.focus()
            // })
            // 先不用，要封装到全局指令main.js
            // 所以直接v-focus
        },
        handleEnter(e) {
            // 子传父，回车时，输入框内容提交给父组件更新
            // 由于父组件是v-model，触发事件，需要input事件,输入框的  v-model=>:value @input
            // e.target是触发事件的事件元

            if (e.target.value.trim() == '') {
                return alert('不能是空')
            }

            this.$emit('input', e.target.value)

            // 回车后，提交完成，要关闭输入框，而不是失去焦点才关上
            this.isEdit = false
        }
    }
}
</script>

<style lang="less" scoped>
.my-tag {
    cursor: pointer;
    .input {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;
        &::placeholder {
            color: #666;
        }
    }
}
</style>


单页应用程序 SPA - Sinle Page Application

在这里插入图片描述




在这里插入图片描述

路由

路径 和 组件 的映射关系

VueRouter

作用：修改地址栏路径时，切换显示匹配的组件
在这里插入图片描述

VueRouter 使用

在这里插入图片描述



在这里插入图片描述


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

Vue.config.productionTip = false

// 5个基础步骤
// 1.下载
// cnpm i vue-router@3.6.5
// 2.引入
import VueRouter from 'vue-router'
import Find from './views/Find'
import Friend from './views/Friend'
import My from './views/My'
// 3.安装注册 Vue.use
Vue.use(VueRouter)

// 4.创建路由对象
const router = new VueRouter({
    // routes路由规则 {path:路径，components:组件}
    routes: [
    // 注意路径 没有./ 是绝对路径
        { path: '/find', component: Find },
        { path: '/friend', component: Friend },
        { path: '/my', component: My},
    ]
})

// 5.注入到new Vue中，建立关联
new Vue({
    render: h => h(App),
    // router:router
    // 简写
    router
}).$mount('#app')

// 2个核心步骤
// 1.建组件（src/views/xxxx），配规则
// 2.准备导航链接，配置路由出口（匹配组件所展示的位置


src/views/Find.vue
My.vue和Friend.vue同理

<template>
    <div class="Find">
        <p>Find</p>
        <p>Find</p>
        <p>Find</p>
    </div>
</template>
  
  <script>
export default {
    name: 'MyFind'
}
</script>
  
  <style>
</style>


App.vue 
<template>
    <div class="app">
        <div class="nav">
            <a href="#/find">发现</a>
            <a href="#/friend">朋友</a>
            <a href="#/my">我的</a>
        </div>

        <!-- 路由出口 匹配组件所展示的位置 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {}
</script>

<style>
.nav a {
    display: inline-block;
    width: 50px;
    height: 30px;
    text-decoration: none;
    background-color: #ca8b8b;
    border: 1px solid black;
}
</style>

<a href="#my">我的</a> # 起到什么作用

<div class="app">
        <a href="#/find">发现</a>
        <a href="#/friend">朋友</a>
        <a href="#my">我的</a>
    </div>

在这里，#符号被用作一个锚点（anchor）。锚点是用来标识页面中的特定部分或位置的标记。当你点击带有#符号的链接时，浏览器会滚动到指定的锚点所在的位置，将页面的滚动位置调整到对应的元素上。

在给定的代码片段中，href属性值中的#后面是一个标识符，例如#/find、#/friend和#my。它们会被解释为页面中的锚点，并与页面中具有相应id或name属性的元素关联起来。当点击这些链接时，浏览器会将滚动位置调整到与相应锚点相关联的元素上。

例如，如果存在一个具有id="find"的元素，当你点击发现时，浏览器会滚动到具有id="find"的元素所在的位置。

注意：在这种情况下，#符号后面的字符串不会被发送到服务器，它只是本地页面内的导航标识符。

小结
在这里插入图片描述


组件存放目录问题

页面组件放在 views
复用组件放在 components

在这里插入图片描述

珊珊而川
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 自定义指令
iteval
09-05 447
一、定义语法 局部指令 – directives new Vue({ directives:{指令名: 配置对象 | 回调函数} }) 全局指令 – driectives Vue.directive(指令名: 配置对象 | 回调函数) 二、配置对象中常用的3个回调： bind: 指令与元素成功绑定时调用 inserted: 指令所在元素被插入页面时调用 update: 指令所在模板结构被重新解析时调用 如果直接在 directive 里面写函数，就是 bind + update 三、备注
Vue自定义指令
Heartbroken_man的博客
02-09 1343
vue官方有提供给我们自定义像v-model 和 v-show这样的指令，来看看怎么定义 话不多说我们事先用vue官方脚手架创建一个项目 比如我们要定义一个鼠标移入就把当前dom原生透明度显示为0，鼠标移开的时候为1，达到鼠标移入显示，鼠标移开隐藏的效果 function on(element, event, handler) { if (element && event && handler) { element.addEventListener(eve
29.VUE自定义指令directive和inserted
热门推荐
休息休息夏的博客
05-29 1万+
VUE自定义指令directive和inserted1.什么事自定义指令1.2使用自定义指令的方式2.设置自定义组件2.1 设置全局指令2.2 设置私有指令2.3 钩子函数3. 案例 1.什么事自定义指令 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 例外)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 简单的讲就是： 指令是可以写在DOM元素的小命令，以v-为前缀，vue就能识别这是一个
vue小结
淮枳
08-08 145
学习第一天 1.MVVM模式 2.一般一个页面只有一个根元素，实例化一个Vue对象——new Vue() 3.写法：          插值表达式 {{msg}}         指令：v-html="msg" —— 可以识别标签  |  v-text="msg" —— 纯文本，不能识别标签，可用插值表达式代替{{msg}}         事件结构：v-on:click="fn()" 4.v-...
VUE——自定义指令
王王仙贝的博客
04-09 1522
v-xxx 一、定义语法 1.局部指令 new Vue({ directives: { //方法一： big(element, binding) { element.innerText = binding.value * 10; console.log(binding.value); }, //方法二： fbind:
Vue Day7 综合案例
08-11
在Vue.js的学习过程中，Day7通常意味着我们已经掌握了基础组件、事件处理、状态管理等核心概念，现在将这些知识综合运用到一个实际的项目中。在这个"Vue Day7 综合案例"中，我们将深入探讨如何构建一个购物车应用...
Vue Day3小兔鲜组件
08-05
在“Vue Day3小兔鲜组件”学习中，我们将深入探讨Vue组件的核心概念、创建方法以及如何在实际项目中有效地利用它们。 首先，让我们了解什么是Vue组件。Vue组件是一个可重用的Vue实例，它有自己的模板、数据、方法和...
Vue Day7 代码 vuex
08-11
Vue Day7 的学习重点在于了解和使用 Vuex，它是 Vue.js 应用状态管理的一个官方库。Vuex 提供了一个集中式的存储系统，用于管理和共享应用的状态，使得在复杂的应用中保持数据的一致性变得更容易。以下是对每个文件...
vue2-day5.zip
08-10
在这个“vue2-day5.zip”压缩包中，我们可以推测这可能是某个Vue 2教程的第五天学习资料。虽然没有具体的文件内容可以参考，但根据常规的学习路径，我们可以深入讨论Vue 2的一些核心概念和重要特性。 1. **组件系统...
Vue Day6面经基础src文件
08-10
在Vue Day6的面试准备中，src目录是项目的核心部分，包含着应用的所有源代码。理解src目录的结构和其中的文件是掌握Vue开发的关键。 1. **src 文件夹结构**： - `src` 文件夹通常包含以下主要部分： - `...
vue中v-if与v-show的区别以及使用场景
RenWenJie521的博客
10-31 607
vue中v-if与v-show的区别以及使用场景 区别 1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如...
vue自定义指令
wind_notcare的博客
06-02 202
vue的自定义指令，可以使很多重复问题简单扁平化，抽离封装之后更加提升复用性
Vue——自定义指令
奔跑的程序员
09-19 516
全局 /** * 全局指令 v-ff * Vue.directive('ff',{}) * 指令使用比较频繁的情况下使用全局 * * 局部指令 * 只使用一次 或少量次数的指令 使用局部 */ Vue.directive('ff', { // 当把指令与el绑定在一起的时候触发 bind(el, binding, vnode) { // 当指令绑定到元素...
Vue—自定义指令
xiaohjuan的博客
04-25 64
<script> Vue.directive("myfocus",{ inserted(domElem){ domElem.focus(); } }) </script> <input type="text" v-myfocus />
【vue】vue 自定义指令directive的使用场景:
SunPeng的博客
04-14 1418
【vue】vue 自定义指令directive的使用场景:
【Vue】使用 onMounted 确保在组件挂载后执行异步操作
小秀的博客
06-27 7151
在该钩子函数中执行异步操作可以保证组件已经完全渲染，并且 DOM 元素已经存在，从而避免在组件还未挂载或尚未完全初始化时执行异步操作导致的问题。如果在这个阶段执行异步操作，可能无法获取到正确的 DOM 元素或执行预期的操作。钩子函数中，可以确保在组件已经挂载到 DOM 后执行异步操作，保证了组件已经完全初始化，并且相关的 DOM 元素和数据可用。如果在这个阶段执行异步操作，可能无法正确地获取或处理依赖项的数据。在上面的代码中，使用了 Vue 3 的 Composition API 中的。
vue中自定义指令使用
qq_42796723的博客
08-11 242
定义color指令；自定义指令 - 传值
Vue-生命周期与钩子函数
qq_39206750的博客
12-14 497
生命周期过程 生命周期指的事物从出生到死亡的过程 挂载→更新→销毁 钩子函数 Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数 构子函数 描述 beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 created 在实...
Vue3
qq_40589140的博客
06-15 3115
一、安装脚手架 vue create 项目名 二、绑定原理 1.Vue2绑定原理 • 访问器属性+虚拟DOM树 2.访问器属性的问题 • 只能在首次创建new Vue()对象时初始就有的属性，添加监视(访问器属性)。今后动态添加进来的成员，就无法自动添加访问器属性，也就无法自动得到监视。 • 无法给索引数组的数字下标添加访问器属性 • 结果，在vue程序中后添加成员，或通过下标修改索引数组中的元素值，页面都不自动更新！ • 比如: 3.Vue3的绑定原理 • ES6的Proxy代理对象 – p
vue dayjs引入
最新发布
09-06
要在Vue项目中使用Day.js，你需要先安装Day.js和相应的插件。请按照以下步骤进行操作： 1. 在命令行中进入你的Vue项目文件夹，然后运行以下命令来安装Day.js和相关插件： ``` npm install dayjs npm install vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值