Vue.js的一些學習筆記
阿新 • • 發佈：2022-05-19
1.vue基本語法
- v-bind單向繫結:
vue中除了使用插值表示式{{}}渲染資料，還可以使用v-bind來渲染，它的簡寫的形式就是一個冒號（:）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- v-bind指令 單向資料繫結 這個指令一般用於在標籤屬性中，獲取值 --> <!-- <h1 v-bind:title="message"> {{content}} </h1> --> <!-- 簡寫的方式 --> <h1 :title="message"> {{content}} </h1> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { content:'我是標題', message:'頁面載入與' + new Date().toLocaleString() } }) </script> </body> </html>
- v-model雙向繫結：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- 單向繫結 --> <input type="text" :value="searchMap.keyword"> <!-- 雙向繫結 --> <input type="text" v-model="searchMap.keyword"> <hr> <p>{{searchMap.keyword}}</p> <!-- 單向繫結修改後只是當前位置會發生資料改變 雙向繫結修改後會將其他所有地方都改變 --> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { searchMap:{ keyword:'陳錦順' } } }) </script> </body> </html>
- 事件：
使用v-on進行數件處理，v-on:click表示處理滑鼠點選事件，事件呼叫的方法定義在 vue 物件宣告的 methods 節點中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- vue繫結事件 --> <button v-on:click="search()">查詢結果1</button> <!-- vue繫結事件簡寫 --> <button @click="search()">查詢結果2</button> <p>您要查詢的是：{{student.name}}</p> <p><a v-bind:href="result.site" target="_blank">{{result.name}}</a></p> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { student:{ name :'陳錦順' }, //查詢結果 result:{ } }, methods:{ search() { console.log("search..."); this.result = { "name" : "陳錦順", "site" : "www.baidu.com" } } } }) </script> </body> </html>
- 修飾符 (Modifiers) 是以半形句號
（.）指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：即阻止事件原本的預設行為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-on:submit.prevent阻止表單提交的預設行為 -->
<form action="save" @submit.prevent="onsubmit()">
<!-- 輸入值就會雙向繫結user中 -->
<input type="text" id="name" v-model="user.name">
<button type="submit">儲存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods: {
onsubmit(){
if(this.user.name){
alert("已提交表單")
}else{
alert("請輸入使用者名稱")
}
}
}
})
</script>
</body>
</html>
- v-if條件渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-on:submit.prevent阻止表單提交的預設行為 -->
<form action="save" @submit.prevent="onsubmit()">
<!-- 輸入值就會雙向繫結user中 -->
<input type="text" id="name" v-model="user.name">
<button type="submit">儲存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods: {
onsubmit(){
if(this.user.name){
alert("已提交表單")
}else{
alert("請輸入使用者名稱")
}
}
}
})
</script>
</body>
</html>
- v-for列表渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 10"> {{n}} </li>
</ul>
<ol>
<!-- index是從0開始的，n是從1開始 -->
<li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
</ol>
<hr/>
<table border="1">
<tr v-for="user in userList">
<!-- <tr v-for="(user,index1) in userList"> -->
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
},
methods: {
}
})
</script>
</body>
</html>
2.元件
元件（Component）是 Vue.js 最強大的功能之一。
元件可以擴充套件 HTML 元素，封裝可重用的程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
// 定義vue使用的元件
components: {
//元件的名稱
'Navbar':{
//元件的內容
template: '<ul><li>首頁</li><li>學員管理</li></ul>'
}
}
})
</script>
</body>
</html>
3.vue的生命週期
vue的生命週期總的有：beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。
其中created和mounted較為重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="update">update</button>
<h3 id="h3">{{message}}</h3>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
message:"床前明月光"
},
//在頁面渲染之後執行
mounted(){
debugger //在前端打斷點
console.log("mounted...")
},
//在頁面渲染之前執行(不與程式碼順序有關)
created(){
debugger
console.log('created...')
},
methods: {
show(){
console.log('執行了show方法');
},
update(){
this.message="玻璃好上霜"
}
}
})
</script>
</body>
</html>
4.路由
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
Vue.js 路由需要載入 vue-router 庫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用router-link元件來導航 -->
<!-- 通過屬性 to 指定連結 -->
<!-- router-link會預設被渲染成一個 <a>標籤 -->
<router-link to="/">首頁</router-link>
<router-link to="/student">學生管理</router-link></router-link>
<router-link to="/teacher">教師管理</router-link>
</p>
<!-- router-view 路由出口 -->
<!-- 路由匹配到的元件將渲染在這裡 -->
<router-view></router-view>
</div>
<!-- 注意這裡路由的js檔案一定要放在vue的下方！ -->
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
// 1.定義元件，可以從其他檔案import進來
const welcome = {template : '<div>歡迎</div></div>'}
const teacher = {template : '<div>教師列表</div>'}
const student = {template : '<div>學生列表</div>'}
// 2.定義路由，每個路由應該對映一個元件
const routes = [
{path : '/', redirect : '/welcome'},
{path : '/welcome', component : welcome},
{path : '/teacher', component : teacher},
{path : '/student', component : student}
]
// 3.建立router例項，然後傳routes配置
const router = new VueRouter({routes})
// 4.建立和掛載根例項，從而讓整個y應有都有路由功能
const app = new Vue({
el: '#app',
router
})
</script>
</body>
</html>