Vue语法
第一个Vue示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = 'd1'> <p>name:{{name}}</p> <p>age:{{age}}</p> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", // 绑定标签 data:{ name:"qingqiu", age:17, } }) </script> </html>
每一个vue实例,都需要划分一块地方,给予vue来放置东西。
首先,需要实例化一个vue对象。
el:"一般使用标签的id"。
data:{ 放置数据的位置 }
数据和方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "d1"> <p>name:{{name}}</p> <p>age:{{age}}</p> </div> </body> <script src="vue.js"></script> <script> var info = { name:"qingqiu", age:17 }; // 可以先创建一个变量包含了信息,然后再将之传入data var app = new Vue({ el:"#d1", data:info }) </script> </html>
模板语法:
v-html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <p>{{msg1}}</p> <p>{{msg2}}</p> <!-- 若是不加v-html,将会以字符串的形式显示 --> <p v-html="msg2">{{msg2}}</p> <!--标签属性加上 v-html="msg2(data中的键)",这样才会渲染标签。--> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ msg1:"顾清秋", msg2:"<a href='https://www.baidu.com'>点击跳转</a>", }, }) </script> </html>
指令示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <p v-if="status">沉默着,走了有,多遥远</p> <!-- v-if="status" 表示这个标签如果status返回的是true则显示,如果是false则不显示标签--> <p v-show="status">抬起头,慕然间,才发现</p> <!--v-show="status" 表示这个标签如果status返回的是true则显示,如果是false则显示标签,不现实标签内的内容, 只是相当于给标签加了个style="diplay:none"的样式--> <!-- 参数: 一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性: --> <p><a v-bind:href="url">点击跳转</a></p> <!-- v-bind:href="url" 在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 --> <p><button v-on:click="click">点击事件</button></p> <!-- v-on:click="click" v-on 用于监听事件,紧跟的click是事件名.最后的“click”是被绑定的methods中的方法 --> <form action="" v-on:submit.prevent="submit"> <!-- 监听submit事件,并阻止页面的刷新:submit.prevent --> <input type="text"> <input type="submit"> </form> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ status:true, url:"https://www.baidu.com", }, //methods中是专用来放置方法 methods:{ click:function(){ alert("点击事件") }, submit:function(){ alert("阻止form的刷新页面") }, }, }) </script> </html>
计算属性和侦听器:
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch
——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch
回调。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <p>{{msg}}</p> <p>{{msg.split("").reverse().join("")}}</p> <p>{{reversemsg()}}</p> <!--上面的是方法:方法时每次都会被调用,也就是每次都会重新执行一遍--> <p>{{reversemsg2}}</p> <!--上面的是属性:属性只会在更新的时候执行一次,以后除非属性更改,否则就不会再次执行,只会在缓存中拿取值。--> <p>{{quanming}}</p> <p>{{quanming2}}</p> <!--动态属性一般放置在computed中--> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ msg:"12345", ming:"清秋", xing:"顾", quanming:"顾 清秋" }, methods:{ reversemsg:function(){ console.log("这是一个方法"); return this.msg.split("").reverse().join("") }, }, computed:{ //计算属性 reversemsg2:function(){ console.log("这是属性"); return this.msg.split("").reverse().join("") }, quanming2:function(){ return this.xing + this.ming }, }, //侦听器:实时会根据属性的更改而执行一些命令 watch:{ //val 就是属性的值。 xing:function(val){ this.quanming = val + this.ming }, ming:function(val){ this.quanming = this.xing + val }, }, }) </script> </html>
class 与 style:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ height: 200px; width: 200px; border-radius: 50%; background-color: red; } .c1{ background-color: green; } </style> </head> <body> <div id="d1"> <div class="c" v-bind:class="{c1:status}" v-on:click="change"></div> <!-- v-bind 绑定class 若是status为true则添加class="c1"--> <!-- v-on 监听点击事件,执行change指向函数中的操作--> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ status:false, }, methods:{ change:function(){ this.status = !this.status // 状态反转:给同一个变量每次赋予相反的值。 }, } }) </script> </html>
条件渲染:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <template v-if="status"> <p>沉默着,走了有,多遥远</p> <p>抬起头,慕然间,才发现</p> <p>一直倒退</p> </template> <p v-else>忘记时间</p> <!-- 同if else语句 若status为true则显示if语句,否则显示else语句 --> <hr> <ul> <li v-for="i in list">{{i}}</li> </ul> <hr> <ul> <li v-for="i,index in list">{{index}}:{{i}}</li> <!--for循环的第一个变量就是值,第二个是索引,值永远是第一个--> </ul> <hr> <ul> <li v-for="v,k,i in obj">{{i}}:{{k}}:{{v}}</li> <!--第一个值也是值,第二个是键,第三个是索引--> </ul> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ status:true, list:[ "吃饭", "睡觉", "打豆豆", ], obj:{ name:"清秋", age:17 } }, }) </script> </html>
表单绑定:
你可以用 v-model
指令在表单 <input>
及 <textarea>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的value,checked,selected特性的初始值而总是将Vue实例的数据作为数据来源,所以应该通过JavaScript在组件的data选项中声明初始值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <input type="text" v-model.trim="msg"> <!--v-model 双向绑定,实时获取更新数据 trim:去除空格--> <p>{{msg}}</p> <hr> <div id="example-3"> <input type="checkbox" id="jack" value="basketball" v-model = "hobby"> <label for="jack">篮球</label> <input type="checkbox" id="john" value="football" v-model = "hobby"> <label for="john">足球</label> <input type="checkbox" id="mike" value="tennis" v-model = "hobby"> <label for="mike">网球</label> <br> <span>我的爱好:{{hobby}}</span> </div> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el:"#d1", data:{ msg:'', hobby:[], }, }) </script> </html>
小清单示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: green; } .c2{ text-decoration: line-through; } </style> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="contanier " style="margin-top: 100px"> <div class="row"> <div id="d1" class="col-md-6 col-md-offset-3"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">小清单</h3> </div> <div class="panel-body"> <!--输入框开始--> <div class="input-group"> <input v-model="item.title" type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button v-on:click="add" class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus"></span></button> </span> </div> <!--输入框结束--> <hr> <!--列表组开始--> <div class="list-group"> <div id="event" v-for="(items,index) in eventlist" class="list-group-item" v-bind:class="{c2:items.status}"> <span class="glyphicon glyphicon-ok-sign" v-bind:class="{c1:items.status}" v-on:click="change(index)"> </span> {{items.title}} <span v-on:click="remove(index)" class="glyphicon glyphicon-remove pull-right"></span> </div> </div> </div> </div> </div> </div> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el: "#d1", data: { eventlist: [], item:{ status:false, title:"", } }, methods: { change:function(index){ alert(index); this.eventlist[index].status = !this.eventlist[index].status; }, add:function(){ var obj = Object.assign({},this.item); this.eventlist.push(obj); this.item.title=""; }, remove:function(index){ this.eventlist.splice(index,1); } }, }) </script> </html>