Vue入门笔记 day2

复习

• 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)
• 总结
  • 全局：范围大，如果出现同名时，权力小
  • 组件内：权力大，如果出现同名时，范围小

获取DOM元素

• 救命稻草 前端框架就是为了减少DOM操所，但是特定情况下，也给你留了后门
• 在指定元素上，添加ref='名称A'
• 在获取的地方加入 this.$refs.名称A
  • 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
    • 可以直接操作
  • 如果ref放在了组件对象上，获取的就是组件对象
    • 1：获取到DOM对象，通过this.refs.sub.$el,进行操作
  • 对应的事件
    • created 完成了数据的初始化，此时还未生辰DOM，无法操作DOM
    • mounted 将数据装载到了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
  • 6：在app.vue中留坑 <router-view></router-view>

vue-router

• 需求：通过a标签点击，做页面数据的跳转
• 使用router-link标签
  • 1：去哪里 <router-link to="/beijing">去北京</router-link>
  • 2：去哪里 <router-link :to="{name:'bj'}">去北京</router-link>
    • 更利于维护，如果修改了path，只修改路由配置中的path，该a标签会根据修改后的值生成href属性

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
• 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

编程导航

• 不能保证用户一定会点击某些按钮
• 并且当前操作，除了路由跳转以外，还有一些别的附加操作
• this.$router.go 根据浏览器记录 前进1 后退-1
• this.$router.push(直接跳转到某个页面显示)
  • push参数：
    • 字符串/xxx
    • 对象：{name:'xxx',query:{id:1},params:{name:2}}

复习

• 过滤器，全局，组件内
• 获取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