2022-10-21 第一個vue.js <!doctype html> <head> <title>Document</title> <!-- 開發環境 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ...
2022-10-21
第一個vue.js
<!doctype html>
<head>
<title>Document</title>
<!-- 開發環境 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script >
var app = new Vue({
el: '#app',
data:{
message:'Hello Vue!'
}
})
</script>
</html>
輸出的是“Hello Vue!”。
註意：el:表示的是元素。寫的時候一定要加“#”，如果沒有加，那麼輸出的結果是“{{message}}”。
------------------------------------
data 數據：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <a href="javascript:vm">{{message}}</a> <span>{{hello}}</span> <hr> <span>{{world}}</span> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ message:"領取優惠券", hello:"hi en heng", } }} </script> </html>
----------------------
v-bind
使用實例：
<!doctype html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <a v-bind:href="url">戳我有驚喜</a> <br> <span v-bind:title="showmessage">滑鼠放在這裡</span> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ url:'http://www.baidu.com', showmessage:'當前時間是:'+new Date().toLocaleString(), } }) </script> </html>
說明：遇到的問題，運行的時候，超鏈接沒有起作用，之後，發現的問題是，在script中沒有添加“data”。之後將“data”添加上以後，將“url”和“showmessage”放入，超鏈接就可以起作用。
--------------------------------
2022-10-22
---------------------------------
v-if
使用實例
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <title>Document</title> 7 </head> 8 <body> 9 <div id="app"> 10 <span>{{message}}</span> 11 <hr> 12 <a href="#" v-if="isLogin">歡迎你歸來</a> 13 <hr> 14 <a href="#" v-if="level===1">青銅</a> 15 <a href="#" v-else-if="level===2"></a> 16 <a href="3" v-else=>王者</a> 17 <hr> 18 <span v-id="seen">v-if</span> 19 <span display= none v-show="seen">v-show</span> 20 </div> 21 </body> 22 <script type="text/javascript"> 23 var vm = new Vue({ 24 el:'#app', 25 data:{ 26 message:'hello', 27 isLogin:false, 28 level:1, 29 seen:true, 30 } 31 }) 32 </script> 33 </html>
-------------------
v-for
實例
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 5 <title>Document</title> 6 </head> 7 <body> 8 <div id="app"> 9 <span>{{message}}</span> 10 11 <hr> 12 <ul> 13 <li v-for="(item,index) in items ">{{index}} ~~~ {{item}}</li> 14 </ul> 15 <hr> 16 <ul> 17 <li v-for="(value,key) in object">{{key}} {{value}}</li> 18 </ul> 19 <hr> 20 <ul> 21 <li v-for="todo in todos">{{todo.title}}----{{todo.author}}</li> 22 </ul> 23 </div> 24 </body> 25 <script type="text/javascript"> 26 var vm = new Vue({ 27 el:'#app', 28 data:{ 29 message:'hello', 30 items:['python','mysql','linux','html','css','js'], 31 object:{ 32 title:'How to do lists in Vue', 33 author:'Jane Doe', 34 publishesAt:'2016-04-10', 35 }, 36 todos:[ 37 { 38 title:'Vue', 39 author:'Jane Doe', 40 publishedAt:'2016-04-10', 41 }, 42 { 43 title:'python', 44 author:'Ricky', 45 publishedAt:'2019-04-10', 46 }, 47 48 ] 49 } 50 51 }) 52 </script> 53 </html>
說明：註意，在第36行往下，如果只是寫“[title:'' ",author:" "]”,裡面沒有填寫數據的時候，在瀏覽器中顯示的只有“{{message}}”等等，不會顯示內部的字元。
-----------------------------
methods方法：
使用實例
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <title>Document</title> 7 </head> 8 <body> 9 <div id="app"> 10 <span>{{message}}</span> 11 <button v-on:click="login">登陸</button><br> 12 <a href="javascript:;" @click="register">註冊</a> 13 14 <hr> 15 <button @click="add(counter)">點擊+1</button> 16 </div> 17 </body> 18 <script type="text/javascript"> 19 var vm = new Vue({ 20 el:'#app', 21 data:{ 22 message:'hello', 23 counter:1, 24 total:0, 25 }, 26 methods:{ 27 login:function(){ 28 alert('我被點擊了') 29 }, 30 register:function(){ 31 alert('註冊了') 32 }, 33 add:function(counter){ 34 this.total+=counter; 35 alert(this.total) 36 } 37 } 38 }) 39 </script> 40 </html>
說明：上面是正確的代碼，剛開始遇到的問題是，點擊“登陸”後，沒有彈窗，就很奇怪。之後，換了Vue文檔中的代碼，發現可以運行，那就是點擊函數有問題，後來發現它拼寫有誤。正確的拼寫是“alert”,而不是“alter”。一定要註意。
--------------------------------
v-model綁定事件
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <title>Document</title> 7 </head> 8 <body> 9 <div id="app"> 10 <span>{{message}}</span> 11 <hr> 12 <table> 13 <tr><td>用戶名</td><td><input type="text" name="username" v-model="username"></td></tr> 14 <tr><td>密碼</td><td><input type="password" name="password" v-model="password1"></td></tr> 15 <tr><td>確認密碼</td><td><input type="password" name="password" v-model="password2"></td></tr> 16 <tr><td>性別</td> 17 <td> 18 男<input type="radio" name="sex" value="boy" v-model="sex"> 19 女<input type="radio" name="sex" value="girl" v-model="sex"> 20 </td> 21 </tr> 22 <tr> 23 <td>愛好</td> 24 <td>足球<input type="checkbox" name="like" value="足球" v-model="like"></td> 25 <td>籃球<input type="checkbox" name="like" value="籃球" v-model="like"></td> 26 <td>乒乓球<input type="checkbox" name="like" value="乒乓球" v-model="like"></td> 27 </tr> 28 </table> 29 <button v-on:click="register">註冊</button> 30 </div> 31 </body> 32 <script type="text/javascript"> 33 var vm = new Vue({ 34 el:'#app', 35 data:{ 36 message:'hello', 37 username:'', 38 password1:'', 39 password2:'', 40 sex:'', 41 like:[], 42 }, 43 methods:{ 44 register:function(){ 45 alert(this.username + this.password1 + this.password1 + this.sex + this.like) 46 } 47 } 48 }) 49 </script> 50 </html>
--------------------
todalist實例
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <title>Document</title> 7 </head> 8 <body> 9 <div id="app"> 10 <span>{{message}}</span> 11 <input type="text" name="todoitem" v-model="newitem"><button @click="add">添加</button> 12 <hr> 13 <ul> 14 <!-- <li v-for="item in items">{{item}}</li>--> 15 <li v-for="(item,index) in items"> 16 <a href="javascript:;" @click="up(index)">↑</a> 17 {{item}} <a href="javascript:;" @click="deleteitem(index)">刪除</a> 18 <a href="javascript:;" @click="down(index)">↓</a> 19 </li> 20 </ul> 21 </div> 22 </body> 23 <script> 24 var vm = new Vue({ 25 el:'#app', 26 data:{ 27 message:'hello', 28 items:['學習html','學習python','學習mysql'], 29 newitem:'' 30 }, 31 methods:{ 32 add:function(){ 33 this.items.push(this.newitem); 34 this.newitem=''; 35 }, 36 deleteitem:function(index){ 37 this.items.splice(index,1); 38 }, 39 down:function(index){ 40 //1.獲取當前的元素 41 current = this.items[index] 42 //2.先把當前元素刪除 43 this.items.splice(index,1) 44 //3.再添加，添加的時候讓它的索引減1 45 this.items.splice(index+1,0,current) 46 }, 47 up:function(index){ 48 //1.獲取當前的元素 49 current = this.items[index] 50 //2.先把當前元素刪除 51 this.items.splice(index,1) 52 //3.再添加，添加的時候讓它的索引減1 53 this.items.splice(index-1,0,current) 54 } 55 } 56 }) 57 </script> 58 </html>
說明：註意第34行，添加元素後，將文本框裡面的內容設置為空，是“=”,不是“：”,如果寫反了，結果就出不開。第36行中，刪除的函數中要傳遞一個索引。第51行中，如果是刪除一個元素，那麼使用的參數有兩個，處理“index”外，還有要刪除的元素的個數。若刪除一個那麼第二個參數寫上1。如果沒有寫參數的話，那麼它就預設是刪除除本身以外下麵的所有。此處表示上移後，將下麵的值都刪除了。
