vue基础知识（vue基础知识答题）

今天给各位分享vue基础知识的知识，其中也会对vue基础知识答题进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、号称目前最火的前端框架Vue，它有什么显著特点呢？
• 2、20《Vue 入门教程》Vue 插件
• 3、10《Vue 入门教程》Vue 双向绑定指令
• 4、09《Vue 入门教程》Vue 过渡 amp; 动画
• 5、08《Vue 入门教程》Vue 事件处理

号称目前最火的前端框架Vue，它有什么显著特点呢？

1、Vue是什么

Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App。

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js 是一套用于构建用户界面的渐进式框架。

2、Vue的特点

遵循 MVVM 模式

编码简洁，体积小，运行效率高，适合移动/PC 端开发

它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

3、Vue与其他前端框架的关系

借鉴 angular 的模板和数据绑定技术

借鉴 react 的组件化和虚拟 DOM 技术

4、Vue的现有插件

vue-cli: vue 脚手架，用于搭建项目的骨架

vue-resource(axios): ajax 请求

vue-router: 路由

vuex: 状态管理

vue-lazyload: 图片懒加载

vue-scroller: 页面滑动相关

mint-ui: 基于 vue 的 UI 组件库(移动端)

element-ui: 基于 vue 的 UI 组件库(PC 端)

5、学习Vue的思想改变

Vue的中心思想是数据驱动，像远古时代的老前辈jQuery是结构驱动。

大家回忆下以前我们使用jQuery写代码的时候，经常是这样写的：

$("#myDiv").html("HelloWorld");

这些写法首先要获取Dom节点，也就是Dom结构，然后再修改数据更新结构的内容，使用jQuery的一个很大的目的就是为了去简化Dom的操作，而使用Vue就大不一样了，Vue的做法就是直接this.msg=HelloWorld，然后msg就会自动的同步到结构上，我们所要关心的是数据内容的改变，而不再去关心如何操作Dom结构了。

总结一句话：不要在想着怎么操作DOM，而是想着如何操作数据!!

20《Vue 入门教程》Vue 插件

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue 集合了大量由社区贡献的插件和库。

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：

10《Vue 入门教程》Vue 双向绑定指令

本小节我们将介绍 Vue 中数据的双向绑定指令 v-model 。 v-model 的学习相对简单。我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2. 木子解释

用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。— 官方定义

v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来操作页面 DOM 的更新。

3. 基本用法

接下来我们将详细介绍 v-model 在不同表单元素上的使用。

3.1 单行文本 input

实例演示

Document

名称是: {{ name }}

12345678910111213141516171819202122232425

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 input 和 name 形成双向绑定，当 input 中数据发生改变时 name 也会发生改变。同理，我们在控制台通过 vm.name = "" 给 name 赋值时输入框的内容也会发生改变。

3.2 多行文本 textarea

实例演示

Document

描述是: {{ desc }}

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定，当 textarea 中数据发生改变时 desc 也会发生改变。同理，我们在控制台通过 vm.desc = "" 给 desc 赋值时输入框的内容也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单个选择框 checkbox 和 isDelivery 形成双向绑定，当 checkbox 改变选中状态时 isDelivery 也会发生改变。同理，我们在控制台通过 vm.isDelivery = true 给 isDelivery 赋值时 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给多个选择框 checkbox 和 types 形成双向绑定，当任意 checkbox 改变选中状态时 types 也会发生改变。同理，我们在控制台通过 vm.types = [] 给 types 赋值时对应 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定，当 radio 改变选中状态时 isFree 也会发生改变。同理，我们在控制台通过 vm.isFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给选择框 select 和 company 形成双向绑定，当 select 改变选项时 company 也会发生改变。同理，我们在控制台通过 vm.company = 0 给 company 赋值时 select 的选中项也会发生改变。

对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串 （对于复选框也可以是布尔值）：

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

代码解释： 上述代码中，我们通过 true-value 和 false-value 给 复选框指定来选中和非选中的值，当选中时 vm.isDelivery === 'yes' ，当没有选中时 vm.isDelivery === 'no'

代码解释： 上述代码中，我们通过 v-bind:value 给 randio 指定选中的值，当 radio 选中时 vm.pick === vm.a 。

代码解释： 上述代码中，我们通过 v-bind:value 给 option 指定 value 值，当 该 option 选中时 vm.selected 的值为 { number: 123 } 。

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 （除了上述输入法组合文字时）。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

本小节我们介绍了 Vue 数据双向绑定 v-model 的使用，主要包括以下知识点：

09《Vue 入门教程》Vue 过渡 amp; 动画

