Vue.js学习笔记之一：基础

最新推荐文章于 2022-09-26 15:43:40 发布

QXYang686

最新推荐文章于 2022-09-26 15:43:40 发布

阅读量286

点赞数

分类专栏：读书笔记

本文链接：https://blog.csdn.net/qq_30412655/article/details/89281213

版权

读书笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

安装

略

介绍

Vue.js是什么

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

起步

可以通过script标签引入vue.js来使用vue.js，也可用其他方式来引用。

声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。Vue.js中数据和DOM是响应式的，当数据修改时DOM也会随之修改。其支持类似v-bind的带v-前缀的指令。

<div id='app'><span>{{message}}</div>
var app = new Vue({
    el:'#app',
    data:{
        message:'Hello World!'
    }
})

条件与循环

使用v-if指令实现条件渲染。数据不仅可以绑定到DOM文本或特征，也能绑定到DOM 结构。Vue提供过渡效果系统来自动应用过渡效果。
使用v-for指令可以绑定数组的数据来渲染一个项目列表。

<p v-if='seen''>...</p>

<ol>
    <li v-for='list in lists'>...</li>
</ol>

处理用户输入

使用v-on指令添加事件监听器，通过它调用在Vue实例中定义的方法。使用v-model指令实现表单输入和应用状态之间的双向绑定。

<input v-model='message' >

组件化应用构建

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。组件化允许我们使用小型、独立和通常可复用的组件构建大型应用。与自定义元素相似。

Vue.component('componentName',{...})

Vue实例

创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。当创建一个 Vue 实例时，你可以传入一个选项对象。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的 响应式系统 中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。但使用 Object.freeze()会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。

模板语法

Vue.js 使用了基于 HTML 的模板语法。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。也可以不用模板，直接写渲染 (render) 函数。

插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。使用v-once 指令，也能执行一次性地插值。也可以使用v-html指令插入HTML而不是将其解释为普通本文。Mustache 语法不能作用在 HTML 特性上，此时应使用v-bind指令。在布尔特性的情况下，它们的存在即暗示为 true，当值非真时布尔特性甚至不会被渲染到结果中。对于所有的数据绑定，Vue.js 都提供了完全的JavaScript 表达式支持。

<a v-bind:href=''></a>

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。一些指令能够接收一个“参数”，在指令名称之后以冒号表示，如v-bind指令可以用于响应式地更新 HTML 特性和v-on指定可以用于监听 DOM 事件。另外Vue 2.6开始支持动态参数。修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写(v-bind <-> : 、v-on <-> @)。

计算属性和侦听器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

基础例子

var app = new Vue({
    ...,
    computed: {
        computedAttr:function(){
            return ...;
        }
    }
})

计算属性缓存vs调用方法

可以通过在表达式中调用方法来达到同样的效果。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。而每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性vs侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

计算属性的setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter，从而进行反向操作。

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

Class与Style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。但在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定HTML Class

对象语法

<div v-bind:class="{active:isActive}"></div>

此时可根据isActive来决定active属性的存在与否。数据对象也可以不内敛定义在模板中，而使用类对象取代。也可以使用计算属性来返回。

数组语法

数组中也可以放入其他语法。

用在组件上

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

绑定内联样式

类似地，同样有对象语法和数组语法。

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值。

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
也可以用 v-else 添加一个“else 块”。因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

v-else

可以使用 v-else 指令来表示 v-if 的“else 块”。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

用key管理可复用元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样使Vue变得更快，且有其它好处，如可保持输入框内容。使用具有唯一值的key属性使Vue不对这些元素进行复用。

v-if vs v-show

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 与 v-for 一起使用

不推荐同时使用。同时使用时v-for比v-if优先级高。

列表渲染

用v-for 把一个数组对应为一组元素

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

也可以用 of 替代 in 作为分隔符。

一个对象的 v-for

也可以用 v-for 通过一个对象的属性来迭代.

<li v-for="value in object"></li>

也可以提供第二个的参数为键名

<li v-for=(value,key) in object></li>

第三个参数为索引

<li v-for="(vlaue,key,index) in object"></li>

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。不要使用对象或数组之类的非原始类型值作为 v-for 的 key。

数组更新检测

变异方法

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

替换数组

对非变异方法如filter()、concat()、slice()，它们不会改变原始数组，而是返回一个新数组。此时可以用新数组替换旧数组。此时Vue并不会丢弃现有DOM而是进行重用。

注意事项

由于JavaScript的限制，Vue不能检测以下数组变动：
1、利用索引直接设置一个项。此时可以用set或splice方法来替换。
2、修改数组的长度。此时可以用splice方法来替换。

对象更改检测注意事项

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。

显示过滤/排序结果

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 可以使用一个 method 方法。

一段取值范围的v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。

v-for on a <template>

类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素。

v-for with v-if

不推荐同时使用 v-if 和 v-for。当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

一个组件的v-for

在自定义组件里，你可以像任何普通元素一样用 v-for 。2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用 props。不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

事件处理

监听事件

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

事件处理方法

然而许多事件处理逻辑会更为复杂，因此 v-on 还可以接收一个需要调用的方法名称。

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法。有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

事件修饰符

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

按键修饰符

监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。keyCode特性也是允许的。

系统修饰键

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

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。如@click.ctrl.exact在有且只有Ctrl按下时才触发。

鼠标按钮修饰符

.left/.right/.middle

为什么在HTML中监听事件

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

表单输入绑定

基础用法

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

修饰符

.lazy从input事件同步改为change事件同步
.number自动将用户的输入值转为数值类型
.trim自动过滤用户输入的首尾空白字符

在组件上使用v-model

输入组件也可以和v-model一起使用

组件基础

基本示例

组件是可复用的 Vue 实例，且带有一个名字。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件的复用

可以将组件进行任意次数的复用。每用一次组件，就会有一个它的新实例被创建。

data 必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。如果Vue没有这条规则，各个实例将互相关联。

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。全局注册(Vue.component(…))的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

通过Prop向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

单个根元素

每个组件必须只有一个根元素，可用父元素包含来实现。可以通过给props传递对象来避免使用大量的v-bind。

监听子组件事件

父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件。同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件。

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值。然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值。或者，如果这个事件处理函数是一个方法，那么这个值将会作为第一个参数传入这个方法。

在组件上使用v-model

为了实现v-model，组件内的input必须:

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

通过插槽分发内容

为了让组件渲染时附加内容，可以使用slot，使用时只需要在需要的地方插入插槽就行了。

动态组件

可以通过<component>元素加上is特性来实现不同组件间的动态切换。

解析DOM模板时的注意事项

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。这可能导致自定义组件作为无效内容为提升到外部导致渲染出错。此时可以通过is特性来变通(类似与将原标签替换为is中的标签)。
如果我们从以下来源使用模板的话，这条限制是不存在的：字符串、单文件组件(.vue)、<script type=“text/x-template”>