解析Vue.js中的组件
介绍
在使用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中的组件,希望对大家有所帮助