1. 样式绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"> </script> </head> <style type="text/css"> .cl { font-size: 30px; } .cl1 { color: red; } </style> <body> <div id="app"> <h1>{{msg}}</h1> <h2>1.class绑定</h2> <div class="cl">aaa</div> <!-- 单个值 --> <div :class="cl">bbb</div> <!-- 多个值 --> <div :class="cls">ccc</div> <h2>2.style绑定</h2> <!-- 直接使用sytle绑定样式 --> <div style="font-size: 30px; color: blue;">hello vue!</div> <!-- v-bind --> <div :style="{fontSize:fontsize+'px',color:color}">hello vue</div> <div :style="style"> hello </div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { msg: new Date().getTime(), cl: 'cl1', cls: ['cl', 'cl1'], fontsize: 30, color: 'yellow', style: { fontSize: '40px', color: 'green', fontWeight: 'bold' } }, }) </script> </body> </html>
2.事件修饰符
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"> </script> </head> <body> <div id="app"> <h1>{{ts}}</h1> <div>{{msg}}</div> <h2>1，事件修饰符之消息发送</h2> <div> <input type="text" v-model="content"/> <button @click="doSend()">发送消息</button> </div> <h2>2，事件修饰符之发送一次消息</h2> <button @click.once="doSend()">只发送一次消息</button> <h2>3，事件修饰符之阻止表单提价</h2> <form action="bookActio" method="post" @submit.prevent="doSmit"> <label>书本名称：</label> <input type="text" /> <input type="submit" value="提交" /> </form> <h2>按键发送之回车提交</h2> <div> <input type="text" v-model="content" @keyup.enter="doSend"/> <button @click="doSend()">发送消息</button> </div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data:{ ts: new Date().getTime(), msg:null, content:null, }, methods:{ doSend:function(){ console.log("doSend"); this.msg=this.content; }, doSmit:function(){ console.log("doSumit"); } } }) </script> </body> </html>
3.自定义指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"> </script> </head> <body> <div id="app"> <h1>自定义指令{{msg}}</h1> <h2>1.局部指令</h2> <input type="text" v-fos> <h2>全局指令</h2> <input type="text" v-blr> </div> <script type="text/javascript"> //全局指令 Vue.directive("blr",{ inserted:function(){ console.log("blr") } }) var vm = new Vue({ el: '#app', data: { msg: new Date().getTime(), }, directives:{//局部指令 fos:{//自定义指令名称 inserted:function(){//钩子函数 console.log("inserted"); } } } }) </script> </body> </html>
4.表单数据和双向绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"> </script> </head> <body> <div id="app"> <h1>表单数据双向绑定{{ts}}</h1> <div> <label>用户账号</label> <input type="text" v-model="username" /> </div> <div> <label>用户密码</label> <input type="password" v-model="password" /> </div> <div> <label>年龄</label> <input type="text" v-model.number="age" /> </div> <div> <label>爱好</label> <div v-for="h in hobbies" style="display: inline;"> <input type="checkbox" v-model="hobby" :value="h">{{h}} </div> </div> <div> <label>地址</label> <select v-model="cityid"> <option value="">----请选择----</option> <option v-for="c in city" :value="c.id"> {{c.name}} </option> </select> </div> <div> <label>备注</label> <textarea v-model="remark"></textarea> </div> <div> <input type="checkbox" v-model="flag">同意以上协议 </div> <div> <label>性别</label> <input type="radio" v-model="sex" value="1" />男 <input type="radio" v-model="sex" value="0" />女 </div> <div> <button @click="doSubmit" :disabled="!flag">提交</button> </div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { ts: new Date().getTime(), username: null, password: null, age: null, sex: 0, hobbies: ["吃饭", "睡觉", "打豆豆"], hobby: [], city: [{ id: '431101', name: '长沙' }, { id: '431102', name: '株洲' }, { id: '431103', name: '岳阳' }, ], cityid: "", remark: "", flag:false }, methods: { doSubmit: function() { let data = { username: this.username, password: this.password, age: this.age, sex: this.sex, hobbies: this.hobby, cityid: this.cityid, remark: this.remark, }; let age=this.age+10; console.log("age"+age); console.log(data); } } }) </script> </body> </html>
5. 组件
