vue学习篇-Vue组件

最新推荐文章于 2024-05-15 10:07:30 发布
最新推荐文章于 2024-05-15 10:07:30 发布
阅读量394 收藏 5
点赞数
分类专栏： vue 文章标签： vue学习 vue基础 菜鸟编写
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42426159/article/details/102738923
版权

回顾：

1、ES6–为Vue服务

2、Vue的基础语法 – 渐进式

  • {{插值表达式}}
  • 指令（v-text、v-html、v-on（事件）、v-for、v-if、v-bind、v-show）
  • 生命周期钩子函数
  • 计算属性：本质是方法，但是可以像属性一样使用

3、综合练习-sms系统 ------- 像jQuery一样使用Vue

4、使用axios，发送请求访问后台

自己写的案例代码，学习文档及笔记：https://github.com/kedaya-github/vue_test02

https://github.com/kedaya-github/vue_test03

我自己使用的是 idea 编写代码，下载后的项目加载到idea中，配置maven仓库，就可以运行了

1.组件化

组件：意思？

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航、尾部信息模块。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

1.1.定义全局组件

我们可以使用 Vue.component 来定义一个组件：

Vue.component(组件名称, Vue对象)

在 Vue 对象中我们需要使用 template 来定义组件的 HTML 部分。

（提示：在 ES6 中我们可以使用 模板字符串` 符号来定义多行字符串）

示例：

Vue.component('hello', {
    template: `<p>Hello World !</p>`
})

注意：template 中的 HTML 代码必须要写在一个根元素中。

什么是根元素呢？看下图：

根元素：最外层要有一个标签。

在这里插入图片描述

  • 案例：

在这里插入图片描述

  • 案例实现-最简单的实现

    <div id="app">

    <!-- 使用模板 -->
    <counter></counter>
</div>
<script>
// 在此处定义全局组件--自定义组件
// 两个参数：
// 第一个参数：组件名
// 第二个参数：组件内容
Vue.component("counter",{
    // 将HTML代码写在这里
    // 这个里面的HTML代码必须只能有一个根元素
    template:`<button>加</button>`// 使用模板字符串 定义

})

  • 进阶一：可以相加

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.6.10.js"></script>
</head>
<body>

<div id="app">

    <!-- 使用模板 -->
    <counter></counter>
</div>
<script>
// 在此处定义全局组件--自定义组件
// 两个参数：
// 第一个参数：组件名
// 第二个参数：组件内容
Vue.component("counter",{
    // 将HTML代码写在这里
    // 这个里面的HTML代码必须只能有一个根元素
    template:`<button @click="num++">加{{num}}</button>`,// 使用模板字符串 定义
    // data:{
    //     num:0
    // }
    //1 此处是有data，但是data必须定义为方法
    //2 方法必须要有返回值
    data(){
        return {
            num:0
        }
    }


})




var vm = new Vue({
   el:"#app"


});

</script>
</body>
</html>

  • 进阶二：组件中调用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <!-- 使用模板 -->
    <counter></counter>
</div>
<script>
// 在此处定义全局组件--自定义组件
// 两个参数：
// 第一个参数：组件名
// 第二个参数：组件内容
Vue.component("counter",{
    // 将HTML代码写在这里
    // 这个里面的HTML代码必须只能有一个根元素
    template:`<button @click="add()">加{{num}}</button>`,// 使用模板字符串 定义
    // data:{
    //     num:0
    // }
    //1 此处是有data，但是data必须定义为方法
    //2 方法必须要有返回值
    data(){
        return {
            num:0
        }
    },
    methods:{
        add(){
            this.num++
        }
    }
})
var vm = new Vue({
   el:"#app"
});
</script>
</body>
</html>

<script src="../vue-2.6.10.js"></script>
<div id="app">
    <counter></counter>
</div>
<script>
// 定义全局组件，两个参数，组件名称和组件参数
Vue.component("counter",{
    template:`<button v-on:click="count++" >{{count}}</button>`,
    data(){
        return {
            count:0
        }
    }

})

var vm = new Vue({
   el:"#app",
});
</script>

结论：

  • 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数、计算属性等
  • 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
  • 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
  • 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
  • data的定义方式比较特殊，必须是一个函数，且必须有返回值
  • 全局组件必须有一个根元素

1.2.组件的复用

定义好的组件，可以任意复用多次：

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

效果：

在这里插入图片描述

你会发现每个组件互不干扰，都有自己的count值。怎么实现的？

组件的data属性必须是函数！

当我们定义这个 <counter> 组件时，它的data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

课堂代码：

<script src="../vue-2.6.10.js"></script>
<div id="app">
    <!-- 组件肯定使用在页面中
         组件的使用方式:以组件名为标签访问
     -->
    <counter></counter><br>
    <counter></counter><br>
    <list></list><br>
    <list></list><br>
</div>
<script>
// 全局组件挂载到Vue对象中
// 第一个参数：组件名字
// 第二个参数：组件内容，需要是一个对象
Vue.component("counter",{
    // 在组件中也必须要有模板，模板要写在一个根元素中，在vue中，只能有一个最大的父元素绑定el
    // 模板内容需要使用 模板字符串
    template:`<button @click="num++">加{{num}}</button>`,
    // 模板中，data只能定义成方法格式，不能定义属性
    // data方法必须要有返回值
    data(){
        return {
            num:0
        }
    },
    methods:{

    }
});

// 继续写
Vue.component("list",{
    template:`<ul>
                <li v-for="user in users">{{user.name}} - {{user.age}}</li>
            </ul>`,
    data(){
        return {
            users:[{name:"lucy",age:12},
                {name:"tom",age:12},
                {name:"lily",age:12}
            ]
        }
    }
})



var vm = new Vue({
  el:"#app"
})
</script>

1.2.局部组件-注册

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = {
    template:'<button v-on:click="count++">点击 {{ count }} </button>',
    data(){
        return {
            count:0
        }
    }
};

然后在Vue中使用它–注册局部组件：

var app = new Vue({
    el:"#app",
    components:{
        // counter:counter // 将定义的对象注册为组件
    	counter
    }
})
  • components就是当前vue对象子组件集合。
    • 其key就是子组件名称
    • 其值就是组件对象的属性
  • 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

1.3.组件通信

通常一个页面会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述

  • 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
  • 左侧内容区又分为上下两个组件
  • 右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

1.3.1.父向子传递props

比如我们有一个子组件：

Vue.component("introduce",{
    // 直接使用props接收到的属性来渲染页面
    template:'<h3>{{title}}</h3>',
    props:['title'] // 通过props来接收一个父组件传递的属性
})
  • 这个子组件中要使用title属性渲染页面，但是自己并没有title属性
  • 通过props来接收父组件属性，名为title

父组件使用子组件，同时传递title属性：

<script src="../vue-2.6.10.js"></script>
<div id="app">
    <h1>打个招呼：</h1>
    <!--使用子组件，同时传递title属性-->
    <introduce title="大家好，我是奇哥"/>
</div>

<script type="text/javascript">
    Vue.component("introduce",{
        // 直接使用props接收到的属性来渲染页面
        template:'<h1>{{title}}</h1>',
        props:['title'] // 通过props来接收一个父组件传递的属性
    })
    var app = new Vue({
        el:"#app"
    })
</script>

效果：

在这里插入图片描述

课堂代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父向子传值</title>
    <script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="myname"><br>
<introduce :name="myname"></introduce>

</div>

<script>
Vue.component("introduce",{
    template:`<h2>大家好，我来自传智大学,我的名字叫{{name}}</h2>`,
    props:['name']//引号中名字就是变量，这种定义，就表示从父组件获取值，调用组件的时候，以属性的方式将值传递进来
});


var vm = new Vue({
    el:"#app",
    data:{
        myname:""
    }
});

</script>


</body>
</html>

1.3.2.父向子-传递复杂数据

我们定义一个子组件：

const myList = {
    template:`
        <ul>
        	<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>
        </ul>
        `,
    props:['items']
}

案例：

<script src="../vue-2.6.10.js"></script>
<div id="app">
<list :items="items"></list>

</div>
<script>
Vue.component("list",{
    template:`<ul>
                <li v-for="item in items">{{item.username}} - {{item.age}}</li>
            </ul>`,
    props:['items']
})
var vm = new Vue({
    el:"#app",
    data:{
        items:[{"username":"lucy",age:18},
            {"username":"tom",age:20},
            {"username":"jack",age:18},
            {"username":"lily",age:21}
        ]
    }
})

</script>

效果：

在这里插入图片描述

课堂代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父向子传值</title>
    <script src="../vue-2.6.10.js"></script>
</head>
<body>

<div id="app">

    <mylist :lessions="lessions"></mylist>
</div>
<script>

Vue.component("mylist",{
    template:`<ul>
                <li v-for="lession in lessions">{{lession.id}} - {{lession.name}}</li>
            </ul>`,
    props:['lessions']

})


var vm = new Vue({
   el:"#app",
    data:{
       lessions:[{id:1,name:"java"},
           {id:2,name:"mysql"},
           {id:3,name:"servlet"},
           {id:4,name:"mybatis"}
       ]
    }

});

</script>


</body>
</html>

1.3.3 父向子传值流程解析

在这里插入图片描述

在这里插入图片描述

1.3.4 父向子传多值

<div id="app">

    <mylist :lessions="lessionsData" :title="myname"></mylist>
</div>
<script>

Vue.component("mylist",{
    template:`
            <div>
                <ul>
                    <li v-for="lession in lessions">{{lession.id}} - {{lession.name}}</li>
                </ul>
                大家好，我来自中国，我叫{{title}}
            </div>`,
    props:['lessions','title']

})


var vm = new Vue({
   el:"#app",
    data:{
       lessionsData:[{id:1,name:"java"},
           {id:2,name:"mysql"},
           {id:3,name:"servlet"},
           {id:4,name:"mybatis"}
       ],
       myname:"tom"
    }

});

</script>

1.3.5.子向父的通信–调用父的无参方法

  • 结论：子组件是无法直接改变父组件的数据的，只能通过父组件改变他自己的数据
  • 在子组件中调用父组件的方法，去改变父组件的值

来看这样的一个案例：

<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子组件的时候，传递num到子组件中-->
    <counter :num="num"></counter>
</div>
<script src="../vue-2.6.10.js"></script>
<script type="text/javascript">
    Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
        template:`
            <div>
                <button @click="num++">加</button>  
                <button @click="num--">减</button>  
            </div>`,
        props:['num']// count是从父组件获取的。
    })
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        }
    })
</script>
  • 子组件接收父组件的num属性
  • 子组件定义点击按钮，点击后对num进行加或减操作

我们尝试运行：

在这里插入图片描述

好像没问题，点击按钮试试：

在这里插入图片描述

在这里插入图片描述

子组件接收到父组件属性后，默认是不允许修改的。怎么办？

既然只有父组件能修改，那么加和减的操作一定是放在父组件：

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{ // 父组件中定义操作num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？

我们可以通过v-on指令将父组件的函数绑定到子组件上：

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

然后，当子组件中按钮被点击时，调用绑定的函数：

Vue.component("counter", {
    template:`
