vue基础学习笔记(二)

文章目录

      • 0.vue组件、路由和axios
      • 1.基本介绍
      • 2.准备开始
        • 2.1 学员反馈
        • 2.2 复习
        • 2.3 今日重点
      • 3. 过滤器
      • 4. 获取DOM元素
      • 5.mint-ui
      • 6.wappalyzer
      • 7.vue-router
        • 7.1 命名路由
        • 7.2 参数router-link
        • 7.3 编程导航
        • 7.4 原生实现编程导航
        • 7.5 复习
        • 7.6 重定向和404
        • 7.7 多视图
        • 7.8 嵌套路由
      • 8.vue-resource(了解) 发起http请求
      • 9. axios
      • 10. 如何练习
        • 10.1 vue 学习方式

0.vue组件、路由和axios

1.基本介绍

2.准备开始


2.1 学员反馈

凃凃老师, 该拓展的一定要拓展, 即使有部分同学跟起来吃力 , 以后工作很可能在项目中遇到相似问题, 至少知道老师讲过 , 有对照也好解决. 可以说清楚有哪些必须掌握, 有哪些让有余力的同学掌握.

2.2 复习

  • vue单文件方式 xxx.vue
  • 1:准备好配置文件 package.json(包描述文件&& 封装命令npm run dev) + webpack.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(事件名); 取消事件
  • 8:全局
    • Vue.component(‘组件名’,组件对象) 在哪里都可以使用
  • 9: 组件传值
    • 父传子: 属性作为参数
      • 常量 title=“xxx” 子组件声明接收参数 props:[‘xxx’]
      • 变量 :title=“num” 子组件声明接收参数 props:[‘xxx’]
    • 子传父: vuebus(只能是同一辆车)
      • 先停车到父组件,On一下
      • 再开车到子组件,如果需要的话,emit一下,触发上述事件的回调函数

2.3 今日重点

  • vue组件的使用
  • 组件间通信
  • vue-router使用
  • vue-resource发起http请求
  • axios

3. 过滤器

  • content | 过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器
  • 组件内的过滤器 + 全局过滤器
    • 组件内过滤器就是options中的一个filters的属性(一个对象)
      • 多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体
    • Vue.filter(名,fn)
  • 输入的内容帮我做一个反转
  • 例子:父已托我帮你办点事
  • 总结
    • 全局 :范围大,如果出现同名时,权利小
    • 组件内: 如果出现同名时,权利大(优先),范围小,如果子组件中没有过滤器就会用全局过滤器而不会用父组件的

4. 获取DOM元素

  • 救命稻草, 前端框架就是为了减少DOM操作,但是特定情况下,也给你留了后门
  • 1.在指定的元素上,添加ref=“名称A”
  • 2.在获取的地方加入 this.$refs.名称A
    • 如果ref放在了原生DOM元素上,获取的数据就是原生DOM对象
      • 可以直接操作直接修改dom,把修改后的结果渲染出来,更好的方式是操作变量
    • 如果ref放在了组件对象上,获取的就是组件对象
      • 1:获取到DOM对象,通过this. r e f s . s u b . refs.sub. refs.sub.el,进行操作
    • 对应的事件
      • created 完成了数据的初始化,此时还未生成DOM,无法操作DOM
      • mounted 将数据已经装载到了DOM之上,可以操作DOM
//载入后 数据已经就位 将数据渲染到页面上,dom已经生成
mounted() {
    console.log("mounted",this.$refs.myDiv);
    console.log("mounted",this.$refs.sub);
    console.log("mounted",this);  //组件对象
    //涉及dom类的操作
    this.$refs.myDiv.innerHTML = 'hahahhah';
    //更好的方式是操作变量,涉及到数据的操作
    this.text = '99999';
    //操作组件对象并获取dom对象
    console.log(this.$refs.sub.$el);
    this.$refs.sub.$el.innerHTML = '和嘿嘿';
},

5.mint-ui

  • 组件库
  • 饿了么出品,element-ui 在PC端使用的
  • 移动端版本 mint-ui
  • https://mint-ui.github.io/#!/zh-cn
  • 注意:
    • 如果是全部安装的方式
      • 1:在template中可以直接使用组件标签
      • 2:在script中必须要声明,也就是引入组件对象(按需加载) //在js中所有变量都是模块作用域,按需引入
    • 填坑笔记: redict问题,安装redict相关模块,引入style-loader相关模块 ==> babel解析

