web前端开发框架——Vue的知识总结（2）

一、简介

Vue.js的定位是一个渐进式框架 前端三大mvvm框架之一，Vue上手比较快，只要你会HTML、css、js等一些基础就能轻松做开发。 vue官方文档

二、导入Vue.js库

<script src="vue.js"></script>

三、核心技术

1.cli方式写组件

组件的构成
	template模板
	script业务逻辑
	style样式
组件的使用
	1.创建组件.vue
	2.导入并注册组件
	3.使用组件

2.路由与视图

1）页面.vue

2）配置router.js

path:"/cart"	路由对应的地址
name:"cart"		路由的名称
compon:Cart		路由地址对应的组件

3）路由指令

router-link		路由链接(切换)		
to="路由地址"	切换的地址
router-view		路由视图显示url对应的组件

4）路由的参数

1.router.js	
	path:"/product/:id"
2.组件内部获取到参数
	{{$route.params.id}}

5）路由编程跳转

router.js的配置
	path:"product/:id"
组件内部获取到参数
	{{$route.params.id}}

6）子路由

目标
	article
		comment评论
		detail参数
{path:"article",
component:"Article",
children:[{path:"comment",component:Comment}]}

Article.vue
	<router-link to ="/article/comment"评论</router-link>
	<router-view/>

7）重定向

{path:"",redirect:"comment"}

8）激活class

router-link-exact-active	path和当前的url地址路径 完全精确匹配
router-link-exact			path和url地址栏部分匹配

9）路由的别名

alias:['/home','/index']

10）路由的404匹配

{path:"*"}					配置放在最后面

2.vue中使用ajax

1）安装

yarn and axios

2）挂载到vue

import axios from 'axios'
Vue.prototype.$http=axios

3）使用

this.$http.get(url)
.then(res=>{})

4）目标 模拟段子app

5）说明

咱们后端同header头信息 允许跨越
目标：点完更多加载新的一页
getJok()
	1.url要动态传入参数page
	2.数据jok和以前的合并concat
	3.更新数据page++