前端-vue组件

最新推荐文章于 2024-04-11 21:27:33 发布
最新推荐文章于 2024-04-11 21:27:33 发布
阅读量430 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiuyue_77/article/details/126387386
版权

前端-vue组件

文章目录

一、vue生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        {{ num }}
        <br>
        <button @click="add">+</button>
    </div>
</body>

<script>

    let app = new Vue({
        el : '#app',
        data:{
            num : 10
        },
        // 组件创建之前
        beforeCreate() {
            console.log('组件创建之前')
        },
        // 组件创建完成
        created() {
            console.log('组件创建完成')
        },
        // 组件挂载之前
        beforeMount() {
            console.log('组件挂载之前')
        },
        // 组件挂载完成
        mounted() {
            console.log('组件挂载完成')
        },
        // 组件更新之前
        beforeUpdate() {
            console.log('组件更新之前')
        },
        // 组件更新完成
        updated() {
            console.log('组件更新完成')
        },
        // 组件销毁之前
        beforeDestroy() {
            console.log('组件销毁之前')
        },
        // 组件销毁完成
        destroyed() {
            console.log('组件销毁完成')
        },

        methods: {
            add(){
                this.num++
            }
        },
    })
    // 销毁当前实例
    app.$destroy()





</script>


</html>

二、v-model修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        <!-- v-model输入数据会绑定到属性上，lazy当输入框失去焦点时才会进行绑定 -->
        <input type="text" v-model.lazy="lazyStr">
        <br>
        {{ lazyStr }}
        <br>
        <!-- 输入数据会自动转换为number，可以直接进行运算 -->
        <input type="text" v-model.number="numberStr">
        <br>
        {{ numberStr  +  1}}
        <br>
        <!-- 输入数据会自动去掉前后空格 -->
        <input type="text" v-model.trim="trimStr">
        <br>
        {{ trimStr }}
    </div>

</body>

<script>

    let app = new Vue({
        el : '#app',
        data : {
            lazyStr : '',
            numberStr : '',
            trimStr : ''
        }
    })


</script>

</html>

三、vue的数组操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 遍历userArr的属性 -->
        <p v-for="(item,index) in userArr">
            {{item.userId}},{{item.userName}},{{item.userSex}}
        </p>
        <button @click="clear">清空</button>
    </div>
</body>

<script>

    let app = new Vue({
        el: '#app',
        data: {
            userArr: [
                {
                    userId: 1,
                    userName: '小明',
                    userSex: '男'
                },
                {
                    userId: 2,
                    userName: '小红',
                    userSex: '女'
                },
                {
                    userId: 3,
                    userName: '小丽',
                    userSex: '女'
                }
            ]
        },
        methods: {
            clear(){
                // 这个方法在vue里不能清空数组
                // this.userArr.length = 0
                this.userArr.splice(0,this.userArr.length)
            }
        },
    })

    // 由于JS语法的限制，有时vue不能监听到数组的变化，所以在使用vue操作数组时，注意要使用vue提供的数组操作方法
    // push  pop shift unshift splice sort reverse


</script>

</html>

四、表单绑定

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">
        <h1>注册</h1>
        <form>

            <label>用户名:</label>
            <input type="text" v-model="myForm.userName">
            <br>
            <label>密码：</label>
            <input type="password" v-model="myForm.password">

            <br>
            <label>确认密码：</label>
            <input type="password" v-model="myForm.beginpassword">
            <br>
            <!-- 单选框 -->
            <label>性别：</label>
            <input type="radio" v-model="myForm.sex" value="0">男
            <input type="radio" v-model="myForm.sex" value="1">女

            <br>
            <!-- 多选框 -->
            <label>爱好：</label>
            <input type="checkbox" value="0" v-model="myForm.like">读书
            <input type="checkbox" value="1" v-model="myForm.like">体育
            <input type="checkbox" value="2" v-model="myForm.like">打游戏


            <br>
            <!-- 下拉框 -->
            <label>国籍：</label>
            <select v-model="myForm.nationality">
                <option value="0">中国</option>
                <option value="1">美国</option>
                <option value="2">英国</option>
            </select>

            <br>
            <!-- 文本区域 -->
            <label>个人简介：</label>
            <br>
            <textarea cols="30" rows="5" v-model="myForm.synopsis"></textarea>

            <br>
            <input type="button" value="提交" @click="handler">

        </form>
    </div>


