vue.js 核心知识点(一)

此篇文件仅仅作为笔记分享,不用于其他用途!!! 

看了许多关于vue的书籍和学习材料之类的,稍微做个总结吧

先打开官网的首页:https://cn.vuejs.org/

 

 

官网里说的是Vue 是渐进式框架的:

渐进式含义：没有多做职责之外的事。

• 你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；

• 也可以整个用它全家桶开发，当Angular用；

• 还可以用它的视图，搭配你自己设计的整个下层用。

• 你可以在底层数据逻辑的地方用OO和设计模式的那套理念，

• 也可以函数式，都可以，它只是个轻量视图而已，只做了最核心的东西。

vue.js只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。

像vuex、vue-router都属于围绕 vue.js开发的库。

 

比如说，你要使用Angular，必须接受以下东西：

• 必须使用它的模块机制
• 必须使用它的依赖注入-
• 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

比如说，你要使用React，你必须理解：

• 函数式编程的理念，
• 需要知道什么是副作用，
• 什么是纯函数，
• 如何隔离副作用
• 它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

 

vue.js的两个核心

1、数据驱动，也叫双向数据绑定。

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

2、组件系统。

.vue组件的核心选项:

1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3、接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。
4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。
5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。
6、私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
等等。

 

vue几种常用的指令

 

• v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
• v-show：根据表达式之真假值，切换元素的 display CSS 属性。
• v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
• v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
• v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
• v-model：实现表单输入和应用状态之间的双向绑定
• v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
• v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-if 和 v-show 的区别

共同点：

v-if 和 v-show 都是动态显示DOM元素。

区别：

1、编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。

2、编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

3、性能消耗： v-if有更高的切换消耗。v-show有更高的初始渲染消耗。

4、应用场景： v-if适合运行时条件很少改变时使用。v-show适合频繁切换。

 

vue常用的修饰符

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 } 模式添加侦听器

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

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

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 - 输入首尾空格过滤

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

 v-on的使用

v-on可以监听多个方法，例如：

<input type="text" :value="name" @change="onChange" @focus="onFocus" @blur="onBlur" />

但是同一种事件类型的方法，只会响应第一个，例如：

<button @click="methodsOne" @click="methodsTwo"></button>

只会响应methodsOne方法。

 

vue中 key 值的作用

key值：用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求。

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>

<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，</input>不会被替换掉，仅仅是替换了它的 placeholder`。

这样也不总是符合实际需求，所以Vue为你提供了一种方式来表达这两个元素是完全独立的，不要复用它们。只需添加一个具有唯一值的 key 属性即可：

<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>

现在，每次切换时，输入框都将被重新渲染。

 

vue-cli进行工程升级 

前言：此命令谨慎使用，实际开发中如需升级建议直接使用 vue-cli 脚手架搭建，只需要了解即可！否则盲目升级可能会造成许多不必要的麻烦,比如webpack3和webpack4的特性及配置不同.所以谨慎使用!!!!!!!

推荐使用：

//升级插件
npm-check-updates

首先安装插件，建议用 npm 源安装，测试时用 cnpm 安装未下载成功：

npm install npm-check-updates -g

然后在待升级工程的目录结构下，命令行输入：

ncu

执行效果图：

 

 

然后升级所有版本，命令行输入：

ncu -a

再输入：

npm install