6.wappalyzer

  • 获取到当前网站的使用的技术
  • https://wappalyzer.com/download

7.vue-router

  • 前端路由 核心就是锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
  • angular ui-router:锚点值改变,如何获取模板?ajax、
  • vue中,模板数据不是通过ajax请求来,而是 调用函数获取到模板内容
  • 核心:锚点值改变
  • 以后看到vue开头的,就知道必须Vue.use
  • vue的核心插件:
    • vue-router 路由
    • vuex 管理全局共享数据
  • 使用方式
    • 1:下载 npm i vue-router -S
    • 2:在main.js中引入 import VueRouter from 'vue-router';
    • 3:安装插件 Vue.use(VueRouter);
    • 4:创建路由对象并配置路由规则
      • let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });
    • 5:将其路由对象传递给Vue的实例,options中
      • options中加入 router:router
    • 6:在app.vue中留坑使用

7.1 命名路由

  • 需求,通过a标签点击,做页面数据的跳转
  • 使用router-link标签
    • 1:去哪里 去北京
    • 2:去哪里 去北京
      • 更利于维护,如果修改了path,只修改路由配置中的path,该a标签会根据修改后的值生成href属性
routes: [
    //配置name方便查找只用名称就可以找到,
    //path是url上显示的地址,是正则匹配后面有?xxx都不影响
    //更好使用,方便修改
    { name:'music', path: '/mymusic',component: Music },
    { name:'movie', path: '/movie', component: Movie },
]

//或者在router实例中使用方法 addRoutes()
router.addRoutes([
    //重定向  从上到下
    {path: '/', redirect: {name: 'home'}},
    {name: 'home', path: '/home', component: Home},
    {path: '*', component: NotFound},
])

7.2 参数router-link

  • 在vue-router中,有两大对象被挂载到了实例this
  • $route(只读、具备信息的对象)、$router(具备功能函数)
  • 查询字符串 query
    • 1:去哪里 xxx
    • 2:导航(查询字符串path不用改) { name:'detail' , path:'/detail',组件}
    • 3:去了干嘛,获取路由参数(要注意是query还是params和对应id名)
      • this.$route.query.id
  • path方式
    • 1:去哪里 xxx
    • 2:导航(path方式需要在路由规则上加上/:xxx)
    • { name:'detail' , path:'/detail/:name',组件}
    • 3:去了干嘛,获取路由参数(要注意是query还是params和对应name名)
      • this.$route.params.name

7.3 编程导航

  • 原因:不能保证用户一定会点击某些按钮
  • 并且当前操作,除了路由跳转以外,还有一些别的附加操作
  • this.$router.go 根据浏览器记录 前进1 后退-1
  • this.$router.push(直接跳转到某个页面显示)
    • push参数: 字符串 /xxx
    • 对象 : {name:'xxx',query:{id:1},params:{name:2} }
    • 通过绑定自定义事件,在methods里面定义函数实现 this.$router.push('/movie'); 或者 this.$router.push({name: 'movie' }); 或者
      this.$router.go(-1);
    • 也可以传递参数 this.$router.push({name: 'movie', query: {id:1, name:2}});

7.4 原生实现编程导航

window.addEventListener('hasnchange', function(){
    var text = '';
    switch(location.hash){
        case '#/music':
            text='音乐数据';
            break;
        case '#/movie':
            text='电影数据';
            break;
    }
    document.getElementById('app').innerHTML=text;
})

7.5 复习

  • 过滤器,全局,组件内
  • 获取DOM元素 ,在元素上ref=“xxx”
  • 在代码中通过this.$refs.xxx 获取其元素
    • 原生DOM标签获取就是原生DOM对象
    • 如果是组件标签,获取的就是组件对象 $el继续再获取DOM元素
  • 声明周期事件(钩子)回调函数
    • created: 数据的初始化、DOM没有生成
    • mounted: 将数据装载到DOM元素上,此时有DOM
  • 路由
    • window.addEventListener('hashchange',fn);
    • 根据你放
      作为一个DOM上的标识
    • 最终当锚点值改变触发hashchange的回调函数,我们将指定的模板数据插入到DOM标识上

7.6 重定向和404

  • 一进入页面后,默认就是/
  • 重定向 { path:'/' ,redirect:'/home' }
  • 重定向 { path:'/' ,redirect:{name:'home'} }
  • 404 : 在路由规则的最后的一个规则
    • 写一个很强大的匹配
    • { path:'*' , component:notFoundVue}