</body>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            myForm: {
                userName: "",
                password: "",
                beginpassword: "",
                sex: 0,
                like: [0, 1, 2],
                nationality: 0,
                synopsis: ""
            }
        },
        methods: {
            handler: function () {
                console.log(this.myForm.userName)
                console.log(this.myForm.password)
                console.log(this.myForm.beginpassword)
                console.log(this.myForm.sex)
                console.log(this.myForm.like)
                console.log(this.myForm.nationality)
                console.log(this.myForm.synopsis)

            }
        }
    })
</script>

</html>

五、过滤器

1.全局过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 要渲染的数据 | 过滤器名 -->
        <!-- 渲染完的数据表示已经通过过滤器的筛选 -->
        <!-- 串联的过滤器直接拼接在后面即可，一般用于过滤器需要处理多个函数时 -->
        {{ price | add1 | add2 }}
        <br>
        {{ num1 | dosomethimg(5,20) }}
        <br>
        {{ num2 | dosomethimg(15,20) }}
    </div>

</body>

<script>

    // 过滤器是对即将要显示的数据做进一步的筛选，然后进行显示，过滤器并不会改变原来的数据，只是会在原数据的基础上产生新的数据

    // 注册全局过滤器时，要在数据前加上大写vue，而且必须在vue实例之前
    // filter有2个参数，第一个参数是过滤器名，第二个参数是过滤器的处理函数,处理函数也有一个参数，表示要过滤的数据
    Vue.filter('add1', function (value) {
        return '￥' + value
    })

    // 过滤器串联
    Vue.filter('add2', function (value) {
        return value + '元'
    })

    // 过滤器传参，传递的参数需要写在处理函数中过滤数据的后面
    Vue.filter('dosomethimg', function (value, p1, p2) {
        if (p1 < 10) {
            return value + p1
        } else {
            return value + p2
        }
    })

    let app = new Vue({
        el: '#app',
        data: {
            message: '全局过滤器',
            price: 10,
            num1: 5,
            num2: 12
        }
    })



</script>





</html>

2.本地过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">

        {{ message | Reverse }}
        <br>
        {{ message | Length }}

    </div>

</body>

<script>

    let app = new Vue({
        el : '#app',
        data : {
            message : '本地过滤器'
        },
        // 本地过滤器写在vue实例中，与data同级
        filters : {
            // 倒序功能
            Reverse : function(value){
                // 判断传进来的value是否为空
                if(!value){
                    return ''
                }
                // 将value的值转成字符串，在转成字符串数组，调用反转功能，最后再转回字符串
                return value.toString().split('').reverse().join('')

            },
            // 返回字符串的长度
            Length : function(value){
                return value.length
            }

        }
    })



</script>

</html>

六、vue组件

1.vue组件模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        <mycomponent></mycomponent>
    </div>

    <!-- 组件模板，body部分 -->
    <template id="mytemplate">
        <div>
            
            <h1>这是一个布局组件，现在使用组件模板渲染它</h1>
            <button @click="reduce">-</button> {{ num }} <button @click="add">+</button>


        </div>
    </template>

</body>

<script>

    let obj = {
        // 组件模板，实例部分，绑定body部分的template标签
        template : '#mytemplate',
        // 数据部分，data必须是一个函数，该函数返回一个对象
        data() {
            return {
                num : 1
            }
        },
        methods: {
            add(){
                this.num++
            },
            reduce(){
               this.num--
            }
        },

    }


    let app = new Vue({
        el : '#app',
        components : {
            mycomponent : obj
        }
    })



</script>


</html>

2.vue全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <mycomponent></mycomponent>
    </div>
</body>