本章节我们主要介绍 Vue.js 的过渡效果与动画效果。包括如何编写自定义 CSS 动画、如何配合第三方 CSS 动画库、过渡钩子函数的使用、如何使用第三方 JavaScript 动画库。本小节的内容相对之前有些难度，同学们在阅读一遍之后如果不能完全掌握，建议反复阅读，并把本小节的所有案例自己实现一遍，相信通过多次的练习一定可以掌握。

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 1、在 CSS 过渡和动画中自动应用 class； 2、配合使用第三方 CSS 动画库，如 Animate.css； 3、在过渡钩子函数中使用 JavaScript 直接操作 DOM； 4、配合使用第三方 JavaScript 动画库，如 Velocity.js。

使用 transition 组件包裹需要使用过渡效果的 DOM 元素。例如：

接下来让我们先看一个淡入淡出效果的实现代码：

实例演示

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：

那么，transition 组件是如何做到这样的过渡效果的呢？

我想，同学们肯定猜想到当元素切换状态的时候，我们定义的样式会作用于标签元素

。那么，到底是不是这样呢？

打开控制台，检索到

标签上，我们可以清晰地看到：

实际上 Vue 在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v 会替换为 test-transition。例如：test-transition-enter、test-transition-enter-active、test-transition-leave…

在日常开发中，我们经常会使用 CSS 过渡来实现一些简单的动画效果。接下来我们用一个示例来学习如何使用：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

同样，我们可以使用 CSS 动画来实现元素的过渡效果。CSS 动画用法类似 CSS 过渡，在过渡的不同阶段对应的 Class 会作用于元素。但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 相信同学们在日常业务开发中一定使用过 Dialog，接下来我们就使用 CSS 动画来实现它的过渡效果：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

在之前的两个案例中，我们通过给 transition 设置 name 属性来指定元素在不同阶段的样式类名，但有时候希望使用自定义的过渡类名，我们可以通过给 transition 设置以下属性来达到需求：

自定义过渡的类名优先级高于普通的类名，这样就能很好地与第三方（如：animate.css）的动画库结合使用。

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定 —— 比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

你也可以定制进入和移出的持续时间：

transition 组件在过渡的不同阶段会触发相应的钩子函数：

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false" ，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

接下来我们来看一个使用钩子函数和 Velocity.js 实现过渡动画的例子：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

有时候我们希望给元素设置初始渲染的过渡效果，可以通过给 transition 设置 appear 的 attribute ：

这里默认和进入 / 离开过渡一样，同样也可以自定义 CSS 类名：

同样地，可以使用自定义 JavaScript 钩子：

接下来我们看一个完整的示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

本小节我们介绍了如何使用 transition 实现过渡和动画效果，主要包括以下知识点：

08《Vue 入门教程》Vue 事件处理

本小节我们介绍 Vue 中如何进行事件处理。在章节 2.2 中我们已经介绍了指令 v-on ，本章节我们将详细介绍在 v-on 的一些用法。包括如何传递参数、如何使用事件修饰符等。其中，事件修饰符是本章节的难点。事件修饰符很多，同学们不需要一下子都记住，只要学会如何使用它，在开发过程中如果有所遗忘，可以通过翻看文档来使用。

使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 count + 1 的操作。

在上面的例子中，我们把事件处理函数直接写在模板中，然而许多事件处理的逻辑都很复杂，所以直接把JS代码写在 v-on 指令中有时并不可行，v-on 指令可以接收一个定义的方法来调用。示例如下：

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。

有时候我们需要在事件触发的时候传递一些参数，

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定了一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。

有时我们需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在上述 JS 代码第 9-12 行，我们定义了事件函数 setCount。 在按钮点击事件中，我们将 $event 对象传递给函数，因此，在函数 setCount 中可以访问到原生事件对象。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。

Vue 提供了以下事件修饰符：

接下来，我们用一个完整的示例来看下这些修饰符的使用方法。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 代码第 4-7 行，stop 案例中，当我们给按钮 click 事件添加 .stop 修饰符之后，点击按钮，事件不会向上传递。 代码第 10-16 行，submit.prevent 案例中，当给 submit 事件添加 .prevent 修饰符之后，提交事件不再重载页面。 代码第 19-21 行，capture 案例中，我们给父容器添加了 capture 事件，当点击按钮的时候，会先触发 capture 中的事件函数，然后再触发按钮绑定的点击事件。 代码第 24-26 行，self 案例中，我们给父容器的点击事件添加了 .self 的修饰符，所以只有点击父容器的时候才会触发该方法，当点击按钮的时候并不会触发父容器绑定的事件。 代码第 29-31 行，once 案例中，我们给按钮的点击事件添加了 .once 的修饰符，所以只有首次点击按钮的时候会触发事件函数，再次点击之后将不会触发事件函数。

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

注意：在 Mac 系统键盘上，meta 对应 command 键 ( )。在 Windows 系统键盘 meta 对应 Windows 徽标键 ( )。在 Sun 操作系统键盘上，meta 对应实心宝石键 ( )。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

Vue提供了.exact修饰符，实现单独的系统按键的事件。

例如：

本节，我们带大家学习了事件处理。主要知识点有以下几点：

关于vue基础知识和vue基础知识答题的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。