复习
- Vue单文件方式 xxx.vue
- 1：准备好配置文件 package.json（包描述文件&&封装命令 npm run dev）+ webapck.config.js（打包的配置文件）
- 2：创建index.html（单页应用的页）
- 3：创建main.js（入口文件）
- 4：引入vue和相关的文件xxx.vue
- 5：new Vue(options)
- 6：options（选项）
- data
- methods
- components （组件内声明子组件）
- props
- 7：实例
- 在组件内（xxx.vue）中的this
- new Vue()
- 事件
- this.$on(事件名，回调函数(参数))
- this.$emit(事件名,数据)
- this.$once(事件名，回调函数(参数)) 之触发一次
- this.off(事件名) 取消事件
- 全局
- Vue.component('组件名',组件对象) 在哪里都可以使用
- 组件传值
- 父传子
- 常量 title="xxx" 子组件声明接收参数 props:['xxx']
- 变量 :title="xxx" 子组件声明接收参数 props:['xxx']
- 子传父 vuebus（只能是同一辆车）
- 先停车到父组件 on一下
- 再开车到子组件；’如果需要的话，emit一下，触发上述事件的回调函数
- 父传子
过滤器
- content|过滤器，vue中没有提供相关的内置过滤器，可以自定义过滤器
- 组件内的过滤器 + 全局过滤器
- 组件内的过滤器就是options中的一个filters的属性（一个对象）
- 多个key就是不同过滤器名，多个value就是与key对应的过滤方式函数体
Vue.filter(名,fn)
- 组件内的过滤器就是options中的一个filters的属性（一个对象）
- 总结
- 全局：范围大，如果出现同名时，权力小
- 组件内：权力大，如果出现同名时，范围小
获取DOM元素
- 救命稻草 前端框架就是为了减少DOM操所，但是特定情况下，也给你留了后门
- 在指定元素上，添加ref='名称A'
- 在获取的地方加入 this.$refs.名称A
- 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
- 可以直接操作
- 如果ref放在了组件对象上，获取的就是组件对象
- 1：获取到DOM对象，通过this.refs.sub.$el,进行操作
- 对应的事件
- created 完成了数据的初始化，此时还未生辰DOM，无法操作DOM
- mounted 将数据装载到了DOM之上，可以操作DOM
- 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
mint-ui
- 饿了么，element-ui在pc端使用的
- mint-ui 基于 Vue.js 的移动端组件库
- 注意：
- 如果是全部安装的方式
- 1:在template中可以直接使用组件标签
- 2:在script中必须要声明，也就是引入组件对象（按需加载）
- 如果是全部安装的方式
wappalyzer
- 获取到当前网站的使用的技术
- https://wappalyzer.com/download
vue-router
- 前端路由 核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
- ui-router：锚点值改变，如何获取模板？ajax
- vue中，模板数据不是通过ajax请求来，而是调用函数获取到模板内容
- 核心：锚点值改变
- 以后看到vue开头，就知道必须Vue.use()
- vue的核心插件
- vue-router 路由
- vuex 管理全局共享数据
- 使用方式
- 1：下载
npm install vue-router -S - 2：在main.js中引入
import VueRouter from 'vue-router' - 3：安装插件
Vue.use(VueRouter) - 4：创建路由对象并配置路由规则
let router=new VueRouter({routers:[path:'/home',component:Home]})
- 5：将其路由对象传递Vue的实例，options中
- options 中加入
router:router
- options 中加入
- 6：在app.vue中留坑
<router-view></router-view>
- 1：下载
vue-router
- 需求：通过a标签点击，做页面数据的跳转
- 使用router-link标签
- 1：去哪里
<router-link to="/beijing">去北京</router-link> - 2：去哪里
<router-link :to="{name:'bj'}">去北京</router-link>- 更利于维护，如果修改了path，只修改路由配置中的path，该a标签会根据修改后的值生成href属性
- 1：去哪里
eg
main.js
//引入Vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入app.vue
import App from './components/app.vue';
import Music from './components/music.vue';
import Movie from './components/movie.vue';
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
//routers
routes: [{
name: 'music',
path: '/music',
component: Music
}, {
name: 'movie',
path: '/movie',
component: Movie
}]
});
//new Vue
new Vue({
el: '#app',
//让Vue知道路由规则
router: router,
render: c => c(App)
})
app.vue
<template>
<div>
<div class="h">
头部
<!-- a标签 -->
<a href="#/music">音乐</a>
<a href="#/movie">电影</a>
<!-- to:去哪里 -->
<router-link :to="{name:'music'}">音乐</router-link>
<router-link :to="{name:'movie'}">电影</router-link>
<!-- 也可以根路径用 -->
<router-link to="/music">音乐</router-link>
<router-link to="/movie">电影</router-link>
</div>
<router-view class="b"></router-view>
<div class="f">底部</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
}
}
}
</script>
<style type="text/css" scoped>
.h {
height: 100px;
background: yellowgreen;
}
.b {
height: 100px;
background: skyblue;
}
.f {
height: 100px;
background: hotpink;
}
</style>
参数 router-link
- 在vue-router中，有两大对象被挂载到了实例this
- $router(只读、具备信息的对象)、$router(具备功能函数)
- 查询字符串
- 1：去哪里
<router-link :to="{name:'detail',query:{id:1}}">xxx</router-link> - 2：导航(查询字符串path不用改)
{name: 'detail',path: '/detail',component: 组件} - 3：去了干嘛？获取路由参数(要注意是query还是params)
this.$route.query.id
- 1：去哪里
- path方式
- 1：去哪里
<router-link :to="{name:'detail',params:{name:1}}">xxx</router-link> - 2：导航(path方式需要在路由规则上加上/:xxx)
{name: 'detail',path: '/detail/:name',component: 组件}- 3：去了干嘛？获取路由参数(要注意是query还是params)
this.$route.params.name
- 1：去哪里
编程导航
- 不能保证用户一定会点击某些按钮
- 并且当前操作，除了路由跳转以外，还有一些别的附加操作
- this.$router.go 根据浏览器记录 前进1 后退-1
- this.$router.push(直接跳转到某个页面显示)
- push参数：
- 字符串/xxx
- 对象：
{name:'xxx',query:{id:1},params:{name:2}}
- push参数：
复习
- 过滤器，全局，组件内
- 获取DOM元素，在元素上 ref="xxx"
- 在代码中通过this.$ref.xxx获取其元素
- 原生DOM标签获取就是原生DOM对象
- 如果是组件标签，获取的就是组件对象 $el继续再获取DOM元素
- 声明周期事件(钩子函数)
- created：数据的初始化，DOM没有生成
- mounted：将数据装载到DOM元素上，此时有DOM
- 路由
window.addEventListener('hashchange',fn)- 根据你放
<router-link></router-link>作为DOM上的标识 - 最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上
重定向和404
- 进入后，默认就是/
- 重定向
{path:'/',redirect:'/home'}{path:'/',redirect:{name:'home'}}
- 404:在路由规则的最后一个规则
- 写一个很强大的匹配
{path:'*',component:notFoundVue}
多视图
- 以前可以一次放一个坑 对应一个路由和显示一个组件
- 一次行为 ＝ 一个坑 ＋ 一个路由 ＋ 一个组件
- 一次行为 ＝ 多个坑 ＋ 一个路由 ＋ 多个组件
- components 多视图 是一个对象 对象内多个key和value
- key 对应视图的name属性
- value 就是要显示的组件对象
- 多视图name
-
<router-view></router-view>->name就是default -
<router-view name="xxx"></router-view>->name就是xxx
-
嵌套路由
- 用单页去实现多页应用 复杂的嵌套路由
- 开发中一般会需要使用
- 视图包含视图
- 路由父子及关系路由
//其组件内包含着第一层的router
{
name:'music',
path:'/music',
component:Music,
children:[ //子路由的path /就是绝对路径 不/就是相对路径
{name:'music.oumei',path:'oumei',component:Oumei},
{name:'music.guochan',path:'guochan',component:Guochan}
//name:'music_oumei',格式不固定，只是为了表明父子级关系
]
}
vue-resource(了解)
- 可以安装插件，早期vue团队开发的插件
- 停止维护了，作者推荐使用
- options预检请求，是当浏览器发现跨域+application/json的请求，就会自动发起
- 并且发起的时候携带了一个content-type的头
axios
- 中文文档1
- 中文文档2
- post请求的时候，如果数据是字符串 默认头就是键值对 否则是对象就是application/json
- this.$axios.get(url,options)
- this.$axios.post(url,data,options)
- this.$axios.get(url,options)
- opions:{params:{id:1},headers:{'content-type':'xxx'}，baseURL：''}
- 全局默认设置 Axios.default.baseURL='xxx'
- 针对当前这一次请求的相关设置
如何练习
- 1：路由核心
- 路由基本使用
- 任选一种路由参数的方式（查询字符串）
- 404（路由匹配规则）
- 路由嵌套
- 编程导航
- 2：http请求
- axios 发起get/post请求（300）
- axios挂载属性的方式
Vue.prototype.$axios=Axios
