當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue2 学习笔记3

發布時間：2025/4/16 vue 75 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue2 学习笔记3 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文中例子代碼請參考github

定義Vue組件

什么是組件：組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調用對應的組件即可；
組件化和模塊化的不同：

模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的職能單一；
組件化：是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用；

全局組件定義的三種方式

使用 Vue.extend 配合 Vue.component 方法：

<body><div id="app"><mycom1></mycom1></div><script>// 1.1 使用 Vue.extend 來創建全局的Vue組件// var com1 = Vue.extend({// template: '<h3>這是使用 Vue.extend 創建的組件</h3>' // 通過 template 屬性，指定了組件要展示的HTML結構// })// 1.2 使用 Vue.component('組件的名稱', 創建出來的組件模板對象)// Vue.component('myCom1', com1)// 如果使用 Vue.component 定義全局組件的時候，組件名稱使用了駝峰命名，則在引用組件的時候，需要把大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈接；// 如果不使用駝峰,則直接拿名稱來使用即可;// Vue.component('mycom1', com1)// Vue.component 第一個參數:組件的名稱,將來在引用組件的時候,就是一個標簽形式來引入它的// 第二個參數: Vue.extend 創建的組件 ,其中 template 就是組件將來要展示的HTML內容Vue.component('mycom1', Vue.extend({template: '<h3>這是使用 Vue.extend 創建的組件</h3>'}))// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body>

直接使用 Vue.component 方法：

<body><div id="app"><mycom2></mycom2></div><script>// 注意:不論是哪種方式創建出來的組件,組件的 template 屬性指向的模板內容,必須有且只能有唯一的一個根元素Vue.component('mycom2', {template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3><span>123</span></div>'})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body>

將模板字符串，定義到標簽中：

<body><div id="app"><mycom3></mycom3></div><template id="tmpl"><div><h1>這是通過 template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1><h4>好用,不錯!</h4></div></template><script>Vue.component('mycom3', {template: '#tmpl'})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body>

注意：組件中的DOM結構，有且只能有唯一的根元素（Root Element）來進行包裹！

定義私有組件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="./lib/vue-2.4.0.js"></script></head><body><div id="app"><mycom3></mycom3></div><div id="app2"><mycom3></mycom3><login></login></div><template id="tmpl"><div><h1>這是通過 template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1><h4>好用,不錯!</h4></div></template><template id="tmpl2"><h1>這是私有的 login 組件</h1></template><script>//全局組件Vue.component('mycom3', {template: '#tmpl'})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});var vm2 = new Vue({el: '#app2',data: {},methods: {},filters: {},directives: {},components: { // 定義實例內部私有組件的login: {//template:'<h1>這是私有的 login 組件</h1>'template: '#tmpl2'}}})</script></body></html>

組件中展示數據和響應事件

在組件中，data需要被定義為一個方法，例如：

<body><div id="app"><mycom1></mycom1></div><script>// 1. 組件可以有自己的 data 數據// 2. 組件的 data 和實例的 data 有點不一樣,實例中的 data 可以為一個對象,但是組件中的 data 必須是一個方法// 3. 組件中的 data 除了必須為一個方法之外,這個方法內部,還必須返回一個對象才行;// 4. 組件中的data 數據,使用方式,和實例中的 data 使用方式完全一樣!!!Vue.component('mycom1', {template: '<h1>這是全局組件 --- {{msg}}</h1>',data: function () {return {msg: '這是組件的中data定義的數據'}}})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body>

在子組件中，如果將模板字符串，定義到了script標簽中，那么，要訪問子組件身上的data屬性中的值，需要使用this來訪問；

【重點】為什么組件中的data屬性必須定義為一個方法并返回一個對象

通過計數器案例演示

<body><div id="app"><counter></counter><hr><counter></counter><hr><counter></counter></div><template id="tmpl"><div><input type="button" value="+1" @click="increment"><h3>{{count}}</h3></div></template><script>var dataObj = { count: 0 }// 這是一個計數器的組件, 身上有個按鈕,每當點擊按鈕,讓 data 中的 count 值 +1Vue.component('counter', {template: '#tmpl',data: function () {// return dataObjreturn { count: 0 }},methods: {increment() {this.count++}}})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {}});</script> </body>

使用components屬性定義局部子組件

組件實例定義方式：

引用組件：

使用flag標識符結合v-if和v-else切換組件

<body><div id="app"><a href="" @click.prevent="flag=true">登錄</a><a href="" @click.prevent="flag=false">注冊</a><login v-if="flag"></login><register v-else="flag"></register></div><script>Vue.component('login', {template: '<h3>登錄組件</h3>'})Vue.component('register', {template: '<h3>注冊組件</h3>'})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false},methods: {}});</script> </body>

使用:is屬性來切換不同的子組件

<body><div id="app"><a href="" @click.prevent="comName='login'">登錄</a><a href="" @click.prevent="comName='register'">注冊</a><component :is="comName"></component></div><script>// 組件名稱是字符串Vue.component('login', {template: '<h3>登錄組件</h3>'})Vue.component('register', {template: '<h3>注冊組件</h3>'})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱},methods: {}});</script> </body>

轉載于:https://www.cnblogs.com/wangkaihua/p/9853275.html

總結

以上是生活随笔為你收集整理的Vue2 学习笔记3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

学习笔记

上一篇： Sitecore® 8.2 Profes
下一篇： Vue(二) 计算属性