伏龙阁资源网

解析Vue.js中的组件
站长资源 2024/11/28 佚名
2 0

介绍

在使用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="/UploadFiles/2021-04-02/vue">


在上面，你创建了一个简单的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="/UploadFiles/2021-04-02/vue">


它仍然不会工作！


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


组件是使用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="/UploadFiles/2021-04-02/vue">


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


将数据存储在组件中


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


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


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





<!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="/UploadFiles/2021-04-02/vue">


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


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


像这样：





<!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="/UploadFiles/2021-04-02/vue">


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


创建和使用组件


使用到目前为止学到的内容，让我们使用 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中的组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！


                                

                                

                                     

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接