组件

什么是组件：组件的出现就是为了拆分vue实例的代码量的，能够让我们以不同的组件划分不同的功能模块

• 组件化和模块化的区别

1. 模块化是从代码的逻辑角度进行划分的：方便代码的分层开发，保证每个功能模块的功能单一
2. 组件化是从ui界面的角度进行划分的；方便ui组件的重用

在vue中怎么创建组件

1. 创建组件的第一种方法

    var com1 = Vue.extend({
        template:"<h3>这是一个组件</h3>"
     })
     Vue.component('myCom1',Vue.extend({
        template:"<h3>这是一个组件</h3>"
    }));

2. 第二种定义全局组件的方法

  Vue.component('myCom1',{
        template:"<h3>这是一个组件</h3>"
    })

3. 第三种定义全局组件的方法

 <template id="temp1">
     <div>
         <h3>这是一个文字</h3>
     </div>
 </template>   

   // 这是创建全局组件的第三种方式
    //  <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->
  Vue.component("mycom3",{
            template:"#temp1"
        })

4. 创建组件的第四种方式，这种方式是通过vue实例中的render这个对象中的方法把自定义的组件放在这个vue绑定的元素上

var temp = {
            template:"<h1>这是一个组件</h1>"
        }
         var vm = new Vue({
        el:"#app",
        data:{

        },
        methods:{

        },//用render创建组件的方式
        render:function(createE){
          return createE(temp);
        }

• 注意在定义组件的时候，组件的名称可以使用驼峰写法 ，但是使用驼峰写法的时候，在html文档当作标签调用的时候，应该使用把驼峰大写字母换成小写字母加个-

目前所学的vue提供的标签

• component (用这个标签展示组件,在这个标签里面添加 :is="组件名"来绑定组件)
• template (这个标签是把组件的内容在外面书写，可以有提示)
  通过使用template这个标签来实现的组件，在这个标签中有个id属性，这个id与在component里面的template:"#id"的id保持一致
• transition (用这个标签来包裹所需展示动画的dom元素，这个dom元素不是通过v-for创建的)
• transition-group (用这个标签来包裹通过v-for创建出来的dom元素)

组件的切换时候的动画

• 把展示组件的标签component放在transition这个标签中，然后在style中设置动画的样式，注意这个transition标签中可以加入mode属性，来设置动画的进入先后顺序

父组件向子组件传值的问题

• 在子组件的内部是不能直接调用父组件里面的数据的，如果想要使用父组件里面的数据，想要使用父组件的值，使用下面办法

1. 在父组件的里面绑定一个自定义的属性（parentmsg）：属性值为子组件所要的父组件的数据（msg）

例如： <com1 :parentmsg="msg"></com1> 这个msg是父组件里面的数据

2. 在子组件内部有一个props属性，这个属性是一个数组，在这个属性里面放入自定义的属性的名称

例如 props:['parentmsg']

3. 在子组件调用父组件的数据时，调用的是自定义属性的名称

例如 template:"<p>这是一段文字--{{parentmsg}}</p>",

• 子组件里面的data中的数据和通过父组件传递的数据的区别
  1.子组件的data的数据
  是可读可写的，但是父组件传递的数据是只能读取的（这个操作是子组件的）

父组件向子组件传递方法的问题：

• 父组件向子组件传递方法使用的是事件绑定机制

例如： <com1 :func="show"></com1>

• 在子组件中需要调用父组件方法的地方通过

例如 this.$emit("func") 调用，这个时候可以在emit中传递参数，但是这个参数在父组件的方法里面应该存在
例如 show(data,data2) this.$emit("func",data,data2)

vue中获取dom元素和组件的操作

• 在vue中不能同通过原生js那样操作dom元素，想要操作dom元素，那么用下面方法

在html标签中 加入一个ref属性(这个属性后面要有一个值)，这样可以在vue中通过调用this.$refs.ref的属性值就可以获得这个dom元素

• 通过ref也可以调用组件的数据和方法(它和调用dom元素的方法是一样的)

首先在这个组件里面添加ref=“ref值”,然后在调用的时候通过this.$refs.ref值就可以得到这个组件

vue中路由的基本使用

在用vue的时候会有这样的需求，比如一个管理系统，点了左边的菜单栏，右边跳转到一个新的页面中，而且刷新的时候还会停留在原来打开的页面，这样我们可以理由路由来实现

1. 使用路由的步骤

• 1. 首先下载js文件vue-router
• 2. 创建一个路由对象(当导入一个包，在window全局对象中，就有了一个路由的构造函数（VueRouter）)，我们可以new一个路由对象

var routerObj = new VueRouter({
routes:[//路由匹配规则,每一个路由规则都是一个对象，这个规则对象上必须有两个属性
//1.属性是path 表示j监听那个路由地址
//2.component 表示如果路由是前面匹配到的path,则展示component属性对应的那个组件
{ path: ‘’, component: },
]
})
})

• 3. 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件

 var vm = new Vue({
    el:"#app",
    data:{

    },
    methods:{

    },
    router: routerObj //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
});    

1. 上面三步只是配置好了路由，这是应该html中放入一个容器就可以显示了

2. 它相当一个占位符，路由规则匹配到的组件就会现在在这里， 是用来渲染通过路由映射过来的组件

3. 登录 这个组件和上面这个组件的区别是 他可以被渲染成一个a标签，到时候点击触发组件跳转，与router-view标签配合使用

4. 这个router-link标签被渲染成一个a标签，他在网页中有vue给渲染的class,我们可以通过复制拿到这个类，然后设置样式

5. 我们也可以VueRouter中的这个 linkActiveClass: 'myactive’属性自定义网页中vue给渲染的class类名，然后设置样式

这个路由默认的时候只是存在一个空的页面，这是我们需要用 { path: ‘/’, redirect:"/lagin" },这个语句实现地址的重定向

在路由中的传值问题

登录如果是这个方式的传值用this.$route.query.id接受(这种传值方法不用改变路由规则)path{:}^{\prime }/login/:id/:nam{e}^{\prime },component:login,this.$route.params.id 如果这种传值方式的话路由规则需要改变，并且接受方法也变

路由的嵌套问题

• 如果在一个路由种想要在存放其他的路由要使用路由嵌套

1. 用法： 首先存在一个路由

     var account = {
        template:"#temp"
    }
    var login = {
        template:"<h3>登录</h3>"
    }
    var register = {
        template:"<h3>注册</h3>"
    }
        var account = {
            template:"#temp"
        }
        var router = new VueRouter({
    routes:[
        {path:'/account',component:account,
         children:[{path:'login',component:login},
         {  path:'register',component:register}
        ]
    },
      ]
  })

2. 在这个路由中存在children这个属性,如下面代码把子路由放入进去就行

  routes:[
        {path:'/account',component:account,
         children:[{path:'login',component:login},
         {  path:'register',component:register}
        ]