Vue2 學習筆記3
摘要：
文中例子程式碼請參考github
定義Vue元件
什麼是元件： 元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可；
元件化和模組化的不同：
...
ofollow,noindex" target="_blank">文中例子程式碼請參考github
定義Vue元件
什麼是元件： 元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可；
元件化和模組化的不同：
- 模組化： 是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，保證每個功能模組的職能單一；
-
元件化： 是從UI介面的角度進行劃分的；前端的元件化，方便UI元件的重用；
全域性元件定義的三種方式
使用 Vue.extend 配合 Vue.component 方法：
<body> <div id="app"> <!-- 如果要使用元件，直接，把元件的名稱，以 HTML 標籤的形式，引入到頁面中，即可 --> <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 例項，得到 ViewModel var 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 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
將模板字串，定義到標籤中：
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在 被控制的 #app 外面,使用 template 元素,定義元件的HTML模板結構-->
<template id="tmpl">
<div>
<h1>這是通過 template 元素,在外部定義的元件結構,這個方式,有程式碼的只能提示和高亮</h1>
<h4>好用,不錯!</h4>
</div>
</template>
<script>
Vue.component('mycom3', {
template: '#tmpl'
})
// 建立 Vue 例項，得到 ViewModel
var 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>
<!-- <login></login> -->
</div>
<div id="app2">
<mycom3></mycom3>
<login></login>
</div>
<!-- 在 被控制的 #app 外面,使用 template 元素,定義元件的HTML模板結構-->
<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 例項，得到 ViewModel
var 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 例項，得到 ViewModel
var 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 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
// return dataObj
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
})
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
使用components
屬性定義區域性子元件
- 元件例項定義方式：
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: { // 定義子元件
account: { // account 元件
template: '<div><h1>這是Account元件{{name}}</h1><login></login></div>', // 在這裡使用定義的子元件
components: { // 定義子元件的子元件
login: { // login 元件
template: "<h3>這是登入元件</h3>"
}
}
}
}
});
</script>
- 引用元件：
<div id="app"> <account></account> </div>
使用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 例項，得到 ViewModel
var 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>
<!-- Vue提供了 component ,來展示對應名稱的元件 -->
<!-- component 是一個佔位符, :is 屬性,可以用來指定要展示的元件的名稱 -->
<component :is="comName"></component>
</div>
<script>
// 元件名稱是 字串
Vue.component('login', {
template: '<h3>登入元件</h3>'
})
Vue.component('register', {
template: '<h3>註冊元件</h3>'
})
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
comName: 'login' // 當前 component 中的 :is 繫結的元件的名稱
},
methods: {}
});
</script>
</body>