### vue
#### vue生命周期
beforeCreated
`实例初始化,数据观察和event/watch事件配置之前被调用`
created
`实例创建后立即调用,数据观测,数据和方法运算,watch/event事件回调`
beforeMount
`挂载之前被调用:相关的render函数首次调用`
mounted
`el被实例替换,并挂载到实例上去之后调用该钩子。mounted不会承诺所有的子组件都一起挂载,如果想要整个视图都渲染完毕,可以用vm.$nextTick替换mounted`
beforeUpdate
`数据更新时调用,适合在更行之前访问现在有的dom比如手动移除已添加的事件监听器`
> 该钩子在服务器渲染期间不会调用,因为只有初次渲染会在服务器端进行
updated
`由于数据更改导致的虚拟dom重新渲染和打补丁,在这之后会调用该钩子。在这个钩子被调用时,组件DOM已经更新,所以你现在可以依赖于DOM操作。`
activated
`keep-alive组件激活时调用`
deactivated
`keep-alive组件停用时调用`
beforeDestroy
`实例销毁之前调用。实例仍然可用`
destroyed
`Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。`
### vue项目大致
### 创建
```vue 
vue init webpack 项目名      //   creat 项目名  新版本
cd 项目名   
npm i   下载关联组件
npm run dev   运行
```
使用
```vue
导入axios插件:
1.新建http.js模块->插件代码
2.导入axios
3.按照文档开发插件  开发插件
import axios from 'axios'
const Http = {}
Http.install = function(Vue) {
  Vue.prototype.$http = axios
}
export default Http
4.main。js引入插件
5.Vue.ues(Http)    、、全局使用axios
```
> 给单元格内容包裹容器template(vue提供的组件)x
```vue
1.通过template的属性slot-scope可以把上层数据传递给层里进行使用
2.slot-scope的值可以随便写 通常命名为 scope
3."scope"会自动去找上一级数据 el-table :data 的值 tableData
4. scope.row 是数据源中的每个元素 这里是对象 (row 不能随便写)
```
eg:
```js
<template slot-scope="scope">
  {{ scope.row.create_time|fmtDate}}
</template>
```
> 页面变化之前判断是否登录
```vue
router.beforeEach((to, from, next) => {  
  to:即将要进入的目标
  from:单前导航正要离开的路由
  next:进行管道的下一个钩子函数
}
```
> 操作dom
`ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
### vue-router
#### 嵌套路由
```vue
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功,
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
```
### 重定向
```vue
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
```
### 动态路由匹配
一个“路径参数”使用冒号 `:` 标记。当匹配到一个路由时,参数值会被设置到`this.$route.params`
可以通过`this.$router.push(路径)来实现页面跳转
### vuex
> Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
- **state**,驱动应用的数据源;
- **view**,以声明方式将 **state** 映射到视图;
- **actions**,响应在 **view** 上的用户输入导致的状态变化。
> namespaced:true
>
> 前提:在模块中开启命名空间
### Mutation 必须是同步函数
Action 可以包含任意异步操作
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 `context.commit`
### 插件
> vuex-router-sync
使用插件,使路由配置直接在context中
### 组件通信
`父子通信`
1. 在子组件props:["msg"]
2. 使用组件时 <child-a :msg="父组件data的数据">
3. 在子组件的template {{msg}}
`子传父`
1. 在子组件中 this.$emit(自定义事件名xxx,数据a)
2. 在使用子组件时 child-a @xxx="父组件methods中的方法fnx"
3. 在父组件的methods中fnx(argv){此时 argv就是数据a}
`兄弟传信`
1. A 触发事件 vm.$emit(事件名,数据a)
2. B 绑定事件 vm.$on(事件名,(argv)=>{此时 argv就是数据a})

vue相关知识点及面试的更多相关文章

  1. Vue相关知识点记录

    1.安装 vue不支持ie8以下版本(无法模拟ECMAScript5特性),支持所有兼容ECMAScript5的浏览器. 浏览器安装Vue Devtools, 可以在更友好的界面中审查和调试Vue应用 ...

  2. vue相关知识点

    1.el-date-picker输入的时间范围需要两点 A.禁用键盘输入 :editable=false,否则虽然禁用,但是输入框还能输入 B.指定时间范围::picker-options=" ...

  3. 【记录】vue相关知识点

    let let是es6新引入的命令,与var命令类似,但是let是声明的局部变量,只在所在代码块中有效. ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. var s = ...

  4. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  5. Vue相关问题

    1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter, ...

  6. vue API 知识点(2)---选项总结

    一.选项 / 数据 1.data 当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,如果 data 仍然是一个纯碎的对象,则所有的实例将被共享引用同一个 ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. 3、Template Method 模板方法 行为型设计模式

    1.了解模板方法 1.1 模式定义 定义一个操作算法中的框架,而将这些步骤延迟加载到子类中. 它的本质就是固定算法框架. 1.2 解决何种问题 让父类控制子类方法的调用顺序 模板方法模式使得子类可以不 ...

  2. C#LeetCode刷题-哈希表

    哈希表篇 # 题名 刷题 通过率 难度 1 两数之和 C#LeetCode刷题之#1-两数之和(Two Sum) 42.8% 简单 3 无重复字符的最长子串   24.2% 中等 18 四数之和   ...

  3. Broken 2020: 1 靶机

    这个靶机的作者脑洞太大了 扫描下端口,就普通的ssh http服务 扫描下目录,发现了一个2个cms目录 进来cms发现是个安装界面,但是后面安装失败,无意返回cms发现出现了一个flag 进入/cm ...

  4. C# NPOI计算Execl里面的公式

    我这里分两种情况处理 1.Execl中表格中存在公式,我们通过公式获取数据 我们通过Npoi,获取列的属性: private static object GetValueType(ICell cell ...

  5. 什么是P,NP和NPC问题?

    P问题,NP问题,NPC问题?这些都是计算机科学领域,关于算法方面的术语.在认识这些术语之前,建议同学们先认真学习一下算法的时间复杂度,因为算法的时间复杂度与P,NP和NPC问题高度相关. 什么是P问 ...

  6. autotools使用

    autotools制作makefile 下面以hello.c来说明生成makefile的过程. 基本步骤如下: 1)autoscan命令生成configure.scan文件,重命名configure. ...

  7. python基础 Day9

    python Day9 函数的初识 #代码的可读性较好 s=[1,2,3,4,5,5] def list_len(S): count=0 for i in s: count+=1 print(coun ...

  8. 第1篇 Scrum冲刺博客

    一.Alpha阶段各成员任务 梁天龙 任务名称 预计工时  编辑历史记录  2  登陆按键设计  3  考勤记录页面 2  人数记录页面  2  学习课程页面 4  建议页面  2 黄岳康 任务名称 ...

  9. 区块链入门到实战(32)之Solidity – 代码注释

    Solidity 支持c风格和c++风格的注释. //之后到行尾的文本,都被看作注释,编译器忽略此内容 /* 与 */ 之间的文本被看作注释, 编译器忽略此内容 示例 注释示例. function g ...

  10. formily-面向中后台场景的复杂解决方案

    正文 在解决企业级应用的前端问题中,表单是个无法绕过的大山,正好最近有时间,调研一下 Formily-来自阿里巴巴的面向中后台复杂场景的表单解决方案,也是一个表单框架,前身是 UForm.主要解决如何 ...