【vue 入坑指南 一 】vue 基礎語法

1.模板語法

1.1 Mustache語法

{{msg}}		//在html獲取data中msg變數的值

1.2 Html賦值

v-html="" 	//將內容當成html標籤輸出    .html()類似

1.3繫結屬性

v-bind:id="" //新增繫結一個標籤的屬性   .attr()類似

1.4 表示式

{{1?'成功':'失敗'}}		//三目運算表示式

1.5 文字賦值

v-text = ""		// 和 vue的 {{}} 功能類似 做文字展示

1.6 指令

v-if=""		//條件判斷

1.7 過濾器

//字元過濾 數值過濾 欄位值過濾 金額格式化  字母大小寫
{{message | capitalize}}    		//方法一
v-bind:id="rawld | foprmatld" 		//方法二
		
 

2. 常用基礎語法

2.1 判斷class名是否顯示 該class名是否生效

2.1.1 內部是一個物件的語法

//active   是style的class名
//isActive 是data中的變數  isActive為true,顯示class;為false，不顯示class名 

v-bind:class="{active:isActive,'text-danger:hasError'}"  
		

2.1.2 內部是一個數組的語法

//將之前寫在物件中的資料直接寫在data之中 效果相同
<div v-bind:class="[activeClass,errorClass]">
data:{
  activeClass:'active',
  errorClass:'text-danger'
}
 

2.2 寫標籤內嵌的style

//activeColor與fontSize 均為data中的變數名
v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"

2.3條件渲染

 v-if 
 v-else  
 v-else-if
 v-show 
 v-cloak

條件結果為 true

​ v-if v-else v-else-if //渲染對應的Dom節點

​ v-show //渲染對應的Dom節點 並設定css display:block

條件結果為false

​ v-if v-else v-else-if //不渲染對應的Dom節點

​ v-show //渲染對應的Dom節點 並設定css display:none

 v-cloak //實際上不是條件渲染,在網速太慢或請求太快，Dom資源載入緩慢，可以使用 v-cloak隱藏html程式碼

2.4 事件處理器

2.4.1事件繫結

v-on:click="greet" 
@click="greet"		//greet 是methods 的方法名

2.4.2 事件修飾符

v-on:click.stop  	//stop 阻止事件冒泡
v-on:click.prevent	//prevent 阻止按鈕預設事件  submit阻止了就不會重新整理頁面
v-on:click.self 	//self	只給當前的按鈕繫結事件，如果當前按鈕有子元素，單擊子元素不							 觸發事件
v-on:click.once		//once  只能讓該按鈕的事件觸發一次

v-on:keyup.enter	//按 鍵盤 ‘enter’ 觸發
v-on:keyup.tab		//按鍵盤‘tab’
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.space
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right

2.5 vue元件

1.全域性元件和區域性元件 

2.父子元件通訊-資料傳遞
	父元件->子元件  pops 
3.slot 

2.5.2 父子元件通訊-資料傳遞

動態傳值

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Counter v-bind:num="num"></Counter>
  </div>
</template>

<script>
  import Counter from './Counter'
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:100,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    Counter
  },
}
</script>

父子元件同時 更新資料 同時完成事件動作 資料雙向同步 vuex也可以實現

​