标签 components 下的文章 - 自我成长

登录

标签搜索

少年

累计撰写 189 篇文章
累计收到 24 条评论

搜索到 1 篇与的结果

2022-03-06
vue学习一、vue的基本使用<!DOCTYPE html> <head> <title>vue的基本使用</title> </head> <body> <div id="app">   <h1>{{msg}}</h1> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: '黄瓜' }, template: '<div><h5>{{msg}}</h5></div>' }); </script> </body> </html>二、vue指令<!DOCTYPE html> <head> <title>vue指令</title> <style> .box{ width: 300px; height: 300px; background-color: red; } .active{ background-color: green; } </style> </head> <body> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", data:function(){ return{ msg: 'vue指令', msg2: 'vue的3种{{}}插值，1、{{}} 2、v-text="" 3\v-html=""', isShow: true, isActive: true, frut: [ {id:1,name:"苹果",price:20}, {id:2,name:"火龙果",price:40}, {id:3,name:"西瓜",price:30}, {id:4,name:"荔枝",price:60} ], person:{ name:"zhangsan", age:30, sex:"boy" } } }, template: '<div>{{msg}} <p v-text="msg"></p> <p v-html="msg2"></p> <div v-if="isShow">v-if的使用</div> <div v-if="Math.random()>0.5">显示</div><div v-else>隐藏</div> <div v-show="true">v-show显示</div> <div class="box" v-on:click="clickHander" v-bind:class="{active:isActive}"></div> <ul><li v-for="(item,index) in frut"><h1>{{index}}</h1><h3>{{item.id}}</h3><h2>{{item.name}}</h2><h1>{{item.price}}</h1></li></ul> <ul><li v-for="(value,key) in person">{{value}}==={{key}}</li></ul> </div>', methods:{ clickHander(e){ console.log(this); this.isActive=!this.isActive; } } }); console.log(vm); </script> </body> </html>三、vue的双向绑定<!DOCTYPE html> <head> <title>vue的双向绑定</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <h3 >{{msg}}</h3> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#app", data:function(){ return{ msg:"Hello World" } }, template:'', methods:{ } }); </script> </body> </html>四、局部组件的创建<!DOCTYPE html> <head> <title>vue局部组件的创建</title> </head> <body> <div id="app"><h1>{{msg}}</h1></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var App={ data(){ return { } }, template:'<div>VUE Hello </div>' } new Vue({ el:"#app", data(){ return{ msg:"Hello ---- World" } }, template:'<App/>', methods:{ }, components:{ App } }); </script> </body> </html>五、全局组件<!DOCTYPE html> <head> <title>vue全局组件的创建</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vquanju',{ data(){ return{ } }, template:'<div><button>全局组件按钮</button></div>' }); var Vjubu={ data(){ return{ } }, template:'<div><h2>我是局部组件</h2><Vquanju/></div>' } var Vju={ data(){ return{ } }, template:'<div><h2>我是局部组件2</h2><Vquanju/></div>' } new Vue({ el: "#app", data(){ return { } }, template: '<div><Vjubu/><Vju/></div>', components:{ Vjubu, Vju } }); </script> </body> </html>六、通过prop往子组件通信<!DOCTYPE html> <head> <title>通过prop往子组件通信</title> </head> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vchild',{ data(){ return{ } }, template:'<div><p>我是子组件<p/><input type="text" v-model="bdata" ></input></div>', props:['bdata'] }); Vue.component('Vparent',{ data(){ return{ bmsg: 'Hello,绑定数据' } }, template:'<div><p>我是父组件</p><Vchild :bdata="bmsg"/></div>' }); var App={ data(){ return{ } }, template:'<h1><Vparent/></h1>' } new Vue({ el: '#app', data(){ return{ msg: '好罗' } }, components:{ App }, template:'<App/>' }); </script> </html>七、通过事件向子组件发送消息<!DOCTYPE html> <head> <title>通过prop往子组件通信</title> </head> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vchild',{ data(){ return{ newData: '' } }, template:'<div><p>我是子组件{{childData}}<p/><input type="text" v-model="newData" @input="changeValue(newData)" /></div>', props:['childData'], methods:{ changeValue(val){ this.$emit('childHandler',val); } } }); Vue.component('Vparent',{ data(){ return{ bmsg: 'Hello,绑定数据' } }, template:'<div><p>我是父组件</p><Vchild :childData="bmsg" @childHandler="childHandler"/></div>', methods:{ childHandler(val){ console.log(val+"-------------------") } } }); var App={ data(){ return{ } }, template:'<h1><Vparent/></h1>' } new Vue({ el: '#app', data(){ return{ msg: '好罗' } }, components:{ App }, template:'<App/>' }); </script> </html>八、全局组件的使用<!DOCTYPE html> <head> <title>vue全局组件的创建</title> <style> .buttons{ display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .successs{ color: #fff; background-color: #67c23a; border-color: #67c23a; } .defaults{ color: #fff; background-color: #409eff; border-color: #409eff; } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vquanju',{ data(){ return{ } }, template:'<div><button class="buttons" :class="type">全局组件按钮<slot></slot></button></div>', props:['type'] }); //利用父向子传值，自己封装组件，例如按钮 var Vjubu={ data(){ return{ } }, template:'<div><h2>我是局部组件 </h2><Vquanju>slot覆盖内容</Vquanju> <Vquanju type="successs">默认</Vquanju > <Vquanju type="defaults">成功</Vquanju></div>', } var Vju={ data(){ return{ } }, template:'<div><h2>我是局部组件2</h2><Vquanju/></div>' } new Vue({ el: "#app", data(){ return { } }, template: '<div><Vjubu/><Vju/></div>', components:{ Vjubu, Vju } }); </script> </body> </html>
- 2022年03月06日
- 257 阅读
- 0 评论
- 2 点赞