vue

小情绪
284 阅读6分钟

  1. vue的特点是双向数据绑定(数据驱动)和组件系统
    数据驱动:
    vue数据观测管理在技术实现上利用的是ES5 Object.defineProperty和存储器属性(getter/settter),可称为基于依赖收集的观测机制,核心是vm,及viewmodal,保证数据和试图的一致性.
    组件系统的详细选项:
    模板(template) 初始数据(data) 接受的外部参数(props) 方法(methods) 生命周期钩子函数 私有资源(assets)=>vue中将用户自定义的指令/过滤器/组件等统称为资源,一个组件可以声明自己的私有资源,私有资源只有该组件和它的子组件可以调用

  2. vue-router 路由框架

  3. vuex 专为vue.js应用项目开发的状态管理器

  4. axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。

  5. webpack：模块加载和vue-cli工程打包器。

  6. vue-cli 工程常用的 npm 命令有哪些？
    npm install npm run dev npm run build npm run build --report(查看vue-cli生产环境部署资源大小的npm命令)

  7. ver-cli目录解析

  8. config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

build 对象下 对于 生产环境 的配置：
index：配置打包后入口.html文件的名称以及文件夹名称
assetsRoot：配置打包后生成的文件名称和路径
assetsPublicPath：配置 打包后 .html 引用静态资源的路径，一般要设置成 "./"
productionGzip：是否开发 gzip 压缩，以提升加载速度

dev 对象下 对于 开发环境 的配置：
port：设置端口号
autoOpenBrowser：启动工程时，自动打开浏览器
proxyTable：vue设置的代理，用以解决 跨域 问题

  1. 请你详细介绍一些 package.json 里面的配置
    scripts：npm run xxx 命令调用node执行的 .js 文件
    dependencies：生产环境依赖包的名称和版本号，即这些 依赖包 都会打包进 生产环境的JS文件里面
    devDependencies：开发环境依赖包的名称和版本号，即这些 依赖包 只用于 代码开发 的时候，不会打包进 生产环境js文件 里面。

  2. vue是一套构建用户界面的渐进式框架的理解
    渐进式: 没有多做职责之外的事 vue只提供了vue-cli生态中最核心的组件系统和双向数据绑定系统,vuex,vue-router等属于围绕vue开发的库
    所以vue相对于react和angular的区别是

  • 可以在vue的大系统中将一两个组件改做他用,比如说用来数据绑定
  • 也可以用vue全家桶,当angular一样
  • 也可以用vue的视图,搭配你设计的整个下层用
  • 还可以再底层数据逻辑的地方用OO和设计模式的那套理念
  • 也可以用做函数式
  1. 常用的vue的指令

  • v-if

  • v-show
    以上两种指令都是动态显示dom元素,区别:
    ① v-if是真正的条件渲染,因为它会确保在切换过程中条件块内 事件监听器 和 子组 件适当地 被销毁 和 重建 ,v-show的元素始终会渲染并保存在dom中,v-show只是简单地切换元素的css属性display
    ② v-if是惰性的,如果在初始渲染时条件为假,则说明也不做,直到条件第一次变为真时,才开始渲染条件块,v-show不管初始条件是什么,元素总会被渲染,并且只是简单地基于css进行切换
    ③ v-if有更高的切换消耗,v-show又更高的初始渲染消耗 ④ v-if适合运行时条件很少改变时使用,v-show适合频繁切换

  • v-for

  • v-bind

  • v-on 用于监听指定元素的dom事件,比如点击事件,绑定事件监听器

  • v-modal

  • v-pre 跳过这个元素和它的资源的编译过程.可以用来显示原始Mustache标签 跳过大量没有指令的节点会加快编译

<span v-pre>{{ this will not be compiled }}</span>   显示的是{{ this will not be compiled }}
  • v-once
  1. v-on指令常用修饰符
  • stop - 调用 event.stopPropagation()。
  • prevent - 调用 event.preventDefault()。
  • capture - 添加事件侦听器时使用 capture 模式。
  • self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • native - 监听组件根元素的原生事件。
  • once - 只触发一次回调。
  • left - (2.2.0) 只当点击鼠标左键时触发。
  • right - (2.2.0) 只当点击鼠标右键时触发。
  • middle - (2.2.0) 只当点击鼠标中键时触发。
  • passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用`·.native修饰符了，如：

//使用示例：
<el-input
  v-model="inputName"
  placeholder="搜索你的文件"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

v-on可以监听多个方法,但是不能监听同一种事件类型的方法

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />
<a href="javascript:;" @click="methodsOne" @click="methodsTwo"></a>//报错

v-bind 指令常用修饰符：

  • prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
  • camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
  • sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-model 指令常用修饰符：

  • lazy - 取代 input 监听 change 事件
  • number - 输入字符串转为数字
  • trim - 输入首尾空格过滤
  1. vue中key值的作用
    key值：用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求。
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>

<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>
  1. vue事件中如何使用event对象
//html部分
<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>
//js部分
showEvent(event){
    //获取自定义data-id
	console.log(event.target.dataset.id)
   //阻止事件冒泡
    event.stopPropagation(); 
    //阻止默认
    event.preventDefault()
}
avatar
文章
阅读
粉丝