编程 Javascript

解析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中的组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

解析Vue.js中的组件

- Author -

justme

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Js动态创建div

Sep 25 Javascript

JS实现QQ图片一闪一闪的效果小例子

Jul 31 Javascript

javascript静态页面传值的三种方法分享

Nov 12 Javascript

本人自用的global.js库源码分享

Feb 28 Javascript

js获取当前日期时间及其它操作汇总

Apr 17 Javascript

javascript实现控制的多级下拉菜单

Jul 05 Javascript

JS中常用的正则表达式

Sep 29 Javascript

Bootstrap简单表单显示学习笔记

Nov 15 Javascript

Vue.js 图标选择组件实践详解

Dec 03 Javascript

说说Vuex的getters属性的具体用法

Apr 15 Javascript

详解JavaScript的内存空间、赋值和深浅拷贝

Apr 17 Javascript

JS跨浏览器解析XML应用过程详解

Oct 16 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