解析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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
详解Vue取消eslint语法限制
2018/08/04 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
js实现开关灯效果
2020/03/30 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
js实现缓动动画
2020/11/25 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
python实现简易动态时钟
2018/11/19 Python
Python类装饰器实现方法详解
2018/12/21 Python
如何在python中执行另一个py文件
2020/04/30 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
QA工程师岗位职责
2013/11/20 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
歌舞青春观后感
2015/06/10 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis