Vue_02笔记

目录

 

1.组件

   1.什么是组件:

   2.能够干什么事情:

   3.分类:

   4.模板---->在组件中使用

2:路由:

  1.什么是路由:

  2.为什么需要:

  3.怎么搞:

  4.具体步骤:

---

1.组件

   1.什么是组件:

在vue中,就是我们自定义的一个html标签,一堆代码的打包,可以复用

   2.能够干什么事情:

 

可以复用

   3.分类:

 

      全局组件和局部组件最大的区别:在于作用域,全局组件是可以被所有挂载vue的标签使用,

      局部组件只能在当前挂载的标签中使用.

 

       使用步骤:

         ①:定义

         ②:使用

 

        注意事项:

           ①:template中的标签,必须有一个根节点.<h1></h1>

           ②:组件命名:使用驼峰式不行的,建议直接使用全小写;或者单词之间使用-:wb-component

             尽量使用英文.

           ③:组件的data必须使用函数.

           ④:methods和vue对象中的使用方式时一样的

   4.模板---->在组件中使用

     模板定义的两种方式:

           ①:直接在html中写:

             <template id="">html代码</template>

           ②:一个js:

              <script type="text/template" id="">html代码</script>

     语法:

     全局组件:

       定义语法:  Vue.component("componentName",{template:"html内容"});

         完整定义:

           Vue.component("wb-xxx",{

                   template:"<div><p>你是第二p{{cd}}{{name}}{{sayHello('666')}}</p><p>你是p3</p></div>",

                   data:function(){

                       // return返回:返回的是json,以前的data是怎么写,这个的json就怎么写

                       return {"cd":"组件","name":"yyn"};

                   },

                   //methods和vue对象中的使用方式时一样的

                   methods:{

                       sayHello:function(n){

                           alert(n)

                       }

                   }

               });

       使用:<componentName></componentName>

     局部组件:某个vue对象中,只有这一个vue对象中使用:

        new Vue({

          el:"",

          data:{},

          components:{

            "com1":{

              template:"",

              data:function(){

              return {};

              },

              methods:{

                funName1:function(){

                },

                funName2:function(){

                }

              }

 

            }

          }

        });

2:路由:

  1.什么是路由:

url地址和对应的资源映射关系处理,地址和资源唯一映射的.

  2.为什么需要:

  3.怎么搞:

    由于路由不是vue官方的,是第三方插件,单独下载资源;

    路由是在vue上玩,肯定需要vue的环境;

    引入路由的依赖;

    路由也想成一个标签:是对地址和资源的映射:有地址和资源;

路由的目的:是点击地址,找到对应的资源:资源要在页面显示,所以,你应该告诉他在哪里显示;

 

  4.具体步骤:

     ①:定义一个路由

         path:地址,component:组件

     ②:把这个路由挂载在一个Vue对象上

     ③:在挂载了Vue的html标签中使用路由:

        <router-link to="">好啊</router-link>

        <router-view ></router-view>