Vue 基础知识

超超小淘气
371 阅读4分钟

对于Vue是一套渐进式框架的理解

渐进式:主张最小

  1. 渐进式就是当页面加载到需要使用的指定内容时才会加载该内容
  2. 不会一开始加全部加载全部的内容
  3. 使用到了哪一个才去下载哪一个,互相没有关联
  4. 方便操作,轻量级,主要减少消耗
  5. 没有主张,可以当jQuery用,也可以整个全家桶开发
  6. 他只做自己该做的事情,不做不该做的事情

v-show和v-if的区别?分别说明其使用场景 v-show 和 v-if

都主要设置界面的显示和隐藏
  1. 而v-show当判断是false的时候,他会给标签添加display:none
    • 但是DOM结构依旧存在
  2. 而v-if如果判断是false的时候,他会直接不再加载DOM结构
  3. v-show主要使用在经常使用隐藏和显示切换的时候
  4. 因为v-if采用惰性加载 不会加载DOM结构,如果大量使用隐藏和显示会消耗内存

Watch和computed的区别?

Watch是监听

  1. 他会实时监听变量的改变
  2. 当监听函数一旦创建,该函数会立即执行
computed 是计算
  1. computed不修改原始数据,通过return返回处理数据,可以包含大量运算逻辑
  2. 他不需要定义变量,但是需要使用
  3. 当数据发生改变他会实时更新
  4. 在他内部写一个全新的变量名

常用修饰符有哪些

  1. stop 阻止事件冒泡
  2. prevent 阻止系统默认事件
  3. once 只执行一次该事件
  4. self 只有点击到自己本身的时候才会生效
  5. capture:将事件流设为捕获方式
  6. enter 回车
  7. space 空格
  8. up down left right esc delete

常见表单修饰符

  1. tirm 清除内容的首尾空格
  2. lazy 和change事件一样,当该变量才会执行该事件
  3. number 强转 数字类型

vue中key值的作用

在v-for使用时,标识组件的唯一性,更好的区分组件,更高效的更新虚拟dom

父组件向子组件通信?

  1. 父组件需要使用自定义属性来进行传递
  2. 在父元素使用子元素使用的开始标签上写一个自定义属性
  3. 而在子元素内使用props来接收一个数组
  4. 一个页面可是声明多个自定义属性,也就说明可以传递多个值

子组件向父组件通信

  1. 子传父需要使用自定义事件
  2. 在父元素使用子元素使用的开始标0签上写一个自定义事件
  3. 而子元素通过this.$emit('自定义事件名,'数据'')来进行传递
  4. 值会传递到父元素事件的参数上

非父子组件传值

  1. 需要事先开辟一个空间,在vue原型上
  2. 传递参数的组件,通过this.自定义原型名.$emit进行传递
  3. 而接受参数的组件,可以在挂载完成之后通过this.自定义原型名.$on进行接收

VUE 基础指令

  1. v-text 纯文本格式
  2. v-HTML html格式
  3. v-model 事件双向绑定
  4. v-if v-else-if v-else 判断是否显示DOM结构
  5. v-show v-hide 判断是否需要设置隐藏显示
  6. v-for 进行循环遍历
  7. v-on 事件 简写@
  8. v-bind 动态 简写:

MVVM?

M model V view VM viewmodel 模型 视图他们之间并没有什么联系 通过双向绑定 , 使用数据来驱动页面 当数据进行变化,结构也会进行改变,所以VUE 中进行避免操作DOM

计算属性

computed:{ 新定义的变量名字(){ return } }

vue中的组件的作用是什么?如何定义和使用组件

组件是为了增加可维护性,重复使用性 ,大量的使用组件进行拼接的一个页面,相同的结构可以使用不同的数据渲染成不同的数据

  • 有全局定义和局部定义两种
    • 全局定义在vue实例,引入全局组件
    • 使用component进行注册
    • 局部组件是在使用时候在组件内引入,在components内进行注册
  • 使用组件是在注册完成之后,把标签名以标签的形式执行

vue的两个核心是什么

数据驱动和组件化

动态绑定class的方法

class的的属性值使用变量的形式命名 因为class原本是不允许使用变量的,所以需要使用v-bind 简写为: 当进行判断,或者进行点击操作的使用,更改变量的值,这就是动态class

深度监听

Watch :{ handler(){

}
deep:true

} 监听对象属性的时候才会使用深度监听方法,使用深度监听才会可以检测到对象的属性,不然不会监听到属性,只能监听到对象的本身 无法实时监听属性的变化

vue中computed和methods的区别有哪些

methods内部的事件需要声明 需要执行事件才会进行执行 不管依赖的数据变不变,methods都会重新计算

