解析Vue.js中的组件


Posted in Javascript onFebruary 02, 2018

介绍

在使用Vue.js时,Vue.js组件非常重要。在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序。让我们开始吧。 

什么是组件?

组件使我们能够将 复杂的 应用程序分解成小块。例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分。

Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件。这些组件可以扩展,然后附加到 你 正在处理的应用程序。 使用 组件是 在 整个应用程序 编写 中重用代码的好方法。

假设 你 有一个博客应用程序,并且 你 想要显示 一列 博客 帖子 。使用Vue组件,你可以做:

<blog-post></blog-post>

Vue处理剩下的事情。

创建一个将Vue实例挂载到DOM元素的简单HTML页面。 你 将使用它来了解组件。以下是HTML页面 样例 :

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- Div where Vue instance will be mounted -->
 <div id="app"></div>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your div element
  new Vue({
   el: '#app',
   data: {
   domain: 'Tutsplus'
   },
   template: '<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

在上面,你创建了一个简单的Vue实例,在代码中没有组件因素。 现在,如果 你 希望欢迎消息出现两次,那么 你 怎么做?

你的猜测可能是 让 div   在 Vue实例挂载的地方出现两次。 这是行不通的。 尝试改变它从 id 到 class , 你会得到 :

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- Div where Vue instance will be mounted -->
 <div class="app"></div>
 <div class="app"></div>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your div element
  new Vue({
   el: '.app',
   data: {
   domain: 'Tutsplus'
   },
   template: '<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

它仍然不会工作!

解决这个问题的唯一方法是创建一个组件。 你如何创建一个组件?

组件是使用Vue.component()构造函数创建的。 这个构造函数有两个参数:你的组件的名字(也可以叫做标签名)和一个包含组件选项(options)的对象。

让我们使用上面的内容创建一个组件。

Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '<p>Welcome to {{ domain }}</p>'
 })

在上面,组件名称被称为welcome-message。 你的组件可以有你选择的任何名称。 然而重要的是,这个名字不会影响任何HTML标签,因为你不想重写它。

传递给构造函数的options对象包含数据和模板。 在创建组件时,你的数据应该是一个函数,如上所见。 被保存的数据应该作为一个对象返回。

在没有数据可以传递的情况下,传递如下的模板:

Vue.component('welcome-message', {
  template: '<p>Welcome to Tutsplus</p>'
 })

完成之后,可以通过使用传递给构造函数的名称将其当作常规HTML元素来在应用程序中使用组件。 它被这样调用:<welcome-message> </ welcome-message>

要多次输出模板,可以根据需要多次调用组件,如下所示。

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- Div where Vue instance will be mounted -->
 <div id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </div>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '<p>Welcome to {{ domain }}</p>'
 })
 
 // A new Vue instance is created and mounted to your div element
 new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

这样一来,欢迎消息将显示四次。

将数据存储在组件中

上面我提到数据必须是一个函数,它所包含的信息必须作为一个对象返回。 为什么这样?

当返回的数据不是对象时,使用该数据的组件共享相同的源:共享数据。 因此,一个组件的数据变化会影响另一个组件。 当数据作为对象返回时,这是不一样的。

看看这是如何实际工作是很重要的。 首先,让我们看看数据作为对象返回的情况。

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- Div where Vue instance will be mounted -->
 <div id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </div>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 var data = { name: 'Henry' }
 
 Vue.component('welcome-message', {
  data: function() {
  return data
  },
  template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
  methods :{
   changeName: function() {
   this.name = 'Mark'
   }
  }
 })
 
 // A new Vue instance is created and mounted to your div element
 new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

你能猜到上面发生了什么吗?

有两个组件,并且这两个组件共享相同的数据源,因为数据不作为对象返回。 你怎么证明我是对的? 当从浏览器查看上述页面时,你将看到一个组件的更改会导致另一个组件的数据发生更改。那么它应该是怎样的呢?

像这样:

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- Div where Vue instance will be mounted -->
 <div id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </div>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 
 Vue.component('welcome-message', {
  data: function() {
  return {
   name: 'Henry'
  }
  },
  template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
  methods :{
   changeName: function() {
   this.name = 'Mark'
   }
  }
 })
 
 // A new Vue instance is created and mounted to your div element
 new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

这里的数据是作为一个对象返回的,一个组件的改变不会影响另一个组件。 该功能是针对单个组件执行的。 在构建应用程序时,不要忘记这一点,这很重要。

创建和使用组件

使用到目前为止学到的内容,让我们使用 vue -cli 从头开始一个新的Vue.js项目来实现它。 如果你的机器上没有安装 vue -cli ,你可以通过运行:

npm install -g vue-cli

开始你的新的Vue.js项目:

vue init webpack vue-component-app

导航到你的应用程序,安装依赖关系,并使用下面的命令运行你的开发服务器。

cd vue-component-app
npm install
npm run dev

