這次帶給大家Vue.js中元件使用詳解,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> <!-- p where Vue instance will be mounted --> <p id="app"></p> <!-- 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 p element new Vue({ el: '#app', data: { domain: 'Tutsplus' }, template: '<p>Welcome to {{ domain }}</p> }); </script> </body> </html>
在上面,你建立了一個簡單的Vue實例,在程式碼中沒有元件因素。 現在,如果 你 希望歡迎訊息出現兩次,那 你 怎麼做?
你的猜測可能是 讓 p 在 Vue實例掛載的地方出現兩次。 這是行不通的。 試著改變它從 id 到 class , 你會得到 :
<!DOCTYPE html> <html> <head> <title>VueJs Components</title> </head> <body> <!-- p where Vue instance will be mounted --> <p class="app"></p> <p class="app"></p> <!-- 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 p 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>
。
要多次輸出模板,可以根據需要多次呼叫元件,如下所示。
VueJs Components <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 p element new Vue({ el: '#app' }); </script>
這樣一來,歡迎消息將顯示四次。
將資料儲存在元件中
上面我提到資料必須是一個函數,它所包含的資訊必須作為一個物件傳回。 為什麼這樣?
當傳回的資料不是物件時,使用該資料的元件共用相同的來源:共用資料。 因此,一個組件的資料變化會影響另一個組件。 當資料作為物件返回時,這是不一樣的。
看看這是如何實際工作是很重要的。 首先,讓我們看看資料作為物件傳回的情況。
<!DOCTYPE html> <html> <head> <title>VueJs Components</title> </head> <body> <!-- p where Vue instance will be mounted --> <p id="app"> <welcome-message></welcome-message> <welcome-message></welcome-message> </p> <!-- 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 p element new Vue({ el: '#app' }); </script> </body> </html>
你能猜到上面發生了什麼事嗎?
有兩個元件,這兩個元件共享相同的資料來源,因為資料不會作為物件傳回。 你怎麼證明我是對的? 當從瀏覽器查看上述頁面時,你將看到一個元件的變更會導致另一個元件的資料變更。那麼它應該是怎麼樣的呢?
像這樣:
<!DOCTYPE html> <html> <head> <title>VueJs Components</title> </head> <body> <!-- p where Vue instance will be mounted --> <p id="app"> <welcome-message></welcome-message> <welcome-message></welcome-message> </p> <!-- 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 p 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> <p class="hello"> <p>Welcome to TutsPlus {{ name }}</p> <hr> <button @click="changeName">Change Display Name</button> </p> </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> <p id= "app" > <display-name/> </p> </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> <p class="hello"> <p>This component is imported locally.</p> </p> </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> <p 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/> </p> </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允许你重用代码,你的页眉,页脚,登录面板和搜索栏可以用作组件。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Vue.js中組件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!