31、组件之使用内容分发slot：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之使用内容分发slottitle>
<style>
style>
<script src="./lib/vue.js">script>
<link href="./lib/bootstrap.css" rel="stylesheet">
head>
<body>
<div id="app">
<bs-panel>
<h1 slot="header">php开源框架h1>
<p slot="body">
这是内容...
p>
abc
bs-panel>
div>
<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面板paneltitle> 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 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 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 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 31 <script type="text/x-template" id="list"> 32 <ul> 33 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: "" 21 }; 22 const testTextarea = { 23 template: "" 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 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 16 <router-link to="/php">PHProuter-link> 17 <router-link to="/cms">CMSrouter-link> 18 <router-view>router-view> 19 div> 20 body> 21 <script> 22 // 定义组件 23 const php = { 24 template: "你好，世界！
" 25 }; 26 const cms = { 27 template: "我来了，你呢？
" 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>