<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件创建方法一</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <mycom></mycom> </div> <script> Vue.component('mycom',{ template : "<h3>使用vue.extend创建的组件</h3>" }) var vm=new Vue({ el:'#app', data:{ }, }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件创建方法二</title> <script src="js/vue.min.js"></script> </head> <body> <!--下面<div>标记是Vue控制区域内--> <div id="app"> <mycom></mycom> </div> <!--下面<template>标记是Vue控制区域外，组件的模板--> <template id="temp"> <div> <h3>利用模板定义组件</h3> </div> </template> <script> Vue.component('mycom',{ template : "#temp" }) var vm=new Vue({ el:'#app', data:{ }, }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue私有组件</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <mycom></mycom> </div> <template id="temp"> <div> <h3>私有组件</h3> </div> </template> <script> var vm = new Vue({ el: '#app', components: { mycom: { template: '#temp', } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件中的数据与方法</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <counter></counter> <hr> <counter></counter> <hr> <counter></counter> </div> <template id="temp"> <div> <input type="button" value="加一" @click='increment'> <h3>{{count}}</h3> </div> </template> <script> Vue.component('counter',{ template:'#temp', data:function(){ return {count:0} }, methods:{ increment() { this.count++ } } }) var vm=new Vue({ el:'#app', data:{}, methods:{} }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件切换</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> 选择需要切换的组件： <input type="radio" name="change" v-model="tab" value="myCom1" checked=""/>1号 <input type="radio" name="change" v-model="tab" value="myCom2" />2号 <keep-alive> <component :is="tab"></component> </keep-alive> </div> <template id="com1"> <p> {{title}}</p> </template> <template id="com2"> <p> {{title}}</p> </template> <script> Vue.component('myCom1',{ template:"#com1", data(){ return { title:'子组件1号', } } }) Vue.component('myCom2',{ template:"#com2", data(){ return { title:'子组件2号', } } }) var vm=new Vue({ el:'#app', data:{ tab:'myCom1' }, methods:{} }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件切换</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> 选择需要切换的组件： <input type="radio" name="change" value="1" @click="flag=true" checked=""/>1号 <input type="radio" name="change" value="2" @click="flag=false" />2号 <my-com1 v-if="flag"></my-com1> <my-com2 v-else="flag"></my-com2> </div> <template id="com1"> <p> {{title}}</p> </template> <template id="com2"> <p> {{title}}</p> </template> <script> Vue.component('myCom1',{ template:"#com1", data(){ return { title:'子组件1号', } } }) Vue.component('myCom2',{ template:"#com2", data(){ return { title:'子组件2号', } } }) var vm=new Vue({ el:'#app', data:{ flag:true }, methods:{} }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>父组件传递数据给子组件</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> {{msg}} <mycom v-bind:parentmsg="msg"></mycom> </div> <script> var vm=new Vue({ el:'#app', data:{ msg:'（父组件的data数据）' }, components:{ mycom:{ template:"<h3 @click='change'>子组件中获取的父组件数据：{{parentmsg}}---{{title}}</h3>", data(){ return{ title:'子组件数据标题', content:'子组件数据内容', } }, props:['parentmsg'], methods:{ change(){ this.parentmsg="子组件方法修改了值" } } }, } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子组件传递数据给父组件</title> <script src="js/vue.min.js"></script> </head> <body> <div id="test"> name数据：{{datamsgFromSon.name}}<br> age数据：{{datamsgFromSon.age}}<br> {{dataNumFromSon}} <!--父组件向子组件传递方法，使用的是事件绑定机制：v-on,当我们自定义了一个事件属性之后，那么子组件就能够通过某些方式来调用传递进去的方法--> <com2 v-on:func="show"></com2> </div> <template id="tmp1"> <div> <h3>这是子组件</h3> <input type="button" value="子组件按钮，调用父组件show方法" @click="myclick"> </div> </template> <script> var com2={ template:"#tmp1",//通过指定了一个Id，表示要去加载指定Id的template元素中的内容，当作组件的html结构 data(){ return{ sonmsg:{name:'lb',age:25} } }, methods:{ myclick(){ //当单击子组件的按钮，调用父组件的func方法 //$emit: 含义是触发、调用的意思 //下面自带两个参数,相当于是子组件向主组件传递参数 this.$emit('func',123,this.sonmsg) } } } var vm=new Vue({ el:'#test', data:{ dataNumFromSon:0, datamsgFromSon:{name:'wq',age:18} }, methods:{ show(data1,data2){ this.dataNumFromSon=data1 this.datamsgFromSon=data2 } }, components:{ com2 } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义组件</title> <script src="js/vue.min.js"></script> <style> input:focus{ background-color:black; color:white; } </style> </head> <body> <div id="app"> <p>页面载入时，第二个input 元素自动获取焦点：</p> <input /><br /><br /> <input v-focus /><br /><br /> <input > </div> <script> new Vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() el.value="获得焦点" } } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义组件</title> <script src="js/vue.min.js"></script> <style> input:focus{ background-color:black; color:white; } </style> </head> <body> <div id="app"> <p>页面载入时，第二个input 元素自动获取焦点：</p> <input /><br /><br /> <input v-focus /><br /><br /> <input > </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() el.value="获得焦点" } }) // 创建根实例 new Vue({ el: '#app' }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>钩子函数bind的引用</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app" v-runoob:hello.a.b="message"> </div> <script> Vue.directive('runoob', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = '钩子函数bind中各参数的取值：<br />' + '<b>name:</b> ' + s(binding.name) + '<br>' + '<b>value:</b> ' + s(binding.value) + '<br>' + '<b>expression:</b> ' + s(binding.expression) + '<br>' + '<b>argument:</b>' + s(binding.arg) + '<br>' + '<b>modifiers:</b>' + s(binding.modifiers) + '<br>' + '<b>vnode keys:</b>' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#app', data: { message: 'Hello Vue world!' } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的CSS过渡</title> <script src="js/vue.min.js"></script> <style> .v-enter,.v-leave-to{ opacity: 0; transform:translateX(180px); } .v-enter-active,.v-leave-active{ transition:all 1s ease; } </style> </head> <body> <div id="app"> <input type="button" value="显示/隐藏" @click="flag=!flag" /> <transition> <h3 v-if="flag" >{{msg}}</h3> </transition> </div> <script> new Vue({ el: '#app', data: { msg:'Hello Vue World!' , flag:true } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue使用第三方样式类库实现过渡</title> <link rel="stylesheet" href="./css/animate.min.css"> <script src="js/vue.min.js"></script> </head> <body> <div id="test"> <input type="button" value="togle" @click="flag=!flag" /> <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration={enter:400,leave:200}> <h3 v-if="flag">{{msg}}</h3> </transition> </div> <script> var vm=new Vue({ el:'#test', data:{ msg:'Hello Vue World!' , flag:false, } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>钩子函数实现半场动画</title> <style> .ball{ width:20px; height: 20px; border-radius: 50%; background-color: red; } </style> </head> <body> <div id="test"> <input type="button" value="start" @click="flag=!flag"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition> </div> <script src="js/vue.min.js"></script> <script> var vm=new Vue({ el:'#test', data:{ flag:false }, methods:{ beforeEnter(el){ el.style.transform="translate(50px,50px)" }, enter(el,done){ el.offsetWidth el.style.transform="translate(150px,450px)" el.style.transition="all 1s ease" //这里的doen(),其实就是afterEnter函数的引用，done表示立即调用afterEnter done() }, afterEnter(){ this.flag=false } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <input type='radio' name="r1" v-model='tab' value="mycom1">组件1 <input type='radio' name="r1" v-model='tab' value="mycom2">组件2 <keep-alive> <component v-bind:is='tab'></component> </keep-alive> </div> <template id="tmp1"> <h1>{{title}}</h1> </template> <template id="tmp2"> <h5>{{title}}</h5> </template> <script> Vue.component('mycom1',{ template:'#tmp1', data:function(){ return{ title:'组件1！！！' } } }) Vue.component('mycom2',{ template:'#tmp2', data:function(){ return{ title:'子组件2！！！' } } }) var vm=new Vue({ el:'#app', data:{ tab:'mycom1' } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件创建方法一</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <!--调用驼峰方式命名组件--> <my-com></my-com> </div> <script> var com1 = Vue.extend({ template : "<h3>使用vue.extend创建的组件1</h3>" }) //驼峰方式命名组件 Vue.component('myCom',com1) var vm=new Vue({ el:'#app', data:{ }, }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个Vue程序</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> 商品名称：<input type="text" name="name" v-model="name" /> 商品价格：<input type="text" name="price" v-model="price" /> <button @click="add()">增加商品</button> <table border="1px"> <template v-for="(v,index) in goods"> <tr style="background-color: orange;" v-if="index==0"> <td v-for="t in title">{{t}}</td> </tr> <tr> <td>{{index+1}}</td> <td>{{v.name}}</td> <td>{{v.price}}</td> <td><button @click="del(index)">删除</span></td> </tr> </template> </table> </div> </body> <script> new Vue({ el:'#app', data:{ title:[ '商品序号', '商品名称', '商品价格', '删除商品' ], goods:[ {name:'zhangsan',price:'18'}, {name:'wmx',price:'20'} ], name:'', price:'' }, methods:{ add:function(){ var str = {name:this.name,price:this.price}; this.goods.unshift(str); }, del:function(i){ this.goods.splice(i,1); } } }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue组件实验</title> <script src="js/vue.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .myTop{ margin-top: 10px; } .myLi{ margin-top: 10px; } ul li span{ cursor: pointer; } </style> </head> <body> <div class="container myTop"> <div id="app"> <div class="form-group"> <label>微博内容：</label> <textarea class="form-control" v-model="msg"></textarea> </div> <div class="form-group"> <input type="button" value="发表微博" class="btn btn-primary" @click="add()"> </div> <h2>微博列表：</h2> <ul class="list-group"> <li class="list-group-item myLi" v-for="(v,i) in article"> <span class="badge" @click="del(i)">删除</span> {{v}}</p> </li> </ul> </div> </div> </body> <script> new Vue({ el:'#app', data:{ article:[ "武汉加油", "中国加油！" ], msg:'' }, methods:{ add:function(){ //unshift() 把一个元素添加到数组的开头，并返回数组的新长度。 this.article.unshift(this.msg); }, del:function(i){ //splice() 删除第i个位置后的一个元素 this.article.splice(i,1); } } }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <my-hello></my-hello> <my-hello></my-hello> </div> <template id="tmp"> <!-- <template>必须有且只有一个根元素 --> <div> <h3>{{msg}}</h3> <ul> <li v-for="value in arr">{{value}}</li> </ul> </div> </template> </div> </body> <script> var vm=new Vue({ el:'#app', components:{ 'my-hello':{ name:'lb', template:'#tmp', data(){ return { msg:'武汉欢迎您！', arr:['lb','wq','lyd'] } } } } }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习</title> <script src="js/vue.min.js"></script> <style> /* div的初始状态*/ .box { width:100px; height: 200px; background-color:greenyellow; } /** * 定义进入动画和退出动画的过程 * 代表关注的是height的变化，动画的时间是5 */ .fade-enter-active, .fade-leave-active { transition: height 5s; } /* 定义进入动画的初始状态*/ .fade-enter { height: 0; } /* 定义进入动画的结束状态*/ .fade-enter-to { height: 200px; } /* 定义离开动画的初始状态*/ .fade-leave { height: 200px; } /* 定义离开动画的结束状态*/ .fade-leave-to { height: 0; } </style> </head> <body> <div id="app"> <button @click="myBtn">显示/隐藏切换</button> <!--一个命名为fade的<transition>标签包裹着类名为h的<div>--> <transition name="fade"> <div class="box" v-if="show"></div> </transition> </div> </body> <script> var vm=new Vue({ el:'#app', data:{ show:true }, methods:{ myBtn:function(){ this.show=!this.show } } }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="js/vue.min.js"></script> <style> #app ul{ list-style: none; } #app ul li{ width: 450px; } #app ul li ul li{ float: left; width: 30px; height: 20px; background-color: bisque; margin: 5px 10px; } </style> </head> <body> <div id="app"> <ul> <li v-for="(itemRow, indexRow) in 9" :key="indexRow"> <ul > <li v-for="(itemCol, indexCol) in 9" :key="indexCol"> {{indexRow}}行{{indexCol}}列 </li> </ul> <br> </li> </ul> 你单击了：{{info}} </div> <script> var vm = new Vue({ el: "#app", data: { info:"hello" } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <mycom></mycom> <mycom></mycom> <lbcom></lbcom> </div> <template id="temp1"> <div> <input type="button" value="加1" @click="inc"> <h1>{{count}},hello</h1> </div> </template> <script> Vue.component('mycom',{ template:'#temp1', data:function(){ return({count:88}) }, methods:{ inc:function(){ this.count++; } } }) var vm=new Vue({ el:'#app', data:{}, components:{ lbcom:{ template:'<h1>hello subComponent</h1>' } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> {{msg}} <maincomp></maincomp> </div> <template id="tmp"> <h1>{{mainmsg}}</h1> </template> <script> Vue.component('maincomp',{ template:'#tmp', data:function(){ return{ mainmsg:'world mainCompontent data' } } }) var vm=new Vue({ el:'#app', data:{ msg:'hello Main' } }) </script> </body> </html>