一、生命周期
参考网址: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}}
这里是内部组件
{{qian}}
三、插槽
参考网址: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、具名插槽
当需要多个插槽时,可以使用
header
image.png
4、作用域插槽
可以先看一个例子,以便更好的理解作用域插槽的作用
在子组件中使用v-for创建一个列表循环,然后在父组件中通过子组件标签child调用,
image.png
调用了两次child组件,因为调用的是同一个子组件,所以显示的内容完全一样。如何在每次调用时能有各自的渲染效果?这就是作用域插槽的用武之地。
作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽,这个插槽为作用域插槽,该插槽必须放在template标签里面,同时声明从子组件接收的数据放在一个自定义属性内,并定义该数据的渲染方式。通过下列展示作用域插槽的使用方式:
{{props.value}} <--!定义使用渲染方式-->
{{props.value}}
image.png
* 插槽案例:
here is the best place!---{{pm}}
这里是组件
{{msg}}
四、路由
参考网址https://cn.vuejs.org/v2/guide/routing.html
什么是路由?
- 我们认识的路由:
进入到网站的根目录,然后根据文件夹的名称或者文件名去找到对应的文件,然后运行
后端的路由
指网络上的某一个资源URL
后端框架的出现,以及安全性的考虑,后端一般做单一的入口
例如:http://localhost/vue_api/index.php?m=api&a=getlist
单一的入口是指在这个入口文件中,通过路由参数的方式(m=api&a=getlist)将请求分发给不同的资源或者文件处理
前端路由
锚点实现的路由
前端的路由是不会发生页面的刷新或者页面的重启请求的
hash值的变化是不会造成页面重新请求的
* 路由案例:登录注册
登录
注册