学习笔记——Vue

  • 学习笔记——Vue已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

2022-10-21第一个vue.js输出的是“Hello Vue!”。注意:el:表示的是元素。写的时候一定要加“#”,如果没有加,那么输出的结果是“{{message}}”。

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。如果没有写参数的话,那么它就默认是删除除本身以外下面的所有。此处表示上移后,将下面的值都删除了。