computed内的变量不需要声明 当发生改变时会实时监听 如果依赖数据不变,他会重新获取,不会重新计算

生命周期钩子

vue一次页面加载有八个生命周期 当一个页面加载时,从他的产生,挂载,更新到销毁这是一个周期

创建 beforeCreate(){ } 创建开始 不会加载挂载对象和变量内容 created(){ } 创建完成 不会加载挂载对象,会加载变量内容

挂载 beforeMount(){ } 挂载开始 加载挂载对象,但不解析内容 mounted(){ } 挂载完成 解析挂载内容 我们一般操作都会写在这个生命周期内

更新 beforeUpdate(){ } 更新开始,当数据发生改变 updated(){ } 更新开始,当数据发生改变 updated(){ } 更新完成,当数据发生改变 当我们销毁重新挂载的时候,更新周期不再执行

销毁 beforeDestroy(){ } 销毁开始 vue内容不再执行 destoryed(){ } 销毁完成

组件的data为什么不是对象

因为data如果返回一个对象,所有的组件都会执行一个对象 那么当其中一个组件改变内部的值,所有的组件的值都会发生改变 当返回的是一个是对象的时候,他们返回的是一个个不相关的对象 那么当有组件操作的使用,其他组件不会受其影响

写出vue的is的使用场景

改变html标签的默认规则，比如ul里放li，dl里放dt等 他会改变默认的dom结构 可以执行动态组件

vue-router是什么?他有那些组件?

vue-router 他是路由,他可以定义路由规则,注册组件进行更改请求地址,得到不同的内容

组件

router-link 动态组件 router-views 可视区

vue-router有哪几种导航钩子?

  1. 全局导航钩子
    • 全局前置
      • beforeEach -全局后置
      • afterEach
  2. 组件导航钩子
    • 组件前置
      • beforeRouterLeave
    • 组件后置
      • beforeRouterEnter
    • 组件更新
      • beforeRouterUpdate
  3. 组件导航钩子 beforeEnter

怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

  • 先在index里引入组件,配置path属性 component注册组件
  • 在path配置路由地址的时候地址后面跟:加一个属性名
  • 传递参数的时候通过this.$router.push("地址"+值)
  • 在接收参数的组件里面是有this.$route.params内取值

router || route 的区别?

  • $route 是路由信息对象,包括"path,hash,query,fullpath,method,name等路由信息参数"
  • $router是路由实例对象,包括路由的跳转方法,实例对象等 push to replace

axios是什么?怎么使用?

请求后台的资源模块

  1. 使用npm i axios-s来安装
  2. 将axios挂载到vue实例上：vue.prototype.$axios = axios 在config文件夹中的index.js中的Dev中填写
  3. 在config文件夹中的index.js中的Dev中填写 ProxyTable：{ ‘/api’:{ Target：’代理服务器的目标地址’， changeOrigin: true, PathRewrite: {“^/api”:” ”} } }
  4. 在需要调用后台资源的组件中进行使用this.$axios({ Url: ‘/api/地址’, Method:’post’,//post请求必须设置 Params:{要传的参数}//post要将params设置为data }).then(res=>{}).catch(err=>{})

如何解决跨域问题?

  1. jsonp处理跨域问题
  • src属性没有跨域问题,所以jsonp是通过src属性进行跨域处理
  1. webpack打包构建配置处理跨域
  2. 后台设置跨域
  3. 配置请求头
  4. 在axios中配置changeOrigin:true允许跨域

请列出axios,get和post提交数据的方式

  • get直接把数据以?加&符号的方式直接拼接到url地址上
  • axios.get(url,data)、axios({method:'get',url:请求地址,params:{提交的数据}})
  • axios.post(url,data)、axios({method:'post',url:'请求地址'},data:{提交的数据})

vuex是应用程序的状态管理模式

他在main.js中进行使用:

  1. 下载引用vuex ,用use使用 ,实例化store对象,在里面进行配置
  2. 配置
  • state配置变量,和data的使用方式类似
  • getter 计算属性,他可以更改变量的值,可以自定义变量
  • mutations配置事件,和methods的使用方式类似
  • actions配置异步处理,因为store是同步执行的,所以当事件没有执行完成的时候,会堵塞线程,所以actions是监听事件,进行异步处理
  • models是子对象,他里面的配置和store里面的配置是一样的,就是可以一层一层通过models属性进行嵌套
  1. 在有大量的组件嵌套是在使用传值,如果少量的数据不需要vuex进行传值,因为他依赖很多也很繁琐

怎么让css只在当前作用域生效?

在style标签上写scoped

avatar
文章
阅读
粉丝