正文

vue.js基础学习之组件

胡卓  2022-02-13  403

关键词：

什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

创建全局组件

<div id="seg1">
        <alert></alert>
    </div>
    <div id="seg2">
        <alert></alert>
    </div>

Vue.component(‘alert‘,{
        template : ‘<button @click="on_click">点我</button>‘,
        methods : {
            on_click : function(){
                alert("good");
            }
        },
    });
    new Vue({
        el : ‘#seg1‘,
    });
    new Vue({
        el : ‘#seg2‘,
    })

这个组件的作用是在目标中添加一个Button，当点击这个Button时，alert出一个good。由于是全局组件，所以只要是new Vue出来的都可以使用

也可以将创建与注册分开，

先用Vue.rxtend创建一个组件

var myComponent = Vue.extend({
        template : ‘<button @click="on_click">点我</button>‘,
        methods : {
            on_click : function(){
                alert("good");
            },
        },
    });

然后注册

Vue.component(‘alert‘,myComponent);

分开会让人看起来更清晰

接下来是局部组件的创建

new Vue({
        el : ‘#app‘,
        components :{
            alert :{
                template : ‘<button @click="on_click">点我</button>‘,
                methods : {
                on_click : function(){
                    alert("good");
            },
        },
        },
        } 
    })

这时，这个组件就只能在app中使用了

接下来我们用组件做一个点赞的button，当button点击第一下点赞数就加一，再点击一下，点赞数就减一

new Vue({
         el : ‘#app‘,
         components : {
             like : {
                 template : ‘<button @click="on_click">赞{{like_counts}}</button>‘,
                 data : function(){
                     return {
                         like_counts : 10,
                         liked : false,
                     };
                 },
                 methods : {
                     on_click : function(){
                         if(!this.liked){
                             this.like_counts += 1;
                             this.liked = !this.liked;
                         }
                         else{
                             this.like_counts -= 1;
                             this.liked = !this.liked;
                         }

                     }
                 },

             }
         }
     });

在app中加入一个like标签

<div id="app">
        <like></like>
    </div>

这样，初始点赞数为10，点击一下点赞数为11，再点击一下点赞数又为10，我们还可以为其添加一个样式，在点赞时让button变成pink色

首先给这个button绑定class

template : ‘<button :class="{liked : liked}" @click="on_click">赞{{like_counts}}</button>‘,

这个class中的第一个liked为类名，第二个liked为data中的liked，这里的意思是当第二个liked值为true时，给这个类加上第一个liked类

然后在样式用加入这个类的样式

<style>
        .liked {
            background-color: pink;
        }
    </style>

这样我们的一个点赞按钮就完成了。

这里我有一个困惑，组件之内的data在组件之外是访问不到的，那么如果我想要获得组件里面的某个数据，我应该如何去做？

vue学习之四组件系统(代码片段)

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。一、Vue.js组件系统每一个新技术的诞生，都是为了解决特定的问题... 查看详情

vue.js基础学习之过滤器

过滤器：filter格式化变量的输出内容，只用于一些简单的在制作的最后一步对内容的输出格式做些调整（如日期格式化，字母大小写，数字再计算等等）例如我们需要将最终的结果字符串以大写方式展示出来，还有将小数转化成... 查看详情

vue学习之vuex(代码片段)

单向数据流概念Vuex介绍解决问题多个视图依赖于同一状态（菜单导航）来自不同视图的行为需要变更为同意状态（例如：评论弹幕）Vuex应运而生为vue.js开发的状态管理模式组件状态集中管理组件状态改变遵循统一的规则store.js//... 查看详情

vue学习之vuex的入门

以下文章是我摘录别人的，自己做过记录，并非出自本人之手，感谢作者分享！前言在Vue.js的项目中，如果项目结构简单，父子组件之间的数据传递可以使用props或者$emit等方式但是如果是大型项目，很多时候都需要在子组件之... 查看详情

45.vue学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scripttype="text/javascript"src="../js/vue.js"></script><!--<... 查看详情

vue.js学习之如何在better-scroll加载完成后，自动滚动到最底部

首先我们需要使用scrollTo这个方法：scrollTo(x,y,time,easing)参数：{Number}x横轴坐标（单位px）{Number}y纵轴坐标（单位px）{Number}time滚动动画执行的时长（单位ms）{Object}easing缓动函数，一般不建议修改，如果想修改，参考源码中的e... 查看详情

vue.js学习之——安装

Vue.js的安装方式有三种：1、script引入2、CDN3、NPM前两种不细说，重点讨论第三种——NPM安装Vue.js提供了一个名为Vue-cli的官方命令工具，使用之前先进行如下准备工作：1、安装nvm（NodeVersionManager），简单来说就是一个管理node.js版... 查看详情

vue学习之todolist删除功能(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>vue</title>... 查看详情

vue.js学习之入门实例

之前一直看过vue.js官网api，但是很少实践，这里抽出时间谢了个入门级的demo，记录下一些知识点，防止后续踩坑，牵扯到的的知识点：vue、vue-cli、vue-router、webpack等。首先看下实现的效果：源码下载戳这里：源码1、使用vue-... 查看详情

vue学习之不同组件之间的消息传递(代码片段)

vue.js学习之跨域请求代理与axios传参

vue.js学习之跨域请求代理与axios传参一：跨域请求代理1：打开config/index.jsmodule.exports{dev:{}}在这里面找到proxyTable{}，改为这样：proxyTable:{‘/api‘:{target:‘http://121.41.130.58:9090‘,//设置你调用的接口域名和端口号别忘了加httpchangeOrigi... 查看详情

vue.js源码学习之flag篇(代码片段)

TheProgressiveJavaScriptFramework——vuejs.org起因第一次接触Vue.js是因为要做一个通讯录的外包项目，这个项目要有前台展示和中后台管理，从轮子做起肯定是不明智的选择，所以当时初步定下的是Vue.js+ElementUI的技术栈。项目过程很漫... 查看详情

vue学习之介绍(代码片段)

一.vue概念#1.什么是Vue#Vue.js是一个渐进式JavaScript框架#渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，东可以用vue框架来实现#vue可以干哪些事#将数据渲染到指定区域（数据可以是后台获... 查看详情

django目录

django目录>>>01.Django基础一之web框架的本质02.Django基础二之URL路由系统03.Django基础三之视图函数04.Django基础四之模板系统05.Django基础五之django模型层(一)单表操作06.Django基础五之django模型层(二)多表操作07.Django学习之model进阶... 查看详情

大数据学习之mapreduce基础与yarn集群安装09

1大数据解决的问题？海量数据的存储：hadoop->分布式文件系统HDFS海量数据的计算：hadoop->分布式计算框架MapReduce 2什么是MapReduce? 分布式程序的编程框架，java->sshssm，目的：简化开发！是基于hadoop的数据分析应... 查看详情

vue2.0学习之组件间通信

/*child.vue*/ 子组件 <template> <div> /*必须要用div包裹起来，然后在里面写需要的组件内容，这里面和平常写的html是一样的*/ <div> </template> <script> /*这里面写vue*/ /*引入其他vue组件*/ @importheaderfrom"./heade 查看详情

12.2vue学习之控制行内样式(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>vue</title><linkrel="stylesheet"href=""><scripttype=... 查看详情

机器学习之概率统计基础，机器学习学习笔记----07

机器学习之概率统计基础文章目录机器学习之概率统计基础一、条件概率二、贝叶斯公式三、独立性注：本图片来源于《机器学习中的数学》一书一、条件概率在一个情况发生的情况下，另一个情况的概率二、贝叶斯公... 查看详情