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