7.7 多视图

  • 以前可以一次放一个坑对应一个路由和显示一个组件
    • 一次行为 = 一个坑 + 一个路由 + 一个组件
    • 一次行为 = 多个坑 + 一个路由 + 多个组件
  • components 多视图 是一个对象 对象内多个key和value
    • key对应视图的name属性
    • value 就是要显示的组件对象
      routes: [{path: '/', components:{header: HeaderVue, footer: FooterVue, default: MidVue}}]
  • 多个视图 -> 不传 name就是default
  • -> name就是xxx

7.8 嵌套路由

  • 用单页去实现多页应用,复杂的嵌套路由
  • 开发中一般会需要使用
  • 视图包含视图
  • 路由父子级关系路由
  • router-view 包含 router-view
  • 而router-view是关联路由的path匹配
  • 父级路由包含子路由
//组件内包含着第一层router-view
{ name:'music' ,path:'/music', component:Music ,
children:[   //子路由的path /就是绝对路径   不/就是相对父级路径,推荐使用相对路径 .和_都可以标识名字非必须
    {name:'music.oumei' ,path:'oumei', component:Oumei },
    {name:'music.guochan' ,path:'guochan', component:Guochan }
]
}  

8.vue-resource(了解) 发起http请求

  • 可以安装插件( Vue.use() ),早期vue团队开发的插件
  • 停止维护了,作者推荐使用axios
  • options预检请求,是当浏览器发现跨域 + application/json的请求,就会自动发起
  • 并且发起的时候携带了一个content-type的头
  • 在vue实例的created钩子函数中发起请求
  • npm i vue-resource -S
  • 引入 import VueResource from 'vue-resource'
  • 挂载 Vue.use(VueResource); 所有的vue实例都可以通过this. h t t p 操 作 实 质 是 在 V u e 构 造 函 数 的 原 型 对 象 上 增 加 属 性 http操作 实质是在Vue构造函数的原型对象上增加属性 httpVuehttp 函数
created(){
    //get请求
    this.$http.get('urladdress')
    .then(res =>{
        console.log(res);
        this.data = res.body.message;
    },err =>{
        console.log(err);
    });
    //post请求
    this.$http.post('urladdress',{
        //请求的数据
        content: 'something'
    },{
        //设置 消除json的预检请求
        emulateJSON: true;
        //此时请求头为 conten-type: application/x-www-form-urlencoded
    })
    .then(res=>{
        this.data = res.body.message;
    },err=>{
        console.log(err);
    });
}

9. axios

  • https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral
  • post请求的时候,如果数据是字符串 默认头就是键值对,否则是对象就是application/json
  • this.$axios.get(url,options)
  • this.$axios.post(url,data,options) data是传的字符串
  • options:{ params:{id:1}//查询字符串, headers:{ ‘content-type’:‘xxxxx’ },baseURL:’’ }
  • 全局默认设置 :Axios.defaults.baseURL = ‘xxxxx’;
  • 上面的针对当前这一次请求的相关设置
  • form-data是key=value形式
import Axiox from 'axios';
//给对象的原型挂载属性,所有的实例对象都可以使用
Vue.prototype.$axios = Axios;
...
created(){
    //get请求
    this.$axios.get('url')
    .then(res=>{
        console.log(res);
        this.data = res.data.message;
    })
    .catch(err=>{
        console.log(err);
    });
    //post请求
    this.$axios.post('url',
        'content=something',{
            headers: application/x-www-form-urlencoded
        }
    )
    .then(res=>{
        console.log(res);
        this.data = res.data.message;
    })
    .catch(err=>{
        console.log(err);
    });
}

10. 如何练习

  • 1:路由核心
    • 路由基本使用
    • 任选一种路由参数的方式(查询字符串)
    • 404(路由匹配规则)
    • 嵌套路由
    • 编程导航
  • 2:http请求
    • axios 发起get、post请求 (300)
    • 获取 http://182.254.146.100:8899/api/getcomments/300?pageindex=1
    • 发起 http://182.254.146.100:8899/api/postcomment/300
    • axios挂载属性方式

10.1 vue 学习方式

  • 框架的使用 照抄 =熟悉代码
  • 框架先掌握应用 明确组件的套路 引包使用占位
  • 基于webpack --> 打包的好处

你可能感兴趣的:(vue,vue,vue路由,axios)