再战Vue官网-找出知识盲点（1）

最新推荐文章于 2022-11-04 09:54:00 发布

My_Bells

最新推荐文章于 2022-11-04 09:54:00 发布

阅读量184

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qwe435541908/article/details/99575751

版权

Vue.js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1. 动态参数

2.6.0 新增
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

另外，如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板)，需要留意浏览器会把特性名全部强制转为小写：
<!-- 在 DOM （.html）中使用模板时这段代码会被转换为 `v-bind:[someattr]`data中someAttr动态参数获取不到。 .vue中data中的someAttr动态参数可以获取到-->
<a v-bind:[someAttr]="value"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。（这里的DOM中是指.html文件中）

2. 防抖

      // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
      // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
      // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
      // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
      // 请参考：https://lodash.com/docs#debounce
      this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)

3. 在 <template> 上可使用 v-if或v-for

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含元素。**

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider" role="presentation"></li>
</template>

4. 数组更新检测

变异方法 (mutation method)
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组
变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组

对象变更检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。
我认为根级别就是给对象中创建一个不存在的属性。
items:{a:1,b:{c:2}}这个，items.b.d=2就是创建了个根级别的属性,我改变items.b.c=3这个是响应的。数组就不行，不是实现不了，是尤大佬觉得太占性能了吧。https://segmentfault.com/a/1190000015783546

5. 事件修饰符

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>


<!-- 点击事件将只会触发一次 -->2.1.4 新增
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->2.3.0 新增
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

6. 表单输入绑定

复选框
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

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

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

7. 组件基础

全局注册

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例。全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

解析 DOM 模板时的注意事项（DOM模板常接触的是.html文件js中使用，.vue中的template和template：‘’就不是DOM模板）
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如<li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>
这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: ‘…’)
单文件组件 (.vue)
<script type=“text/x-template”>

直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的：
比如MyComponentName组件在html中只有<my-component-name>有效

<my-component-name></my-component-name>

.vue组件中<my-component-name>和<MyComponentName>都可以

<MyComponentName></MyComponentName>
<my-component-name></my-component-name>

Prop 的大小写 (camelCase vs kebab-case)
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。重申一次，如果你使用字符串模板，那么这个限制就不存在了。

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中只能是 kebab-case 的 写成postTitle组件的props中postTitle会接收不到-->
<blog-post post-title="hello!"></blog-post>

非DOM模板（字符串模板）都可以
<blog-post post-title="hello!"></blog-post>
<blog-post postTitle="hello!"></blog-post>

关于字符串模板和非字符串模板可以看下这个https://segmentfault.com/a/1190000014888725

8. 非 Prop 的特性

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。（就是指传过来的所有特性中不包括props中的特性）
非prop特性会被添加到这个组件的根元素（不包括key）
如果传过来的特性和组件内根元素特性重复。class 和 style
特性会稍微智能一些，即两边的值会被合并起来，其他的会被传过来的特性替换。
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

$attr会获取非prop的所有特性，不受inheritAttrs约束

vue2.4中，引入了$attrs 和$listeners ，新增了inheritAttrs，使用方法：https://blog.csdn.net/songxiugongwang/article/details/84001967

My_Bells

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
再战Vue官网-找出知识盲点（1）

1. 动态参数2.6.0 新增从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：<a v-bind:['foo' + bar]="value"> ... </a>变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。另外，如果你在 DOM 中使用模板 ...
复制链接

扫一扫