首先,你将重命名HelloWorld组件,这个组件是你将应用程序初始化为Hello.vue时创建的组件。然后你将注册这个组件作为一个全局组件在你的应用程序中使用。

所以你的Hello组件应该看起来像这样。

#src/components/Hello.vue
<template>
 <div class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 </div>
</template>
<script>
export default {
 name: 'Hello',
 data () {
 return {
  name: 'Henry'
 }
 },
 methods: {
 changeName () {
  this.name = 'Mark'
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

你有欢迎文本显示欢迎消息和作为数据传递的名称。 当点击欢迎消息下方的按钮时,将调用changeName方法。 名字将从亨利改为马克。

要全局使用此组件,必须被注册。你能猜到应该在哪里完成这个操作吗?如果你说main.js,恭喜你,答对了!

要注册一个组件,可以导入它,然后使用Vue.component()构造函数进行设置。自己动手试试。

我敢打赌,这个对你来说小菜一碟。以下是main.js文件中的内容。

#src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Home from './components/Hello'
Vue.config.productionTip = false
Vue.component('display-name', Home)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

这里除了导入你的Hello组件的那一行之外,没有什么新东西。然后使用构造函数注册该组件。最后,对于这部分,组件需要使用你输入的组件名称来显示。在这种情况下,组件是显示名称。这将在你的App.vue文件中完成。

打开src / App.vue并使其看起来像这样。

#src/App.vue
<template>
<div id= "app" >
<display-name/>
</div>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: 'Avenir' , Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

打开服务器,打开http:// localhost:8080。 点击按钮,名称应该改变。

我们来看看如何在本地使用一个组件。

在组件目录中创建一个名为Detail.vue的文件。 这个组件不会做任何特殊的事情 - 它将被用在Hello组件中。

使你的Detail.vue文件就像这样。

#src/components/Detail.vue
<template>
 <div class="hello">
 <p>This component is imported locally.</p>
 </div>
</template>
<script>
export default {
 name: 'Detail'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

要在Hello组件中使用它,可以像导入Hello组件一样将其导入。 接下来,把它注册,但这次你不需要使用Vue.component()构造函数。

你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。 完成后,你现在可以使用元素标记来输出组件。

为了理解这一点,Hello组件应该长这样:

#src/components/Hello.vue
<template>
 <div class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 <!-- Detail component is outputted using the name it was registered with -->
 <Detail/>
 </div>
</template>
<script>
// Importation of Detail component is done
import Detail from './Detail'
export default {
 name: 'HelloWorld',
 data () {
 return {
  name: 'Henry'
 }
 },
 methods: {
 changeName () {
  this.name = 'Mark'
 }
 },
 /**
 * Detail component gets registered locally.
 * This component can only be used inside the Hello component
 * The value passed is the name of the component
 */
 components: {
 Detail
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

刷新页面以查看新页面。

范围组件样式

Vue.js允许你为组件提供全局和本地样式。是什么意思呢?在某些情况下,你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。

一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的; 这怎么可能? 打开你的App.vue,风格部分看起来像这样。

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

这与Detail.vue不同,看起来像这样。

<style scoped>
h1, h2 {
 font-weight: normal;
}
 
ul {
 list-style-type: none;
 padding: 0;
}
 
li {
 display: inline-block;
 margin: 0 10px;
}
 
a {
 color: #42b983;
}
</style>

将   scoped 添加到样式标签是造成这个差别的原因。 尝试通过删除   scoped 来编辑一种组件样式,你会看到这是如何运作的。

结论

虽然这个文章有点长,但是我相信你会喜欢它。

现在你知道如何有效地使用组件,并且了解如何在现有应用程序中构建组件。在使用vue-cli时,你还可以在本地和全局范围内创建和使用组件。当你想为一个组件使用特定的风格时,你已经看到了如何使用scoped来做到这一点。

你现在可以继续构建使用组件的复杂Vue.js应用程序。了解Vue.js允许你重用代码,你的页眉,页脚,登录面板和搜索栏可以用作组件。

总结

以上所述是小编给大家介绍的Vue.js中的组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Angular2自定义分页组件
Apr 19 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
解决LayUI表单获取不到data的问题
Aug 20 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
js实现筛选功能
Nov 24 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 #Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 #Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 #Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 #Javascript
JS 实现百度搜索功能
Feb 01 #Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 #Javascript
微信小程序日期时间选择器使用方法
Feb 01 #Javascript
You might like
php获取当月最后一天函数分享
2015/02/02 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python列表切片操作实例总结
2019/02/19 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python增加图像对比度的方法
2019/07/12 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python系列 文件操作的代码
2019/10/06 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
python自动化发送邮件实例讲解
2021/01/04 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
为什么要用EJB
2014/04/17 面试题
医学专业毕业生个人求职信
2013/12/25 职场文书
保护环境倡议书范文
2014/05/13 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python