關於 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:只會觸發一次
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
.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節點進行一些需要的操作。
Vue的生命週期中安裝的mounted和created的區別
created:在模板渲染成HTML前調用,即通常初始化某些屬性值,然後再渲染成視圖。
mounted:在模板渲染成HTML後調用,通常是初始化頁面完成後,再對HTML的DOM節點進行一些需要的操作。