Vue.js day5（2019.5.22）

一、生命周期

参考网址：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

二、定义Vue组件

• 组件基础

参考网址：https://cn.vuejs.org/v2/guide/components.html

* 案例：列表评论

    
    
    
    
    
    


    

        //调用组件模板
        
        

            

                {{item.name}}
                {{item.content}}
            
        
         
    
    //调用组件
    
    
    

* 父组件与子组件相互调用复习案例：

    
    
    
    



    {{msg}}
    

三、插槽

参考网址：https://cn.vuejs.org/v2/guide/components-slots.html

1、Vue中插槽的作用和使用方法

参考网址：https://blog.csdn.net/willard_cui/article/details/82469114

定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的标签中定义的内容不会被渲染，

        
            需要插槽才能渲染的内容
            
Dell
            
Lee
        
    
    

image.png

2、插槽默认内容

插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。如果父组件为这个插槽提供了内容，则默认的内容会被替换掉

父组件提供插槽内容   
 

        
           
Hello
        
    
    

image.png

3、具名插槽

当需要多个插槽时，可以使用的特性：name。这个特性可以用来定义额外的插槽。

        
            
header
            
footer
        
    
    

image.png

4、作用域插槽

可以先看一个例子，以便更好的理解作用域插槽的作用

在子组件中使用v-for创建一个列表循环，然后在父组件中通过子组件标签child调用，

image.png

调用了两次child组件，因为调用的是同一个子组件，所以显示的内容完全一样。如何在每次调用时能有各自的渲染效果？这就是作用域插槽的用武之地。

作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。通过下列展示作用域插槽的使用方式：

image.png

* 插槽案例：

    
    
    
    



    
        
        here is the best place！---{{pm}}
    

四、路由

参考网址https://cn.vuejs.org/v2/guide/routing.html

什么是路由？

• 我们认识的路由:
  进入到网站的根目录，然后根据文件夹的名称或者文件名去找到对应的文件，然后运行

后端的路由

指网络上的某一个资源URL
后端框架的出现，以及安全性的考虑，后端一般做单一的入口
例如：http://localhost/vue_api/index.php?m=api&a=getlist
单一的入口是指在这个入口文件中，通过路由参数的方式（m=api&a=getlist）将请求分发给不同的资源或者文件处理

前端路由

锚点实现的路由
前端的路由是不会发生页面的刷新或者页面的重启请求的
hash值的变化是不会造成页面重新请求的

* 路由案例：登录注册

    
        
        
        
        
    
    
        

            
            登录
            注册