《Vue 高級框架開發》——Vue基礎語法（1）

特點:組件化開發，快速開發

1.生命週期

vue生命週期：
beforeCreate 組件剛剛被創建
create 組件創建完成
beforeMount 掛載之前
mounted 掛載之後
beforeDestory 組件銷燬前調用
destoryed 組件銷燬後調用

   ajax請求和dom在mounted裏面進行

2.選項數據

2.1 data

（本來是一個函數，全局變量的定義）

2.2computed

（一個對象包含了各種函數）

2.3 methods

一個對象包含了各種函數，一般用於定義事件方法

2.4 filters 過濾器

過濾器函數可以使用在兩個地方:

1.雙大括號表達式  {{  文本字符串 |  過濾函數  }}

2.v-bind:str= "文本字符串 | 過濾函數"

<script>
export default {
    data(){
        return{
            msg:"hello";
        }
    },
    computed:{
    	aDouble(){
	    	return this.num*2;
	    }
    },
    methods:{
      	say(h){
	    	alert(h);
	    }
    },
    filters:{
        capitalize(){
            return '123';
        }
    }
}
</script>

3.模板語法

3.1 data 模板中直接嵌入js代碼 指令 v-html v-on v-bind 計算屬性 過濾器

模板語法：
data 模板中直接嵌入js代碼 指令 v-html v-on v-bind 計算屬性 過濾器

1.v-html嵌入標籤
rawHtml:'<span>123</span>'
<div v-html="rawHtml"></div>
2.v-bind 動態化屬性
<div v-bind:class="red"></div>
3.v-on 綁定事件
<div v-on:click="say('hi')">點擊我</div>
 <!--簡寫方式-->
<div @click="change">修改顏色</div>

<div> {{ message | capitalize }} </div>

<script>
export default {
    data(){
        return{
           message:'message'
        }
    },
    computed:{

    },
    methods:{

    },
    filters:{
        capitalize(){
            return '123';
        }
    }
}
</script>

4.計算屬性 computed:

<template>
		<div>{{reversedMessage}}</div>
</template>

<script>
	export default {
		data(){
			return {
				msg : 'helloworld'
			}
		},
		computed:{
			reversedMessage(){
				return this.msg.split('').reverse().join('')
			}
		}
	}
</script>

5.元素屬性class和style綁定

5.1 v-bind

5.2 class綁定

<template>
	<div>		
		<!-- 第一種綁定方式（以對象的形式） -->
		<div v-bind:class="{'active' : isActive,'text-danger': hasError}">
			class1
		</div>
		
		<!-- 第二種綁定方式 -->
		<div :class="classObject">class2</div>
		
		<!-- 第三種綁定方式（以數組的形式） -->
		<div :class="[activeClass, errorClass]">class3</div>
	
	</div>
</template>


<script>
	export default{
		data(){
			return{
				isActive: false,
				hasError: true,
				classObject: {
                                'active': true,
                                'text-danger': true
				},
				activeClass: 'active',
				errorClass: 'text-danger',
			}
		}

	}
</script>

 

5.3 style綁定

 

<template>
	<div>
		<div style="color: red; fontSize: 36px">123</div>

		<div v-bind:style="{'color': activeColor, 'fontSize': fontSize + 'px' }">style1</div>

		<div v-bind:style="styleObject">style2</div>

		<div v-bind:style="[baseStyles, overridingStyles]">style3</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				activeColor: 'black',
				fontSize: 30,
				styleObject:{
					'color': 'red',
					'fontSize': '43px'
				},
				baseStyles:{
					color: 'red'
				},
				overridingStyles:{
					fontSize: '53px'
				}
			}
		}

	}
</script>

6.條件渲染

6.1 v-if v-show

v-if 與 v-show 

v-if 是動態添加，當值爲 false 時，是完全移除該元素，即 dom 樹中不存在該元素。

v-show 僅是隱藏 / 顯示，值爲 false 時，該元素依舊存在於 dom 樹中。若其原有樣式設置了 display: none 則會導致其無法正常顯示。

<template>
	<div>	
		<div v-if="type === 'A'">
		    A
		</div>
		<div v-else-if="type === 'B'">
		    B
		</div>
		<div v-else-if="type === 'C'">
		    C
		</div>
		<div v-else>
		    Not A/B/C
		</div>

		<div v-show="isShow">123</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				type: 'D',
				isShow: true
			}
		}
	}
</script>

7.列表渲染

v-for指令

v-for指令
用法1： v-for="item in items" 數組
用法2： v-for="(item,index) in items" 數組
用法3： v-for="(value,key) in object" 對象

<li v-for="item in items" :key='item'>
    {{ item.message }}
</li>
<script>
export default {
  data() {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ],
    }
  }
}
</script>

8.事件處理器

8.1 v-on指令 縮寫@

事件處理器：
v-on:click 。縮寫： @click。

阻止事件冒泡
<div @click.stop="green">green</div>