<div>
<button @click="plus">加</button>
<button @click="reduce">减</button>  
</div>`,
    props:['count'],
    methods:{
        plus(){
            this.$emit("inc");
        },
        reduce(){
            this.$emit("dec");
        }
    }
})
  • vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数

效果：子组件抛的下述错误忽略

在这里插入图片描述

  • 流程分析

在这里插入图片描述

1.3.6 子向父通信-调用父的有参方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    outNum:{{outNum}}<br>

    <counter @outshow="mainshow"></counter>
</div>
<script>
Vue.component("counter",{
    template:`<button @click="show(10)">show</button>`,
    methods:{
        show(num){
            this.$emit("outshow",num)
        }
    }
})


var vm = new Vue({
    el:"#app",
    data:{
        outNum:''
    },
    methods:{
        mainshow(myoutnum){
            this.outNum = myoutnum
        }
    }

});
</script>

</body>
</html>

[外链图片转存中…(img-l0ChtrXJ-1571972237207)]

1.3.6 子向父通信-调用父的有参方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    outNum:{{outNum}}<br>

    <counter @outshow="mainshow"></counter>
</div>
<script>
Vue.component("counter",{
    template:`<button @click="show(10)">show</button>`,
    methods:{
        show(num){
            this.$emit("outshow",num)
        }
    }
})


var vm = new Vue({
    el:"#app",
    data:{
        outNum:''
    },
    methods:{
        mainshow(myoutnum){
            this.outNum = myoutnum
        }
    }

});
</script>

</body>
</html>
一名努力的小码农
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue框架基础
JohnMin的博客
02-25 1018
JavaScript框架 简化Dom操作 响应式数据驱动（数据改变，页面同步更新） 官方文档：https://cn.vuejs.org Vue实例的作用范围是什么呢？ Vue会管理el选项命中的元素及其内部的后代元素 是否可以使用其他选择器？ 可以使用其他选择器，但是建议使用ID选择器 是否可以设置其他的dom元素呢？ 可以使用其他的双标签，不能使用HTML和BODY 1.创建Vue实例 el：挂载点 data：数据 methods：方法 方法中通过this，关键字获取data中的数据 v-text.
vue中const的使用
热门推荐
xiaoxiao1777的博客
05-09 4万+
const的作用就是将变量声明为一个常量，不能被修改，不可以再次赋值，它的指向是不可以改变的，只能指向某处固定区域，不能再指向其它地方 在ES6开发中，优先使用const，只有需要修改某个标识符值的时候采用let 1.声明后必须初始化赋值，如：const name='aaa'，不可以 const name; 2.常量的含义是指向的对象不能修改，但是可以修改对象中的属性 如： const obj = {name:'aaa',age:18} obj.name='bbb' ...
Vue的学习 —— ＜vue组件＞
最新发布
2301_78038072的博客
05-15 1156
props: {自定义属性A: 类型,自定义属性B: 类型,……
Vue初学编写Counter
鸟人的博客
07-19 172
用Vue编写一个计数器。
vue-计算总和
qq_41346335的博客
02-18 1万+
前言 今天来做一个小练习。使用vue实现一个动态加载的计算总和。 效果图如下： 当点击前两个 数字的时候，两个数会加一，并把值赋给第三个值。 主要代码 首先定义一个全局组件count。 Vue.component("count",{ template:"<div @click='handClick'>{{number}}</div>", ...
【Vue组件详解（一）】
小田是个程序员的博客欢迎你的到来呀~
04-07 1万+
卷起来兄弟们！本篇文章主要介绍了Vue中组件的详细知识，以图形和实例相结合的方式带你一步一步入手Vue组件！！！
vue 翻页组件vue-flip-page效果
10-15
Vue Flip Page是一个用于创建翻页效果的组件，适用于Vue.js框架。这个组件允许开发者实现类似纸质书籍的翻页效果，为...希望这篇文章能帮助你更好地理解和使用Vue Flip Page，让你的项目增添更多互动性和视觉吸引力。
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
vue脚手架 本框架已开发了所属相关组件，如有 定制组件 需求可联系
vue-search-panel-用于搜索建议的Vue组件-Vue.js开发
05-27
简体中文vue-search-panel是一个具有建议功能的搜索组件。目录功能示例安装用法API参考功能vue-search-panel英文|英文 简体中文vue-search-panel是一个带有建议的搜索组件内容功能示例安装用法API参考功能根据输入...
vue-country-flag-国家标记图标的Vue组件-Vue.js开发
05-27
vue-country-flag国家标志作为Vue组件如何安装从NPM获取软件包：npm install vue-country-flag如何使用Register CountryFla vue-country-flag国家标志作为Vue组件如何安装NPM：npm install vue-country-flag如何在...
vue-doc-preview:Vue文档预览组件
05-06
vue-doc-preview vue文档预览组件，此组件将在页面上显示文档的内容。 英文自述文件|用进口首先，从yarn或npm添加此程序包。 yarn add vue-doc-... / script> 您也可以打开demo.vue（在src中）来学习如何使用
Vue -组件
张锦的博客
04-12 4229
1、组件的作用： 组件（Component）是Vue.js最强大的功能之一。. 组件可以扩展HTML元素，封装可以重复使用的代码。. 在较高层次上，组件就是自定义元素，Vue.js的编辑器为它添加特殊功能。 2、组件的分类： 在vue中组件可以分为全局组件和局部组件。 全局组件：所谓的全局组件就是不仅仅可以在一个vue实例中使用，在其他vue实例中也可以使用 的组件。 局部组件：所谓的局部组件就是只能在某个vue实例中使用的组件，在其他的vue实例中不能使 ...
详解vue组件三大核心概念
weixin_34183910的博客
05-30 3608
前言 本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。 本文的代码请猛戳github博客，纸上得来终觉浅，大家动手多敲敲代码！ 一、属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最...
vue基础学习-组件
weixin_40017062的博客
06-05 1216
vue基础学习-组件
Vue3实现Hello和Counter
q709971076的博客
08-14 209
小编之前的文章都是js和ts基础，基础完事之后，是时候向前端的主流框架发起挑战了，接下来小编主要针对现在比较流行的Vue3结合实例，和大家一起探讨一下Vue的基本语法和Vue3中提供的一些新特性，希望小编可以和大家一起成长，一起在前端的路上，越走越远。 我们常见的html模板，基本都是这样的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ht
VUE-组件（component）
damadashen的博客
05-20 8605
VUE组件介绍
前后端分手大师——MVVM 模式
weixin_34130389的博客
11-15 533
阅读目录简而言之组成部分没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，通过这两年对 Vue 框架的深入学习和项目实践，终于可以装B了有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Pet...
java-Vue
qq_40301475的博客
03-15 2777
标题
vue 组件
酷爱前端的小陈博客
04-22 1408
1. 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的UI 结构封装为组件，从而方便项目的开发和维护。 2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的JavaScrip.
如何学习vue-element-admin
03-26
1. 先学习Vue.js Vue-element-admin是基于Vue.js的开源后台管理系统框架，因此学习Vue.js是非常重要的。可以先学习Vue.js官方文档，掌握Vue.js的基本概念和语法。 2. 掌握Element UI组件库 Vue-element-admin使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值