寫在前面：
1.安裝使用參照官方文檔
2.這里只記錄vue重點
筆記開始：
一個vue組件的data必須是一個函數(shù)洲鸠，這樣每個實例維護(hù)的是一份被返回對象的獨立拷貝庐椒，如果沒有這條規(guī)則滨溉，數(shù)據(jù)的修改會影響所有的其他實例放接。
如果模板屬性是變量的話优质，vue 2.0中使用v-bind的方式來綁定變量末患，可以省略v-bind牲证，例如<div :title="title"></div>
列表渲染：比如數(shù)組中直接采用賦值的方式不會造成列表的渲染哮针，this.list[1] = {name:'hello',age:23}，這種寫法不會觸發(fā)重新渲染坦袍，可以使用vue全局的set方法來做十厢，Vue.set(this.list,1,{name:'hello',age:23})
條件渲染：v-if,v-show，v-if表示標(biāo)簽在文檔流中直接被刪除捂齐，v-show表示標(biāo)簽還存在文檔流中蛮放，通過display:none/block來切換。
vue插槽
如果組件內(nèi)容過多奠宜，通過props屬性顯得太過臃腫包颁，可以使用vue插槽slot，將slot元素作為承載分發(fā)內(nèi)容的出口压真，比如很多個dialog娩嚼，各個dialog內(nèi)容不一樣.
vue中觸發(fā)自定義事件是子組件通過this.$emit('事件名','傳遞的參數(shù)')，例如this.$emit('my-event',this.hello)定義事件滴肿，父組件通過@my-event="responseEvent"監(jiān)聽事件岳悟。
//子組件 child
<template>
<button @click="emitMyEvent">click me</button>
</template>
<script>
export default {
data () {
return {
hello:'i am child'
}
},
methods: {
emitMyEvent(){
this.$emit('my-event',this.hello)
}
}
}
</script>
//父組件
<template>
<child @my-event="onChildMyEvent"></child>
</template>
<script>
export default {
data(){
},
methods:{
onChildMyEvent(params){
console.log(params) //i am child
}
}
}
</script>
計算屬性和數(shù)據(jù)監(jiān)聽
computed計算屬性可以根據(jù)其他屬性來動態(tài)的更新計算屬性，也可以使用method方法的方式來直接執(zhí)行函數(shù)嘴高，二者的區(qū)別是：data里面的屬性不更新的時候計算屬性是不會更新的竿音，但是method方法的方式不論data里面的屬性是否更新都會執(zhí)行函數(shù)。
如果計算屬性里面沒有引用data里面的屬性拴驮，那計算屬性從第一次加載完組件之后是永遠(yuǎn)定死的不會變動的春瞬，但method方法的方式每次都會執(zhí)行，比如獲取時間戳new Date()套啤。
屬性監(jiān)聽watch：就是監(jiān)聽vuejs的變量宽气，每當(dāng)這個變量被改動的時候，都去執(zhí)行特定的操作
export default {
watch:{
myVal(newVal,oldVal){
this.getList();
}
},
methods:{
getList(){
}
}
}
父子組件通信
父組件向子組件傳遞消息是通過屬性prop潜沦，子組件向父組件傳遞消息是通過發(fā)布emit事件萄涯。
vue高級功能－過渡/動畫
給需要過渡的元素外層加一個transition標(biāo)簽,這是vue內(nèi)置的一個組件，兩種實現(xiàn)過渡的方式：
css:enter時：v-enter v-enter-active leave時：v-leave v-leave-active
<transition name="fade">
<p v-show="show">show</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active{
transition:all .5s;
}
.fade-enter, .fade-leave{
opacity:0;
}
</style>
js:通過v-bind:is,v-if ,v-else ,v-show來動態(tài)加載組件
vue命令查看
//vue命令列表
E:\workCode\vuedemo3>vue --help
Usage: vue <command> [options]
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
//vue可以使用的模板列表
E:\workCode\vuedemo3>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
vue項目搭建
vue項目初始化通過vue-cli初始化
//安裝vue-cli
npm install vue-cli -g
//初始化項目唆鸡，模板選webpack
vue init webpack my-vue
//安裝項目依賴
npm install
//在localhost啟動測試服務(wù)器
npm run dev
//生成線上目錄（部署）
npm run build
總結(jié)：通過一個輪播小組件來感受一下vue
//app.vue
<template>
<div>
<slides :pictures="pictures" :speed="2000"></slides>
</div>
</template>
<script>
import Slides from 'components/slides';
export default {
components: {
Slides
},
data () {
return {
pictures: [
{
title: '1',
url: 'http://www.baidu.com',
src: require('../assets/slide/pic1.jpg')
},
{
title: '2',
url: 'http://www.jd.com',
src: require('../assets/slide/pic2.jpg')
},
{
title: '3',
url: 'http://www.tmall.com',
src: require('../assets/slide/pic3.jpg')
},
{
title: '4',
url: 'http://www.suning.com',
src: require('../assets/slide/pic4.jpg')
}
]
}
}
}
</script>
// components/slides.vue
<template>
<div class="slides-container" @mouseover="mouseOverPic" @mouseout="mouseOutPic">
<div class="slides-picture">
<a :href="pictures[currentIndex].url">
<img :src="pictures[currentIndex].src"/>
</a>
</div>
<div class="switch-button">
<a href="javascript:;" class="prev" @click="switchPic(prevIndex)">上一頁</a>
<a href="javascript:;" class="next" @click="switchPic(nextIndex)">下一頁</a>
</div>
<div class="slides-icon">
<ul>
<li v-for="(item,index) in pictures" :key="index" class="icon-index" :class="currentIndex === index ? 'active' : ''" @click="switchPic(index)"></li>
</ul>
</div>
</div>
</template>
<script>
export default {
props:{
pictures: {
type: Array,
default: []
},
speed: {
type: Number,
default: 2000
}
},
data() {
return {
currentIndex:0,
timer:null
}
},
mounted() {
//組件加載完成自動播放
this.autoPlay();
},
computed: {
prevIndex() {
if(this.currentIndex === -1){
return this.pictures.length - 1;
}
else{
return this.currentIndex - 1;
}
},
nextIndex() {
if(this.currentIndex === this.pictures.length){
return this.currentIndex = 0;
}
else{
return this.currentIndex + 1;
}
}
},
methods: {
switchPic(index) {
this.currentIndex = index;
},
autoPlay() {
this.timer = setInterval(() => {
this.switchPic(nextIndex);
},this.speed);
},
mouseOverPic() {
clearInterval(this.timer);
},
mouseOutPic() {
this.autoPlay();
}
}
}
</script>
<style scoped>
.slides-container{
width:900px;
height: 510px;
margin: 15px auto;
background:#ccc;
position: relative;
}
.slides-picture a{
float: left;
position: absolute;
top:0;
left:0;
}
.switch-button{
position: absolute;
top: 50%;
color: #fff;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
.switch-button a{
position: relative;
display: inline-block;
padding:5px 10px;
background:green;
}
.prev{
float:left;
}
.next{
float:right;
}
.slides-icon{
position: absolute;
bottom:20px;
left:50%;
}
.icon-index{
background: #000;
width: 25px;
height: 5px;
display: inline-block;
overflow: hidden;
margin-left: 5px;
cursor: pointer;
}
.active{
opacity: .3;
background:#f00;
}
</style>
