2. Vue基礎語法

 

模板語法：

• Mustache語法： {{}}
• Html賦值： v-html=""
• 綁定屬性： v-bind:id=""
• 使用表達式： {{ok?'Yes':'No'}}
• 文本賦值： v-text=""
• 指令： v-if=""
• 過濾器： {{ msg | capitalize }} 和 v-bind:id="rawId | formatId"

Class和Style綁定

• 對象語法：v-bind：class=「{active:isActive}」
• 數組語法：：class="[class1,class2]"
• style綁定-對象語法：v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"

條件渲染

• v-if / v-else / v-else-if DOM是否加載
• v-show 經過display來設置顯示隱藏
• v-cloak 頁面刷新太快，致使有些元素沒有加載出來,能夠同步去隱藏html代碼

vue事件處理器

• v-on:click="" / @click=""
• 事件修飾符
  @click.stop 阻止冒泡
  @click.prevent 阻止默認事件
  @click.self 對對象自己綁定函數，裏面的子元素不起做用
  @click.once 只給事件綁定一次
  @keyup.enter

Vue組件

• 全局組件和局部組件
• 父子組件通信-數據傳遞
  父->子：經過Props傳遞
  子->父：不容許，但vue經過子組件觸發Emit來提交給子組件進行觸發
• Slot

import Counter from './conuter' //導入組件

components:{//註冊局部組件
    Counter //加載組件
  }

<Counter v-bind:num="num"></Counter><!-- 調用組件 v-bind 綁定動態變量 -->

父組件傳遞到子組件,使用props

//hello.vue
<template>
    // v-bind:子組件的值="父組件的屬性"
    <Counter v-bind:num="num"></Counter><!-- 調用組件 v-bind 綁定動態變量 -->
    <p>父組件：{{num}}</p>
</template>
<script>
import Counter from './conuter' //導入組件
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:10,
    }
  },
  components:{//註冊局部組件
    Counter //加載組件
  }
}
</script>

//子組件.vue
<template>
    <button @click="decrement">-</button>
    <p>子組件：{{num}}</p>
</template>
<script>
    export default{
        props:['num'],//父組件的數據須要經過 prop 才能下發到子組件中
        methods:{
            decrement(){
              this.num--;
            },
        }
    }
</script>

子組傳遞到父組件，使用$emit()觸發

//hello.vue
<template>
    <Counter v-bind:num="num" v-on:dec="decrement"></Counter><!-- dec 自定義事件-->
    <p>父組件：{{num}}</p>
</template>
<script>
import Counter from './conuter'
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:10,
    }
  },
  components:{//註冊局部組件
    Counter
  },
  methods:{
    decrement(){
      this.num--;
    },
  }
}
</script>

//子組件.vue
<template>
    <button @click="decrement">-</button>
    <p>子組件：{{num}}</p>
</template>
<script>
    export default{
        props:['num'],//父組件的數據須要經過 prop 才能下發到子組件中
        methods:{
            decrement(){
              this.$emit('dec');//子組件往父組件裏傳數據經過`emit()`觸發，經過emit來觸發父組件的方法，至關於jquery裏的trigger， 複雜項目用Vuex
            },
        }
    }
</script>

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">