20181125——閱讀其他人的Vue部落格
阿新 • • 發佈：2018-11-26
友情連結
閱讀緒言：相信這篇文章可能會對產生一些幫助和引起思想的碰撞，因為大家的學習歷程是相似的，遇到的困惑也有一定的共通性，如果文章出現謬誤之處，歡迎各位童鞋及時指正。
**Vue.js是什麼** 是一套構建使用者介面的漸進式框架，與其他框架不同的是，Vue只關注檢視層。 Vue.js是一種MVVM框架，html是view層，js是Model層，通過vue.js完成中間的邏輯，實現繫結的效果。 **基本語法** 利用Vue建構函式，構造一個Vue的例項，然後在實現Vue例項的el介面實現和HTML元素的掛載， 建構函式Vue需要傳入一個選項物件，包括，el ，data ，methods，生命週期鉤子函式
computed例項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="xixi">{{getMessage}}</div> <script> var vm =new Vue({ el:"#xixi", data () { return { message: 'xixi' } }, computed:{ getMessage () { return this.message } } }) </script> </body> </html>
條件渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="xixi"> <p v-if='ok'>Hello World!</p> <p v-else>Hello Universal</p> </div> <script> var vm = new Vue({ el:"#xixi", data () { return { ok: true } } }) </script> </body> </html>
子傳父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{total}}</p>
<my-counter @xixi="fatherClick"></my-counter>
</div>
<script>
Vue.component('my-counter', {
template: '<div @click="templateClick">{{count}}</div>',
data () {
return {
count: 0
}
},
methods :{
templateClick () {
this.count+=1;
this.$emit('xixi')
}
}
})
var vm = new Vue({
el:"#app",
data () {
return{
total:3
}
},
methods: {
fatherClick() {
this.total+=1
}
}
})
</script>
</body>
</html>
父元件可以通過監聽子元件的自定義事件，從而改變父元件的資料；
子元件每點選一次，觸發templateClick函式，該函式在執行過程中通過$emit(‘xixi’)發出templateClick事件；
button控制元件同時監聽xixi事件，每次發出該事件就改變父元件的total值；
今天最最最重要的slot用法
slot的詳細講解