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学习的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家