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>
@H_110_419@
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>
@H_110_419@
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‘,directives:{//局部指令 fos:{//自定义指令名称 inserted:function(){//钩子函数 console.log("inserted"); } } } }) </script> </body></HTML>
@H_110_419@
@H_110_419@
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>
@H_110_419@
5. 组件
@H_110_419@
总结以上是内存溢出为你收集整理的Vue03全部内容，希望文章能够帮你解决Vue03所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）