學習筆記——Vue-有解無憂

2022-10-21

第一個vue.js

<!doctype html>
<head>
    <title>Document</title>
    <!--  開發環境  -->
    <script src=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"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=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"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://www.cnblogs.com/isDaHua/archive/2022/10/23/"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
    <a v-bind:href=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"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://www.cnblogs.com/isDaHua/archive/2022/10/23/"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=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"#" v-if="isLogin">歡迎你歸來</a>
13     <hr>
14     <a href=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"#" v-if="level===1">青銅</a>
15     <a href=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"#" v-else-if="level===2"></a>
16     <a href=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"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://www.cnblogs.com/isDaHua/archive/2022/10/23/"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://www.cnblogs.com/isDaHua/archive/2022/10/23/"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=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"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://www.cnblogs.com/isDaHua/archive/2022/10/23/"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=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"boy" v-model="sex">
19                 女<input type="radio" name="sex" value=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"girl" v-model="sex">
20             </td>
21         </tr>
22         <tr>
23             <td>愛好</td>
24             <td>足球<input type="checkbox" name="like" value=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"足球" v-model="like"></td>
25             <td>籃球<input type="checkbox" name="like" value=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"籃球" v-model="like"></td>
26             <td>乒乓球<input type="checkbox" name="like" value=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"乒乓球" 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://www.cnblogs.com/isDaHua/archive/2022/10/23/"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=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"javascript:;" @click="up(index)">↑</a>
17            {{item}} <a href=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"javascript:;" @click="deleteitem(index)">洗掉</a>
18             <a href=https://www.cnblogs.com/isDaHua/archive/2022/10/23/"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，如果沒有寫引數的話，那么它就默認是洗掉除本身以外下面的所有，此處表示上移后，將下面的值都洗掉了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519079.html

標籤：其他

上一篇：js原型(重點理解)

下一篇：js中的防抖和節流