1.Vue的使用
通过new一个Vue对象设置参数来操作某个区域的html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> <script src="js/vue.js"></script> </head> <body> <div id="app">
<!--使用{{key}}获取值--> {{message}} <!--三目运算符--> {{number==10? "Yes":"NO"}} <!--数学运算--> {{number+109}} </div> </body> <script> //view model //创建Vue对象 new Vue({ el:"#app", //由Vue接管的id为app的区域 data: { message:"hello,this is my FirstVue!", number:100 } }) </script> </html>
2.基本语法
1.v-on:事件名="方法名([参数])"--- 可简写为@事件名="方法名([参数])"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-no:click</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>绑定click事件</p>{{message}}<br> <button v-on:click="clicked">点击改变message</button><br><br><hr> <p>绑定keydown事件</p> Vue:<input type="text" v-on:keydown="func($event)"> <!--传统js方式--> <hr> 传统js:<input type="text" onkeydown="showkeyValue()"> </div> </body> <script> //view model //创建Vue对象 new Vue({ el:"#app", //由Vue接管的id为app的区域 data: { message:"点击前：哈哈哈" }, methods:{ clicked:function () { alert("点击按钮"); this.message="点击后：嘻嘻嘻！"; }, func:function(event){ if(event.keyCode<48 ||event.keyCode>57){ event.preventDefault(); } } } }) //传统js方式 function showkeyValue() { if(event.keyCode<48 ||event.keyCode>57){ event.preventDefault(); } } </script> </html>
2.事件修饰符
.prevent：阻止默认事件执行，比如阻止表单提交
.stop：停止事件传播行为
<div id="app"> <!--<form action="/www.baidu.com" onsubmit="return func1()"> <input type="submit" value="提交"> </form>--> <!-- 事件修饰符.prevent:阻止默认事件执行 .stop: 停止事件传播行为 --> <form action="/www.baidu.com" @submit.prevent="submit()"> <input type="submit" value="提交"> </form> </div> <script> new Vue({ el:"#app", methods:{ submit:function(){ alert("表单提交") } } })
</script>
3.v-text，v-html和v-bind
v-text和v-html就和js对象的innertext，innerhtml一样，用于向标签中插入html或text，v-bind用于设置标签属性，v-bind:可以简写为:
<div id="app"> <div v-text="text"></div> <div v-html="text"></div> <div style="300px;height:100px"> <font v-bind:color="bkcolor">v-bind测试</font> <font :color="bkcolor1">v-bind简写测试</font> </div> </div> <script> new Vue({ el:"#app", data:{ text:"<h1>hello</h1>", bkcolor:"red", bkcolor1:"blue" } }); </script>
4.v-model
当使用v-model时表单元素value，selected，checked会失效，使用v-model时data中的数据会随输入框中的数据改变而改变，是一种双向绑定
<div id="app"> <form action=""> 用户名：<input type="text" name="username" v-model="user.username"><br> 密码：<input type="text" name="password" v-model="user.password"><br> <p>{{user.username}}---{{user.password}}</p> </form> </div> <script> new Vue({ el:"#app", data:{ user:{ username:"luo", password:"123456" }, } }); </script>
5.v-for循环
<div id="app"> <h2>遍历数组</h2> <ui> <!--item代表数组中的元素，index代表下标--> <li v-for="(item,index) in arr">{{item}}</li> </ui> <h2>遍历对象</h2> <oi> <!--这里括号内的变量名可以随意，第一个为对象的属性值，第二个为属性名--> <li v-for="(val, key) in product">{{key}}=={{val}}</li> </oi> <h2>遍历数组对象</h2> <table> <tr v-for="(product) in products"> <!--<td>{{product.id}}</td>--> <!--<td>{{product.name}}</td>--> <!--<td>{{product.price}}</td>--> <td v-for="(val) in product">{{val}}</td> </tr> </table> </div> <script> new Vue({ el:"#app", data:{ //数组数据 arr:[3,4,2,7,5], //对象数据 product:{id:1,name:"电脑",price:6000}, //数组对象数据 products:[ {id:7,name:"手机",price:2000}, {id:7,name:"自行车",price:300}, {id:7,name:"电视机",price:2000} ] } }); </script>
6.v-if和v-show
都是判断绑定的数据为true/false来展示的，v-if在true时对对数据渲染，在false时会删除包含的代码，而v-show不管是true还是false都会渲染数据，只是对节点设置display：none来隐藏节点。
<div id="app"> <p v-if="Tif">v-if测试</p> <p v-show="Tshow">v-show测试</p> <button @click="change()">change</button> </div> <script> new Vue({ el:"#app", data:{ Tif:true, Tshow:true }, methods:{ change:function () { this.Tif=!this.Tif; this.Tshow=!this.Tshow; } } }); </script>