關於 Vue 基礎

2019-09-27

644
0
關於

關於 Vue 基礎

Vue 基礎筆記

本篇使用到 pug Element-ui 等套件

Vue 的選項物件使用?

以下選項物件皆以 Vue cli 的方式撰寫。

{
  el: '#id',                       // CSS selector 或 HTMLElement 實例  
  data(){return{...}},             // Object 或 Function
  computed: {Function(){...}},     // { [key: string]: Function | { get: Function, set: Function } }
  methods: {Function(){...}},      // { [key: string]: Function }
  watch: {String:Function(){...}}, // { [key: string]: string | Function | Object }
  mounted() { JS or JQuery }       // Function
  props: {},                       // Array<string> 或 Object
  created: {}
  // ...
}

el 掛載 HTMLElement

el 掛載於 vue cli 中會另外設定，以下僅限使用於 vue cli 之外的 el 實例掛載

<body>
  <div id="app></div>
</body>
<script>
new Vue({
 el:'#app'
})

//或是可以以這種寫法掛載 el
new Vue({

}).$mount("#app")
</script>

data 掛載 Object 或 Function

<template lang="pug">
 .home  {{message}}  <!-- 123 -->
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      message: "123"
    };
  }
};
</script>

computed 寫入Function 、 get Function 或 set Function

有關自動執行、邏輯計算這方面的撰寫在這個項目
當定義 computed 之後，其相依的 data 或是 component 中的 props 改變，computed 也會隨之更新;methods 則是不管資料是否相依都會計算

<template lang="pug">
 .home 
  p {{message}}       <!-- 123 -->
  p {{getElement}}   <!-- 246 -->
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      message: 123,
      calc: ""
    };
  },
  computed: {
    getElement() {
      return this.calc = this.message * 2;
    }
  }
};
</script>

methods 做事件處理

<template lang="pug">
 .home 
  ElButton(@click="showMessage") Message   <!-- 跳出視窗顯示 Hello Vue.js 文字 -->
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      message: 123,
    };
  },
  methods:{
    showMessage(){
      alert('Hello Vue.js')
    }
  }
};
</script>

Tips
vue.js 藉由事件修飾符處理許多 DOM 事件的細節，讓我們更專注於程式邏輯的撰寫。
.stop：等同於event.stopPropagation()，防止事件冒泡。
.prevent：等同於event.preventDefault()，防止執行預設的行為。
.capture：與事件冒泡的方向相反，事件捕獲 (event capturing) 是由外而內的。
事件冒泡：inner -> middle -> outer //inner、middle、outer 分別都代表一個自訂 Function 的名稱
事件捕獲：outer -> middle -> inner
.self：只會觸發自己範圍內的事件，不包含子元素。
.once：只會觸發一次

<template lang="pug">
 .home 
  ElButton(@click.once="showMessage") Message
  button(@click.stop="showMessage") Message    <!--防止冒泡-->
  button(@click.prevent="showMessage") Message <!--防止執行預設的行為-->
  button(@click.capture="showMessage") Message <!--觸發事件由此元素的最上層元素開始，
                                               最上層的 click 開始向依序執行 click 的內容-->
  button(@click.self="showMessage") Message    <!--只觸發自己範圍內的事件，不包含子元素-->
  button(@click.once="showMessage") Message    <!--只觸發一次-->
</template>

watch 讓我們監聽某個值，當這個值變動時，就去做某些事情

<template lang="pug">
 .home 
  div
   label 請輸入使用者名字
   input(v-model="userName")
   p {{userName}}
   p {{errMsg}}
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      userName: 123,
      errMsg:''
    };
  },
  watch: {
    userName: function(value) {
      if (this._valid(value)) {
        this.errMsg = "使用者名稱開頭不可為數字。";
      } else {
        this.errMsg = "合法的使用者名稱。";
      }
    }
  },
  methods: {
    _valid(name) {
      return /^[0-9]/.test(name);  //註解一
    }
  }
};
</script>

註解一
.test() 為 JavaScrip 的一個函數[RegExp.prototype.test()]
此函數執行一個索引，用來查看正規表達式與指定的字符串是否匹配，返回 true 或 false

let str = 'hello world!';
let result = /^hello/.test(str);
console.log(result); 
// true

/^[0-9]/ 符合 0 到 9 數字

mounted 此項目一般用來向後端發送請求拿到數據之後做一些業務處理

也可以將 JavaScript 或 JQuery 的語法寫在此處

<template lang="pug">
 .home 
   #element  //我是從 mounted 內插入的內容
</template>
<script>
export default {
  name: "Home",
  mounted(){
    const element = document.getElementById('element')
    element.innerHTML = '我是從 mounted 內插入的內容'
  }
};
</script>

Tisp
Vue的生命週期中安裝的mounted和created的區別
created：在模板渲染成HTML前調用，即通常初始化某些屬性值，然後再渲染成視圖。
mounted：在模板渲染成HTML後調用，通常是初始化頁面完成後，再對HTML的DOM節點進行一些需要的操作。

參考資料

關於

回首頁

Deer 數位筆記

紀錄、學習、留下經驗