Vue学习
Posted maigy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习相关的知识，希望对你有一定的参考价值。
31、组件之使用内容分发slot：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件之使用内容分发slot</title> <style> </style> <script src="./lib/vue.js"></script> <link href="./lib/bootstrap.css" rel="stylesheet"> </head> <body> <div id="app"> <bs-panel> <!--把h1分发到子组件的 name="header"的slot 中--> <h1 slot="header">php开源框架</h1> <!--把p分发到子组件的 name="body"的slot 中--> <p slot="body"> 这是内容... </p> <!--因为 abc 没有指定分发到哪，则它会分发到没有定义 name 的 slot 中--> abc </bs-panel> </div> <!-- 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 --> <script type="text/x-template" id="bsPanel"> <div> <slot name="header">没有传递内容</slot> <slot name="body">没有传递内容</slot> <slot></slot> </div> </script> </body> <script> const bsPanel = { template: ‘#bsPanel‘ }; new Vue({ el: ‘#app‘, /*定义局部组件*/ components: {bsPanel} }) </script> </html>
32、组件之使用内容分发slot构建bootstrap面板panel：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件之使用内容分发slot构建bootstrap面板panel</title> 6 <style> 7 </style> 8 <script src="./lib/vue.js"></script> 9 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 10 </head> 11 <body> 12 <div id="app"> 13 <form action="" class="form-horizontal"> 14 <bs-panel> 15 <h1 slot="title">php开源框架</h1> 16 <!--这样分发的好处：就是不用重复书写bootstrap相同的样式了--> 17 <bs-input title="标题" value="后盾人" slot="body"></bs-input> 18 <bs-input title="点击数" value="100" slot="body"></bs-input> 19 </bs-panel> 20 </form> 21 </div> 22 <!-- 23 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 24 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 25 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 26 --> 27 <script type="text/x-template" id="bsPanel"> 28 <div class="panel panel-default"> 29 <div class="panel-heading"> 30 <h3 class="panel-title"> 31 <slot name="title"></slot> 32 </h3> 33 </div> 34 <div class="panel-body"> 35 <slot name="body"></slot> 36 </div> 37 </div> 38 </script> 39 <script type="text/x-template" id="bsInput"> 40 <div class="form-group"> 41 <label for="" class="col-sm-2 control-label">{{title}}</label> 42 <div class="col-sm-10"> 43 <input type="text" class="form-control" :value="value" /> 44 </div> 45 </div> 46 </script> 47 </body> 48 <script> 49 var bsPanel = { 50 template: ‘#bsPanel‘ 51 } 52 var bsInput = { 53 template: ‘#bsInput‘, 54 props:[‘title‘,‘value‘] 55 } 56 new Vue({ 57 el: ‘#app‘, 58 /*定义局部组件*/ 59 components: {bsPanel,bsInput} 60 }) 61 </script> 62 </html>
33、组件之父组件使用scope定义子组件模板结构实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件之父组件使用scope定义子组件模板结构实例</title> 6 <style> 7 </style> 8 <script src="./lib/vue.js"></script> 9 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 10 </head> 11 <body> 12 <div id="app"> 13 <list :data="news"> 14 <!-- 15 这里不能使用 div 或者别的标签，比如 span、h1等等，因为使用 div 标签，浏览器会去父组件中找 v 16 scope的作用：可以取出子组件定义的变量 17 --> 18 <template scope="v"> 19 <li> 20 <h1>{{v.field.title}}</h1> 21 <span>{{v.slist}}</span> 22 </li> 23 </template> 24 </list> 25 </div> 26 <!-- 27 为什么把模板放在 <script type="text/x-template" id="news"> 中，而不放在一个 div 中？ 28 答：如果放在div中，浏览器会识别解析它，所以在vue还没解析之前，浏览器就解析了，这样{{v.title}}就会原样输出了。 29 而定义在 <script type="text/x-template" id="news"> 中，x-template 会使浏览器忽略它，然后vue再解析它。 30 --> 31 <script type="text/x-template" id="list"> 32 <ul> 33 <!-- 34 slot里面定义的数据（v,可以定义多个变量）会发送给父组件的scope的变量中，即v中 35 : 的作用：绑定 v 是一个变量 36 --> 37 <slot v-for="v in data" :field="v" slist="你好"></slot> 38 </ul> 39 </script> 40 41 </body> 42 <script> 43 const list = { 44 template: ‘#list‘, 45 props:[‘data‘] 46 }; 47 new Vue({ 48 el: ‘#app‘, 49 /*定义局部组件*/ 50 components: {list}, 51 data: { 52 news: [ 53 {title:‘高等代数‘}, 54 {title:‘数学分析‘} 55 ] 56 } 57 }) 58 </script> 59 </html>
34、组件之使用动态组件灵活设置网页布局：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件之使用动态组件灵活设置网页布局</title> 6 <style> 7 </style> 8 <script src="./lib/vue.js"></script> 9 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 10 </head> 11 <body> 12 <div id="app"> 13 <div :is="formType"></div> 14 <input type="radio" v-model="formType" value="testInput" /> 文本框 15 <input type="radio" v-model="formType" value="testTextarea" /> 文本域 16 </div> 17 </body> 18 <script> 19 const testInput = { 20 template: "<div><input /></div>" 21 }; 22 const testTextarea = { 23 template: "<div><textarea></textarea></div>" 24 }; 25 new Vue({ 26 el: ‘#app‘, 27 /*定义局部组件*/ 28 components: {testInput,testTextarea}, 29 data: { 30 formType: ‘testInput‘ 31 } 32 }) 33 </script> 34 </html>
35、css过渡动作实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css过渡动作实例</title> 6 <style> 7 /* 8 v 为变量名 9 .v-enter:定义刚进来时的类样式 10 .v-enter-active:定义进来过程中的类样式 11 .v-enter-to:定义进来后的类样式 12 .v-leave-to:定义出去后的类样式 13 .v-leave-active:定义出去过程中的类样式 14 .v-leave:定义刚出去的类样式 15 */ 16 .test-enter,.test-leave-to { 17 opacity: 0; 18 } 19 .test-enter-to { 20 color: green; 21 border: 1px solid orange; 22 } 23 .test-enter-active,.test-leave-active { 24 color: aqua; 25 transition: all 2s; 26 } 27 test-leave { 28 color: blue; 29 } 30 </style> 31 <script src="./lib/vue.js"></script> 32 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 33 </head> 34 <body> 35 <div id="app"> 36 <button @click="type=!type">切换</button> 37 <transition name="test"> 38 <h1 v-if="type">css过渡动作实例</h1> 39 </transition> 40 </div> 41 </body> 42 <script> 43 new Vue({ 44 el: ‘#app‘, 45 data: { 46 type:false 47 } 48 }) 49 </script> 50 </html>
36、使用animate动画库控制:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用animate动画库控制</title> 6 <style> 7 /* 8 v 为变量名 9 .v-enter:定义刚进来时的类样式 10 .v-enter-active:定义进来过程中的类样式 11 .v-enter-to:定义进来后的类样式 12 .v-leave-to:定义出去后的类样式 13 .v-leave-active:定义出去过程中的类样式 14 .v-leave:定义刚出去的类样式 15 */ 16 </style> 17 <script src="./lib/vue.js"></script> 18 <link href="./lib/animate.css" rel="stylesheet" /> 19 </head> 20 <body> 21 <div id="app"> 22 <button @click="type=!type">切换</button> 23 <transition enter-active-class="animated slideInDown" leave-active-class="animated zoomOut"> 24 <h1 v-if="type">css过渡动作实例</h1> 25 </transition> 26 </div> 27 </body> 28 <script> 29 new Vue({ 30 el: ‘#app‘, 31 data: { 32 type:false 33 } 34 }) 35 </script> 36 </html>
37、使用animation与transform实现vue的动画效果:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用animation与transform实现vue的动画效果</title> 6 <style> 7 /* 8 v 为变量名 9 .v-enter:定义刚进来时的类样式 10 .v-enter-active:定义进来过程中的类样式 11 .v-enter-to:定义进来后的类样式 12 .v-leave-to:定义出去后的类样式 13 .v-leave-active:定义出去过程中的类样式 14 .v-leave:定义刚出去的类样式 15 */ 16 .test-enter-active { 17 animation: show-in 1s; 18 transition: all 1s; 19 } 20 .test-leave-active { 21 animation: hide-out 1s; 22 transition: all 1s; 23 } 24 .test-enter,.test-leave-to { 25 opacity: 0; 26 } 27 @keyframes show-in { 28 0% { 29 transform: translate(200px, 0); 30 } 31 100% { 32 transform: translate(0,0px); 33 } 34 } 35 @keyframes hide-out { 36 0% { 37 transform: translate(0,0px); 38 } 39 100% { 40 transform: translate(200px,0); 41 } 42 } 43 </style> 44 <script src="./lib/vue.js"></script> 45 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 46 </head> 47 <body> 48 <div id="app"> 49 <button @click="type=!type">切换</button> 50 <transition name="test"> 51 <h1 v-if="type">css过渡动作实例</h1> 52 </transition> 53 </div> 54 </body> 55 <script> 56 new Vue({ 57 el: ‘#app‘, 58 data: { 59 type:false 60 } 61 }) 62 </script> 63 </html>
38、使用js库控制vue过渡动作实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用js库控制vue过渡动作实例</title> 6 <style> 7 /* 8 v 为变量名 9 .v-enter:定义刚进来时的类样式 10 .v-enter-active:定义进来过程中的类样式 11 .v-enter-to:定义进来后的类样式 12 .v-leave-to:定义出去后的类样式 13 .v-leave-active:定义出去过程中的类样式 14 .v-leave:定义刚出去的类样式 15 */ 16 </style> 17 <script src="./lib/vue.js"></script> 18 <script src="./lib/velocity.js"></script> 19 </head> 20 <body> 21 <div id="app"> 22 <button @click="type=!type">切换</button> 23 <!-- 24 @before-enter：定义进来动画的效果函数 25 @enter：定义进来这个过程的动画的效果函数 26 @leave：定义离开这个过程的动画的效果函数 27 :css：禁用掉css的样式 28 --> 29 <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"> 30 <h1 v-if="type">css过渡动作实例</h1> 31 </transition> 32 </div> 33 </body> 34 <script> 35 new Vue({ 36 el: ‘#app‘, 37 data: { 38 type:false 39 }, 40 methods: { 41 /*el：定义样式的元素*/ 42 beforeEnter(el){ 43 el.style.opacity=0; 44 }, 45 /*done：进来后的回调函数，必须使用done告诉vue动画执行完了*/ 46 enter(el,done){ 47 /*velocity.js库的函数*/ 48 Velocity(el,{opacity:1},{duration: 2000, complete: done}) 49 }, 50 leave(el,done){ 51 Velocity(el,{opacity:0,rotateZ:‘-90deg‘},{duration: 2000,complete: done}) 52 } 53 } 54 }) 55 </script> 56 </html>
39、自定义指令详解：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定义指令详解</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/velocity.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <span v-star="color">标题</span> 12 <input type="text" v-model="color" v-focus> 13 <span v-end="color">内容</span> 14 </div> 15 </body> 16 <script> 17 /* 18 指令的钩子函数： 19 bind:指令绑定的时候调用 20 inserted:指令插入父元素的时候调用 21 update:绑定的元素更新的时候调用 22 */ 23 /*定义全局自定义指令*/ 24 Vue.directive(‘end‘,{ 25 /* 26 el:用来设置绑定元素的样式 27 bind:用来获取绑定元素的属性 28 */ 29 bind(el,bind) { 30 const color = bind.value ? bind.value : ‘red‘; 31 el.style.cssText = "color:"+color; 32 }, 33 update(el,bind) { 34 const color = bind.value ? bind.value : ‘red‘; 35 el.style.cssText = "color:"+color; 36 } 37 }); 38 39 new Vue({ 40 el: ‘#app‘, 41 data: { 42 color:‘red‘ 43 }, 44 /*自定义局部指令*/ 45 directives: { 46 // bind 和 update 的结合 47 star(el,bind) { 48 const color = bind.value ? bind.value : ‘red‘; 49 el.style.cssText = "color:"+color; 50 }, 51 focus: { 52 inserted(el,bind) { 53 el.focus(); 54 } 55 } 56 } 57 }) 58 </script> 59 </html>
40、vue-router之实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之实例</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 12 router-link: 定义路由的链接的标签 13 to: 定义跳转到那个组件 14 router-view：展示组件的标签 15 --> 16 <router-link to="/php">PHP</router-link> 17 <router-link to="/cms">CMS</router-link> 18 <router-view></router-view> 19 </div> 20 </body> 21 <script> 22 // 定义组件 23 const php = { 24 template: "<h1>你好，世界！</h1>" 25 }; 26 const cms = { 27 template: "<h1>我来了，你呢？</h1>" 28 }; 29 //定义路由器，然后把组件交给路由器 30 /*第一种定义方式*/ 31 let route = new VueRouter({ 32 routes: [ 33 {path: ‘/php‘, component: php}, 34 {path: ‘/cms‘, component: cms} 35 ] 36 }); 37 /*第二种定义方式*/ 38 let routes=[ 39 {path: ‘/php‘, component: php}, 40 {path: ‘/cms‘, component: cms} 41 ]; 42 //routes:routes可以写成routes 43 // let router = new VueRouter({routes:routes}); 44 let router = new VueRouter({routes}); 45 new Vue({ 46 el: ‘#app‘, 47 //把路由器注入主组件中，这样才有效果 48 /* 49 * 注意：router 与 routes 的区别： 50 * router 是一个机制，相当于一个管理者，它来管理路由。 51 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 52 * route，它是一条路由。 53 * */ 54 //如果 router的名称和router的一样可以直接写成 router 即可 55 // router: router 56 router 57 }) 58 </script> 59 </html>
以上是关于Vue学习的主要内容，如果未能解决你的问题，请参考以下文章