<script>

    // 组件是Vue中最重要的组成部分，官方文档定义组件是可复用的vue实例

    // 注册全局组件
    // 1.使用Vue.component注册全局组件，需要提供2个参数，组件的标签和组件构造器
    // 2.Vue.component内部会调用组件构造器，创建组件实例
    // 3.将组件挂载到某个vue实例下

    // 由于组件是可以复用的vue实例，所以它们也可以有data,computed,methods
    Vue.component('mycomponent',{
        template :
        // 标签部分，模板字符串
        `
        <div>
            <h1>这是一个全局组件</h1> 
            <button @click="reduce">-</button>{{ num }}<button @click="add">+</button>  
        </div>
        `,
        // 数据部分
        data() {
            return {
                num : 1
            }
        },
        // 方法部分
        methods: {
            add(){
                this.num++
            },
            reduce(){
                this.num--
            }

        },
    })


    let app = new Vue({
        el : '#app',
        data : {

        }
    })



</script>


</html>

3.vue局部组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <mycomponent></mycomponent>
    </div>
</body>

<script>

    // 注册局部组件
    let obj = {

        template:
            // 标签部分
            `
        <div>
            <h1>这是一个局部组件</h1> 
            <button @click="reduce">-</button>{{ num }}<button @click="add">+</button>  
        </div>
        `,
        // 数据部分
        data() {
            return {
                num: 1
            }
        },
        // 方法部分
        methods: {
            add() {
                this.num++
            },
            reduce() {
                this.num--
            }

        }
    }


    let app = new Vue({
        el: '#app',
        // 组件的集合，里面存放需要渲染的所有组件
        components: {
            // 左边是组件名（标签名），右边是接收局部组件的变量
            mycomponent: obj
        }
    })



</script>


