Vue基礎(chǔ)知識
Vue單文件組件：以任意方式組成一個對象缭黔，最后用loader還原成對象
單頁面：是指沒有路由跳轉(zhuǎn)的頁面（這里的路由指的是后端路由）脖律，整個頁面是一個編譯后是一個整體纺涤，包括通過router切換的頁面，router切換說白了就是將要顯示部分顯示蕉毯，其余部分不顯示呆万，類似于a標(biāo)簽點(diǎn)擊顯示某一部分，vue寫的頁面都是單頁面
組件的定義：文件使用其他的.Vue文件磺送，這個.Vue文件就是組件
Vue實例
const vm = new Vue(options)
new Vue會構(gòu)造一個實例驻子，這個Vue實例會根據(jù)options得出一個對象，命名為vm（沿用尤雨溪命名習(xí)慣）估灿。這個vm對象封裝了對視圖的所有操作崇呵，包括數(shù)據(jù)讀寫，事件綁定馅袁，Dom更新域慷。
options是new Vue的參數(shù)，一般稱之為選項或構(gòu)造選項司顿。
options其中五類屬性：數(shù)據(jù)芒粹、DOM、生命周期鉤子大溜、資源化漆、組合
1、方法和函數(shù)的區(qū)別
方法：面向?qū)ο蟮母拍钋辗埽栏接谝粋€對象
obj.sayHi()
函數(shù)：數(shù)學(xué)概念
sayHi()
2座云、data
內(nèi)部屬性，由內(nèi)部傳值
注意：data如果寫在.Vue(組件)文件中付材，data必須使用函數(shù)朦拖，防止兩個組件共用一個data（其中一個data改了另一個也會改變），使用自己的組件（Vue實例）也可寫成對象的形式
data() {return}
data: {}
3厌衔、methods方法璧帝，處理函數(shù)和普通函數(shù)
<div class="red">
{{ n }}
<button @click="add">+1</button> //add方法、@click點(diǎn)擊事件
</div>
<script>
export default {
methods: {
add() { //事件處理函數(shù)
this.n += 1;
},
filter() { //普通函數(shù)
console.log("執(zhí)行了filter");
// return array.filter((item) => item % 2 === 0)
return this.array.filter((item) => item % 2 === 0)
}
}
}
</script>
注意：改變n的值filter也會執(zhí)行富寿，原因：methods每次渲染都會執(zhí)行睬隶，即使只改變其中一個方法，其他方法依然會執(zhí)行
4页徐、定義一個組件
注意：命名規(guī)則苏潜，文件名最好小寫，組件名首字母最好大寫
Vue.component('Demo', { //定義組件变勇，組件名Demo
el: '#app',
template: `
<div>
</div>
`
})
const vm = new Vue({
components: { Demo }, //引用這個組件
template: `
<div>
<Demo :message='b' :fn='add'/> //使用這個組件
//加:號傳變量恤左，不加傳字符串b
</div>
`
}）
5、引用一個組件
import Demo from './demo' //引用
new Vue({
components:{Demo} //{Demo:Demo}組件命名使用
template: `
<div> <Demo/> </div>
`
})
6、生命周期鉤子
生命周期鉤子：生命周期以人的生老病死類比飞袋，鉤子：切入點(diǎn)
created() {
console.log("實例出現(xiàn)在內(nèi)存中");
},
mounted() {
console.log("實例出現(xiàn)在頁面中");
},
updated() {
console.log("實例更新了");
},
destroyed() {
console.log(this.n);
console.log("實例消失（亡）了");
}
destroyed()消亡之后戳气，新創(chuàng)建的是全新的實例
7、props
外部屬性授嘀，由外部傳值物咳。可傳變量蹄皱、方法览闰、常量
Vue.component('Demo', {
el: '#app',
template: `
<div>
{{message}}
<button @click='fn'>click1</button>
</div>
`,
props: ['message', 'fn']
})
const vm = new Vue({
components: { Demo },
data: {
visible: true,
b: 1
},
el: '#app',
template: `
<div>
<Demo :message='b' :fn='add'/> //加:號傳變量，不加傳字符串b
</div>
`
})
