vue的一些基础回顾

一、 vue的基础用法

v-if :是否插入元素 （用的相对较少）
v-show :是否隐藏元素

二、父子组件传值（父传子）

• 1.父传子的时候通过属性传递
• 2.子要声明props:["属性名"]来接收
• 3.收到就是自己的了,随便你用
  。在template中 直接用
  。在js中 this.属性名 用

总结:父传子 --父传子（属性），子声明（收），子直接用

三、注册全局组件

• 全局API Vue.component("组件名",组件对象);

四、附加功能：过滤器&监视改动

1.filter || filters

。filter为全局过滤器（给数据添油加醋显示）vue.filter("过滤器名,过滤方式fn")
。组件内的过滤器 filters:{"过滤器名",过滤方式fn}

示例一：filters的使用 ---- 示例二：filters对象的方法里面可以传很多参数的使用

2.监视的使用

• watch监视单个
• computed监视多个
  。computed:{监视的业务名：function(){ return 显示一些内容 }}
  。使用：{{ 计算属性的名称 }}

[watch简单例子1:] (https://img.haomeiwen.com/i8496278/e961ee2d18f30d86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
watch监视复杂类型的例子2:图1-----图2深度监视
computed使用的例子：图.png

总结：

• 当组件/过滤器为全局：大家直接用 全局不带s
• 过滤器：function（原始数据，参数1，参数2）{ return 结果;}
  。调用{{ '数据' | 过滤器名(参数1，参数2) }}
  -监视
  。watch 单个监视
  。computed 群体监视

五、slot的使用

• 内置的组件
• slot就是子组件里给DOM留下的坑 外部填入html内容
• <子组件>DOM</子组件>
• slot动态的DOM、props是动态的数据
  例子1图片

总结
- slot其实就是父组件传递的DOM结构
- vue提供的内置组件<slot></slot>

六、组件的生命周期

• beforeCreate

组件创建之前，这里不能操作数据，只是初始化了事件等

• created

组件创建之后，可以操作数据、并且实现vue->页面的影响。应用：发起ajax请求。

• beforeMount

vue起作用，装载数据到DOM之前 只执行一次 即new Vue 发生装载 替换<div id="app">之前

• mounted

vue起作用，装载数据到DOM之后（就是vue作用以后的DOM ）只执行一次 注：此处才能使用this.refs.'xxxx'的dom元素。

• beforeUpdate

基于数据改变 影响页面 数据更新前

• updated

基于数据改变 影响页面 数据更新后

• activated

结合kepp-alive使用 组件被激活了

• deactivated

结合kepp-alive使用 组件被停用了

• beforeDestroy

销毁之前 对应父组件v-if false （在父组件利用变量使子组件消失和出现 只能和v-if配套使用） 就销毁当前组件
//销毁，最终都是做一些其他功能的释放，比如：保存到localStorage、重置数据等功能

• destroyed

销毁之后
//销毁，最终都是做一些其他功能的释放，比如：保存到localStorage、重置数据等功能

• 总结

1.created 和 actived 都是v-if=“true” 子组件的状态
2.created没有被keep-alive内置组件包裹，actived被包裹了。
销毁和停用同上

七、获取DOM元素

• 救命稻草，document.querySelector
• 1:在template中标识元素 ref="xxxx"
• 2:在要获取的时候，this.$refs.xxxx获取元素
  。创建组件，装载DOM，用户点击按钮
• ref在DOM上获取的是原生DOM对象
• ref在组件上获取的是组件对象
  。$el是拿其DOM
  。这个对象就相当于我们平时玩的this，也可以直接调用函数

• 总结

// $属性：$refs 获取组件内的元素,
// $parent: 获取当前组件对象的父组件
// $root : 获取new Vue的实例
// $el: 组件对象的DOM元素
一个小例子：
[01$ref获取不到dom的情况.jpg] (https://img.haomeiwen.com/i8496278/6fe2debdfefcd87f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[02vue操作dom的细节点.jpg](https://img.haomeiwen.com/i8496278/5f8870157287a452.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[03解决$ref获取不到dom的情况.jpg](https://img.haomeiwen.com/i8496278/82acb8d4cc9153bb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

八、路由

1.路由原理

- 传统开发方式 url改变后立刻发起请求，响应整个页面，渲染整个页面
- SPA锚点值改变后不会发起请求，发起ajax请求，局部改变页面数据
    。页面不跳转，用户体验更好。
 注：SPA是什么？
    - single page application(单页面应用程序)
    - 前端路由
      。锚点值监视
      。ajax获取动态数据
      。核心点是锚点值
    - 前端框架Vue/angular/react都很适合开发单页应用

#demo1
<script>
      // hashchange事件..  url上的部分锚点数据(#xxx)改变. 可以获取到这个事件
      window.addEventListener('hashchange',function(){
                  console.log(location.hash)
        });
</script>
[01路由的核心.jpg](https://img.haomeiwen.com/i8496278/d71e97ed36b01c51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.命名路由

- 1.给路由对象一个名称 { name:'home',path:'/home',component:Home }
- 2.在router-link的to属性中描述这个规则
    。<router-link :to="{'name':'home'}"></router-link>
    。通过名称找路由对象，获取其path。生成自己的href

 - 大大降低维护成本，锚点值改变只用在main.js中改变path属性即可

#demo2 router-link的使用
[01.router-link的使用.jpg](https://img.haomeiwen.com/i8496278/67ca385c57ce3147.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 总结

总结.png

3.query与params

  - $route 路由信息对象，只读对象
  - $router 路由操作对象，只写对象

query与params.jpg
query与params使用总结.jpg

4.嵌套路由

嵌套路由的概念.png

• 知识点介绍

>1.路由meta元数据->meta是对于路由规则是否需要验证权限的配置
   。路由对象中和name属性同级{ meta:{ isChecked:true } }

>2.路由钩子 ->权限控制的函数执行时
  。每次路由匹配后，渲染组件到router-view之前
  。router.beforeEach( function(to,from,next) {   } )

4.编程式导航

-1:跳到指定的锚点，并显示页面this.$router.push({ name:'xxx',query:{id:1} }) 或者this.$router.push({ name:'xxx',params:{name:'abc'} })
-2:配置规则{name:'xxx' ,path:'/xxx/:name'}
-3:根据历史记录，前进或后退this.$router.go(-1)或this.$router.go(1) 1：代表进一步，-1代表退一步

九、axios

axios相关文档链接

1.拦截器

• 请求拦截器：在发起请求之前，做的事 （比如开启loading）
• 响应拦截器：在响应回来以后，做的事 （关闭loading）
• 单请求配置options：axios.post(url,data,options);
• 全局配置defaults：this.$axios.defaults
• config:请求拦截器中的参数
• response.config响应拦截器中的参数
• options
  。baseURL基础URL路径
  。params查询字符串(对象)
  。transformRequest：function(post请求传递的数据)
  { }转换请求体数据
  。transformResponse：function(res){ 自己转换相应回来的数据 }转换响应体数据
  。headers请求头信息
  。data请求体数据
  。timeout请求超时，请求多久以后没有响应算是超时(毫秒)
  1.请求拦截器和响应拦截器的写法.png
  2.isShow代表loading，这种写法可以放在公共的组件中，请求数据出现loading效果，有反应则loading消失.png

十、webpack

1.webpack打包模块的源码

• 1：把所有模块的代码放入到函数中，用一个数组保存起来。
• 2：根据require时传入的数组索引，能知道需要哪一段代码。
• 3：从数组中，根据索引取出包含我们代码的函数。
• 4：执行该函数，传入一个对象module.exports
• 5：我们的代码，按照约定，正好是用module.exports='xxxx'进行赋值。
• 6：调用函数结束后，module.exports从原来的空对象，就有值了。
• 7：最终return module.exports作为require函数的返回值

十一、vue项目目录

• 1、router文件夹下的index.js文件
  。1.路由下的index文件里面一些代码的含义.png
  。2.不启用eslint的语法检查的配置.png
  。3.vue中for循环为什么要写key，引深vue操作虚拟dom.png

十二、vue的实际项目运用的知识点

• this.$nextTick( () => { //在vue完成渲染任务以后的行为 } )

• 2.更改v-html中内容样式注意点.jpg

• 图片缩略图的插件 vue-preview

• 时间格式插件，比如：评论中显示几秒前、几分钟前... momentjs.com

• 3.请求数据时在拦截器中加loading.png

• 4.自定义截取字符串的过滤器.png

• 5.导航的守卫.png

• 8.导航守卫离开页面前的操作.png

• 6.实现双向数据绑定，并不需要利用v-model.png

• 7.增加打包build的速度.png

十三、vuex的知识点

• State 描述状态即保存数据
• Getter 获取数据，定义变量的存取
• Mutation 修改数据，发生变化 只能是同步代码
• Action 在行为中可以存着异步操作（或向后台发送请求），但是最终还是通知mutations
• Module

1.1vuex使用步骤-没有使用actions.png
1.2vuex的取值和改变值-没有使用actions.png
2.1vuex使用actions解决需要在更改数据前的异步.png
2.2使用actionsvuex的取值和改变值.png
3.Module的使用.png

• ...mapGetters的使用例子
  1.storejs.png
  2phoneCallvue.png
  3storeindexjs.png

十四、hash模式与history模式

• vue默认为hash模式，相关配置如图hash模式与history模式配置.png。后端需要相关的配置，才能实现history模式。vue的相关知识点位置
• 滚动行为：这个功能只在支持history.pushState 的浏览器中可用。知识点链接
• 预渲染1.预渲染解决vue的seo优化.png2.阶段的总结.png

十五、骨架屏

• 操作步骤参考链接

1、npm i -g lavas
2、lavas init
3、选择包含app_shell 也包含了骨架屏的功能

十六、细节点

• 1.当从接口中取到的数据渲染页面上时，解决报错的办法用v-if即可.png