</html>
jiuyue_77
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端html利用http-vue-loader以组件方式引入vue文件
06-15
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 ...
vue-page-designer-Vue组件，用于拖放来设计和构建移动网站。-Vue.js开发
05-27
vue-page-designer实时演示基于Vue的拖放式移动网站构建器。 安装yarn add vue-page-designer您可以在main.j中快速启动。vue-page-designer实时演示基于Vue的拖放式移动网站构建器。 安装yarn add vue-page-designer...
重复造轮子？优秀而又免费的web前端模板组件库的汇总
Ceruleano的博客
08-25 563
相信多数初学者，甚至是后端开发者 都会有这样的烦恼，“前端不知道怎么做才好看”，“没有设计的脑细胞”，“写个组件好麻烦”等等… 那么，这篇文章旨在解决存以上问题 给大家推荐几款热门而又实用的开源组件库，供大家参考 Web端 AdminLTE AdminLTE 是一个开源的后台控制面板和仪表盘 ，它是基于bootstrap 的轻量级后台模板，它提供了一系列响应迅速、可重用和常用的组件 技术要求：...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本、Markdown，3D组件库】
热门推荐
程序员猫爪
11-29 2万+
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本Markdown，3D组件库】
Vue常用的组件库大全【前端工程师必备】
最新发布
qq_46509116的博客
04-11 264
🔸在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。中文文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation。在线预览：https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting。🔸一套基于 Vue.js 的高质量UI 组件库 https://www.iviewui.com/
Vue前端后台模板
输入技术、输出想法
07-16 6853
1. AdminLTE 前端模板地址 https://github.com/almasaeed2010/AdminLTE 非常流行的基于 Bootstrap 3.x 的免费的后台 UI 框架。 AdminLTE-admin 轻量级权限管理框架 AdminLTE-admin是以SpringMVC+Shiro+Mybatis为核心开发的精简后台基础系统。 包含用户管理,角色管理,部门管理,权限管理,菜单管理,日志管理等常用业务模块。 使用AdminLTE作为前端UI框架。 第三方Mybatis-plus作
基于SpringBoot+Mybatis+vue2前后端分离项目模板实现
qq_39792789的博客
02-27 1216
需求： 无 实现功能： 实现一个前后端分离的项目模板，以供更好的开发项目（主要基于上次搭建的vue项目，实现通过接口访问后台实现查询后台数据库用户信息的简易版Demo） 环境： idea 2021.6 mysql 8.0 vue环境见上节（离线安装模板） 可能相关问题描述： ①项目启动中前后端端口不一致问题的解决方法？ 通过配置访问Vue后端的接口地址实现，在build/...
Vue后台模板：PanjiaChen
weixin_54966486的博客
04-27 2882
一、模板下载 简洁版：https://github.com/PanJiaChen/vue-admin-template 加强版：https://github.com/PanJiaChen/vue-element-admin 二、项目安装依赖（管理员模式下） cnpm install 如果报错 ==> cnpm install --save core-js 关闭 eslint 提示：关闭软件插件 三、文件目录了解 1、public 文件夹 icon 图标，静态页面，pu.
基于vue+SpringBoot前后端分离毕设模板（最全的案例--附源码地址）
lslxgg的博客
02-16 4272
本套实例模板适用于刚刚学习vue和SpringBoot的小白，也适用于大学生做毕业设计，如果你是这方面的小白，请一定不要错过。
10-vue组件通讯.md
03-31
大厂前端面试题目|# 前端基础知识 HTML CSS JS HTTP 等基础知识是前端...- Vue 等框架的基本应用 ## 注意事项 不会从 0 基础讲起，基础不熟悉可以向讲师提问 ## 看几个面试题 列几个代表性的面试题，参考视频。
vp-ui-vue组件库源码
06-08
资源简介：vp-ui-vue组件库源码，即下即用，下载资源后就修改组件库名就可直接发布成属于自己的npm包。 使用目标：①了解组件库编写表现与样式分离；②实操webpack性能优化；③了解package.json打包、发包相关参数...
web前端--vue2技术+涵盖多个知识点+适合刚学习vue的小白使用，促进学习
07-14
2.Vue2的组件化编程 3.使用Vue脚手架 4.vuex 5.路由vue-router 6.vue UI组件库推荐 二.使用人群：适合刚学习vue学习的小白，可以作为一个引领学习的文档，针对vue中常用的知识点进行学习和常用的注意点学习,在学习中...
Vue前端模板框架--vue-admin-template
m0_57037182的博客
11-04 1万+
Vue前端模板框架--vue-admin-template
vue-admin-template后台管理系统模板
少女与飞剑的博客
10-25 4127
vue-admin-template是一个极简的 vue admin 管理后台。它只包含了** Element UI & axios & iconfont & permission control & lint**，这些搭建后台必要的东西。可以在github或者gitee上下载到模板。这里以GitHub为例介绍。下载地址根据下载地址可以下载到最新版本的模板，但是也提供旧版本的下载。在分支中选择tag/3.11.0即可下载旧版本。
【开发模板】Vue和SpringBoot的前后端分离开发模板
Designer 小郑的技术博客
09-02 3386
本文介绍的Vue 和 SpringBoot 的通用管理系统，是一个很好的前后端分离开发模板，可用于开发毕业设计，包含了登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成这九个功能模块，另外还有两张样例数据表和五张样例数据图，是一个很好的前后端分离开发模板，开发者可以在这个模板上进行二次开发，只需要实现需求方的业务逻辑，即可快速成型甲方的业务需求。
若依框架 - 前端后端分离 vue element 组件模板 el-table 表格点击式可编辑表格 - 分页跳转回显（保存上一次的选择）- 按钮式可编辑表格- 弹窗表格 el-table 滚动条设置
Muxiu
04-11 2129
xxx.vue。
Vue组件（详解）
zky__sch的博客
08-15 952
此文章该说的都说了，还补充了一些额外的相关知识；文章通俗易懂，也举了很多的例子，每讲完一个功能就会带上此功能的代码，和代码在浏览器的执行结果，适合初学者；
12 款在手，前端无忧——Vue UI 组件库
rainux
12-20 1418
今日分享下同事推荐的十二款VUE UI组件库，方便前端开发的伙伴们参考。
前端基础学习——Vue组件介绍
weixin_53919192的博客
07-11 687
本文为大家就前端基础学习——Vue组件做了介绍，希望对你有帮助~~
vue 前端项目-登录组件-登录框界面
01-12
Vue 前端项目中的登录组件是一个用于用户登录的界面，其中的登录框是用户输入用户名和密码的地方。 登录框界面通常包括以下几个元素： 1. 用户名输入框：用户可以在这里输入自己的用户名。 2. 密码输入框：用户可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiuyue_77

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值