vue元件 模板 腳手架
阿新 • • 發佈：2020-11-29
1.元件
特點：一組可複用的vue例項
元件化和模組化的區別？
元件化：元件化是指解耦複雜系統時將多個功能模組拆分、重組的過程，有多種屬性、狀態反映其內部特性
特點：一個具有html+css+js的頁面
模組化：側重的功能的封裝，主要是針對Javascript程式碼，隔離、組織複製的javascript程式碼，將它封裝成一個個具有特定功能的的模組。
2.命名規則
1.不能以標籤起名，包含大寫
2.建議用駝峰起名
3.首字母大寫，後面直接寫名字。如果後面有大寫需要轉換為駝峰
3.template模板
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<v-one></v-one>
<v-two></v-two>
<v-three></v-three>
</div>
</body>
<!-- 開發環境 -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 元件：一組可複用的vue例項
// 用法：全域性定義,區域性定義
// Vue.component('元件名',模板物件)
// components:{元件名:{模板物件}}
//必須要寫在例項物件之前
Vue.component('vOne',{
// template:要往頁面上渲染的模板
template:'<div>我是第一個元件</div>'
})
let vm = new Vue({
el: '#app',
data: {},
methods: {
},
components:{
vTwo:{
template:'<div>我是第二個模板物件<div>abc</div></div>'
},
vThree:{
template:`<div>我是第二個模板物件
<h2>我是標題2</h2>
</div>`
}
}
})
// 特點：template 有且只能有一個根元素 通常是div
</script>
</html>
4.data使用
重點：元件中定義data為函式，原因是：為了共享資料但是又互相不干擾.
<body>
<div id='app'>
<div>{{msg}}</div>
<p>{{msg}}</p>
<button @click = 'change'>點選修改msg</button>
<hr>
<v-one></v-one>
<v-one></v-one>
</div>
<template id="temp1">
<div>
<p>{{content}}</p>
<button @click='changeOne'>修改內容</button>
</div>
</template>
</body>
let vm = new Vue({
el: '#app',
data: {
msg:'abc'
},
methods: {
change(){
this.msg='123'
}
},
components:{
vOne:{
template:'#temp1',
data(){
return {
content:'我要被修改了'
}
},
methods: {
changeOne(){
this.content = '我被修改了'
}
},
}
}
})
// 總結:data定義為函式的原因:由於需要共享資料，但是又要互不干擾,所以定義為函式
5.元件巢狀
注意：子元件只能在父元件中使用 子元件中的資料目前僅能供自己使用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
{{msg}}
<v-one></v-one>
</div>
<template id="temp1">
<div>
<h2>我是模板一</h2>
{{name}}
<!-- {{msg}} -->
<!-- <v-inner></v-inner> -->
</div>
</template>
<template id="temp2">
<div>
<h2>我是模板二</h2>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 元件：一個可複用的vue例項
let vm = new Vue({
el: '#app',
data: {
msg:'hello '
},
methods: {
},
components:{
vOne:{
template:'#temp1',
components:{
vInner:{
template:'<div>我是裡層巢狀的模板<v-three></v-three></div>',
components:{
vThree:{
template:'#temp2'
}
}
},
vOuter:{
}
},
data(){
return {
name:'張三'
}
}
}
}
})
// 總結：元件中關係：只有父子和非父子關係
// 巢狀:子元件只能在父元件中使用
// 元件中的data ：定義為方法，必須有返回值，同時返回值的型別為物件
// data 中的資料只能供自己使用 如果其他元件需要使用需要傳值 比如：data,methods,filter,cmpputed,watch...
</script>
</html>
6.後臺管理頁面實現
注意：1.外層巢狀大盒子（container） 2.劃分佈局 3.書寫元件 4.元件巢狀 5.新增樣式
7.生命週期 --8個鉤子函式 mounted 是最常用的
v-if 會引起生命週期的改變
v-show 不會引起
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<div v-html='msg' v-if='isShow'></div>
<button @click='change'>點選</button>
<hr>
<v-one v-show='isShow'></v-one>
</div>
<template id="temp1">
<div>
<div v-if='show'>{{con}}</div>
<button @click='changeC'>點選切換內容</button>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello world！',
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
}
},
components: {
vOne: {
template: '#temp1',
data() {
return {
con: '我是元件模板',
show: true
}
},
methods: {
changeC() {
this.con = '我被修改了!!!!!!!'
}
},
mounted() {
console.log('元件內容掛載完成')
},
destroyed() {
console.log('銷燬執行了')
},
}
},
mounted() {