Vue.js 新手上路之初體驗筆記
人在江湖飄 哪能不挨刀，所欠缺的技術債總有一天該還的，所以就趕緊的來學學這好用的前端框架Vue.js吧，這篇不是篇稱職的教學文章，只是紀錄一下筆記，好讓自己內化一下記憶，如果有錯誤的地方還請多多包涵
首先要使用Vue.js的話，可以直接在html中引入CDN的vue.js或是直接下載官方網站的.js檔案，開發或學習時建議使用開發版本，開發版本有完整的警告和測試模式，當要正式部署時可以更換為生產版本，檔案已經壓縮過而且去除了警告的部分，這樣比較節省流量
<!-- Vue.js - Development Version from CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
引入Vue.js後就可以開始使用，首先可以先建立一個app的Vue函數來使用並將data中的msg渲染到網頁上
<div id="app>
{{ msg }}
</div>
var app = new Vue ({
el: "#app",
data: {
msg: "Hello World!"
}
})
這邊的el是element的縮寫，這是元素選擇器，用法跟jQuery一樣，要選擇ID使用#開頭，要選擇class的話則使用.開頭，Data的是Vue.js進行儲存元件狀態或是資料，裡面可以object或是function，這邊要注意的是任何命名不可以使用$或_所開頭的名稱，這是Vue.js所保留的，當Vue遇到$或_是不會進行處理的
v-model (資料雙向綁定)
v-model主要用在表單元件或是自訂元件，常用在input、select、textarea上，範例如下
<div id="app">
<input type="text v-model="msg">
Output: {{ msg }}
</div>
var app = new Vue ({
el: "#app",
data: {
msg: "Hello World!"
}
})
當進入網頁時input這時的值會是Hello World!，Output亦同，當input文字異動時，msg也會即時同步更新
v-model.number
v-model預設型別為string，使用v-mode.number時可將數字強制轉換為number型別
<div id="app">
<input type="text" v-model.number="msg">
Output: {{ typeof msg }}
</div>
var app = new Vue ({
el: "#app",
data: {
msg: "Hello World!"
}
})
https://vuejs.org/v2/guide/forms.html#number
v-model.lazy
v-model預設為監聽input事件，使用.lazy方法時可以改為監聽change事件，所以當在input輸入時並不會更新資料，但當滑鼠點擊其它元素離開了input或Enter，這時資料就會進行更新
<div id="app">
<input type="text" v-model.lazy="msg">
Output: {{ msg }}
</div>
var app = new Vue ({
el: "#app",
data: {
msg: "Hello World!"
}
})
https://vuejs.org/v2/guide/forms.html#lazy
v-model.trim
v-model.trim可以去除開頭及結尾的空白字元
<div id="app">
<input type="text" v-model.trim="msg">
Output: {{ msg }}
</div>
var app = new Vue ({
el: "#app",
data: {
msg: "Hello World!"
}
})
https://vuejs.org/v2/guide/forms.html#trim
v-on:[event] (事件監聽器)
v-on是個事件監聽器，常用於監聽click事件，v-on也有許多的方法可以使用，這邊會介紹三個較常用的方法，其它可以參考底下的官方文件，v-on基本範例如下
<div id="app">
<button v-on:click="sayHi"></button>
<!-- 可以將v:on縮寫成@使用 -->
<button @click="sayHi"></button>
{{ msg }}
</div>
var app = new Vue ({
el: "#app",
data: {
msg: ""
},
methods: {
sayHi: function() {
this.msg = "Hi"
}
}
})
https://vuejs.org/v2/api/#v-on
v-on:[event].stop
接著介紹一下較常用的v:on方法，stop可以阻止事件冒泡，範例如下，如果不在button加上stop，上層的div也會一同觸發
<div id="app" v-on:click="sayHi('From div')">
<button v-on:click.stop="sayHi('From button')"></button>
</div>
var app = new Vue ({
el: "#app",
data: {
msg: ""
},
methods: {
sayHi: function(text) {
this.msg = text
}
}
})
v-on:[event].prevent
prevent可以防止執行預設的行為，用法可以帶參數或不帶參數僅停用預設的事件，範例如下
<div id="app">
<a href="https://vuejs.org/v2/api/#v-on">點我會跳轉</a>
<a href="https://vuejs.org/v2/api/#v-on" v-on:click.prevent="sayHi">點我不會跳轉</a>
<a href="https://vuejs.org/v2/api/#v-on" v-on:click.prevent>點我不會跳轉</a>
{{ msg }}
</div>
var app = new Vue ({
el: "#app",
data: {
msg: ""
},
methods: {
sayHi: function() {
this.msg = "偵測到click.prevent事件，停用預設的事件"
}
}
})
v-on:[event].capture
capture是事件捕獲，與事件冒泡的順序相反，事件捕獲是由外到內，事件冒泡則是由內到外
事件捕獲： outer -> middle -> inner
事件冒泡： inner -> middle -> outer
<div id="app">
<div @click.capture="outer">
<div @click.capture="middle">
<button @click.capture="inner">click me</button>
</div>
</div>
</div>
var app = new Vue ({
el: "#app",
data: {
msg: ""
},
methods: {
outer: function() {
alert("outer")
},
middle: function() {
alert("middle")
},
inner: function() {
alert("inner")
}
}
})
v-bind:[attribute] (屬性綁定)
如果綁定HTML的屬性(Attribute)，可以使用v-bina:[attribute]，有一點要注意的地方是，如果HTML及v-bind的屬性同時存在的話，v-bind是優先的，原先的HTML屬性會失效，接著來看個簡單的範例吧
<div id="app">
<a href="https://vuejs.org/v2/api/#v-on" v-bind:href=url>點我會跳轉</a>
<!-- v-bind可以使用:當作縮寫 -->
<a href="https://vuejs.org/v2/api/#v-on" :href=url>點我會跳轉</a>
</div>
var app = new Vue ({
el: "#app",
data: {
url: "https://google.com"
}
})
https://vuejs.org/v2/api/#v-bind
v-if、v-else if、v-else
Vue.js可以使用條件式來控制渲染元素，其用法跟JavaScript一樣，簡單的範例如下
<div id="app">
<p v-if="money >= 60">你有{{ money }}塊, 吃麥當勞</p>
<p v-else-if="money >= 30">你有{{ money }}塊, 吃炸雞排</p>
<p v-else>你只有{{ money }}塊, 只能吃土</p>
</div>
var app = new Vue ({
el: "#app",
data: {
money: Math.floor(Math.random()*100) + 1
}
})
https://vuejs.org/v2/api/#v-if
v-for
v-for可以用來運行迴圈並渲染元素，首先是陣列(Array)的部分，基本上跟JavaScript一樣的操作方式
<div id="app">
<div v-for="(item, index) in items">
{{ item }}
{{ item.name}}
{{ item.age}}
</div>
</div>
var app = new Vue ({
el: "#app",
data: {
items:[
{ name: 'abc', age: 18 },
{ name: 'ppp', age: 20 },
{ name: 'ccc', age: 30 }
]
}
})
物件(Object)的使用範例如下
<div id="app">
<div v-for="(item, key, index) in videoList">
{{ item }}
{{ key }}
{{ item.videoDate}}
</div>
</div>
var app = new Vue ({
el: "#app",
data: {
videoList: {
'ABC': { videoDate: '2019' },
'BBB': { videoDate: '2015' },
'CCC': { videoDate: '2005' }
}
}
})
https://cn.vuejs.org/v2/api/#v-for
v-html
Danger Notice: 在網站上動態渲染任意HTML是非常危險的，因為容易導致XSS攻擊。只在可信內容上使用v-html，永不在用戶提交的內容上。
<div id="app" v-html="myhtml">
</div>
var app = new Vue ({
el: "#app",
data: {
myhtml: '<h1> Hello World! </h1>'
}
})
v-once
這個能讓元素只渲染一次，之後的所有更動都將不會進行渲染
<div id="app">
<p v-once>{{ msg }}</p>
<p>{{ msg }}</p>
<button @click="sayHi">click me</button>
</div>
var app = new Vue ({
el: "#app",
data: {
msg: 'First'
},
methods: {
sayHi: function() {
this.msg = 'SayHi'
}
}
})
https://vuejs.org/v2/api/#v-once
Leave a comment