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

news/2024/7/10 2:56:28 标签: vue

1. vuejs.org/v2/guide/syntax.html#%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0">动态参数

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. vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B">数组更新检测

变异方法 (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. vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">事件修饰符

<!-- 只当在 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. vuejs.org/v2/guide/components-props.html#%E9%9D%9E-Prop-%E7%9A%84%E7%89%B9%E6%80%A7">非 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


http://www.niftyadmin.cn/n/523353.html

相关文章

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

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

1.自定义事件 事件名 不同于组件和 prop&#xff0c;事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)&#xff0c;所以 v-on:myEvent 将会变成 v-…
阅读更多...
yarn.lock、package-lock.json、npm-shrinkwrap.json的理解

yarn.lock、package-lock.json、npm-shrinkwrap.json的理解

1. 先说下yarn下载包的流程 第一次&#xff0c;首先执行yarn install&#xff0c;会按照语义版本控制规则&#xff08;在下面会解释&#xff09;下载最新的依赖包并且构建为依赖关系树&#xff0c;也就是把共有的部分提取出来。然后生成yarn.lock文件。并且生成本地缓存。 以后…
阅读更多...
js中数组与对象的深拷贝与浅拷贝

js中数组与对象的深拷贝与浅拷贝

深拷贝是指目标对象不会随源对象改变而改变 浅拷贝是指目标对象会随着源对象改变而改变 下面分别测试Object.assign(),lodash中cloneDeep,slice,concat,[…],JSON.parse(JSON.stringify),js方法实现拷贝。 1. Object.assign()2. lodash中cloneDeep3. slice4. concat5. 扩展运…
阅读更多...
JList用法小结

JList用法小结

JList用法小结 今天从《java核心编程》中学习了JList 的用法&#xff0c;写下自己的感受&#xff0c;以免时间久了又忘记了。JList从含义上看是一个列表&#xff0c;有点和JComboBox相似。其实不然&#xff0c;JComboBox的内容只能用一列显示出来&#xff0c;而JList的内容可以…
阅读更多...
java通讯录管理系统的设计与实现

java通讯录管理系统的设计与实现

一、课题要求 1. 设一个通信录由以下几项数据信息构成 数据项 类型 姓名 字符串 地址 字符串 邮政编码 字符串 电话号码 字符串 2. 主要功能 &#xff08;1&#xff09; 能建立、查询、修改和增删学生通讯…
阅读更多...
SQL Server数据库视图详解

SQL Server数据库视图详解

SQL Server数据库视图详解 目录 A:什么是视图: B:视图与查询的区别: C:视图的优点: D:视图的创建和管理 A:什么是视图: 视图(view):从一个或几个基本表中根据用户需要而做成一个虚表 1:视图是虚表,它在存储时只存储视图的定义,而没有存储对应的数据 2:视图只在刚…
阅读更多...
Vuex-总结（4）

Vuex-总结（4）

1. 使用vuex2. State3. Getters4. mutation5. Action6. Mutation与Action差异7. Module 1. 使用vuex //main.js import store from ./store.js;new Vue({// 把 store 对象提供给 “store” 选项&#xff0c;这可以把 store 的实例注入所有的子组件store,...App }).$mount(#ap…
阅读更多...
几个小型数据库的比较

几个小型数据库的比较

Access&#xff0c;MSDE 2000&#xff0c;Embedded Firebird&#xff0c;SQLite等都是可以免费再分发&#xff08;free redistributable&#xff09;的数据库。 相比而言&#xff0c;MSDE 2000 显著缺点是需要安装&#xff0c;最大优点是和服务器端的 SQL Server 编程模型一致&…
阅读更多...
最新文章

Copyright @ 2022~2023