Vue 学习笔记 - 基础（中）

末蓝、 2023-02-17 15:52 1阅读 0赞

### Vue 学习笔记 - 基础（中） ###

*  条件渲染
 *   *  \`v-if\`
     *  \`v-show\`
     *  \`v-if\` vs \`v-show\`
     *  v-if 与 v-for 一起使用 (在同一标签上)
 *  列表渲染
 *   *  \`v-for\` 遍历数组
     *  \`v-for\` 遍历对象
     *  维护状态
     *  数组更新检测
     *   *  变更方法
         *  替换数组
         *  注意事项
         *  显示过滤/排序后的结果
         *  在 v-for 里使用值范围
         *  在 上使用 v-for
         *  \`v-for\` 与 \`v-if\` 一同使用
         *  在组件上使用 \`v-for\`
 *  事件处理
 *   *  监听事件
     *  事件修饰符
     *  按键修饰符
     *   *  按键码 keyCode
     *  系统修饰键 \`2.1.0 新增\`
     *   *  \`.exact\` 修饰符 \`2.5.0 新增\`
         *  鼠标按钮修饰符 \`2.2.0 新增\`
     *  为什么在 HTML 中监听事件？
 *  表单输入绑定
 *   *  基础用法
     *  值绑定
     *  修饰符
     *  在组件上使用 v-model
 *  参考资料

# 条件渲染 #

## `v-if` ##

*  用 `key` 管理可复用的元素  
    Vue会尽可能重用相同的元素。如果不想它让重用，可以添加`key="唯一身份标识"`来区分。

## `v-show` ##

<h1 v-show="布尔表达式"> 布尔表达式为【真】时显示</h1>

## `v-if` vs `v-show` ##

`v-if` 为假时不创建元素。  
`v-show` 为假时只是 `style="display: none;"`

## v-if 与 v-for 一起使用 (在同一标签上) ##

*  不推荐同时使用。详情看[风格指南][Link 1]。
 *  一起使用时`v-for`优先级更高。详情看[列表渲染指南][Link 2]。

# 列表渲染 #

## `v-for` 遍历数组 ##

`v-for="item in arr"` 或 `v-for="(item, index ) of arr" :key="item"`

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>arr</code></td> 
   <td>数组</td> 
  </tr> 
  <tr> 
   <td><code>item</code></td> 
   <td>当前遍历到的对象</td> 
  </tr> 
  <tr> 
   <td><code>index</code></td> 
   <td>可选的第二参数，当前元素索引</td> 
  </tr> 
  <tr> 
   <td><code>in</code> 和 <code>of</code></td> 
   <td>两种写法，没区别</td> 
  </tr> 
  <tr> 
   <td><a href="https://cn.vuejs.org/v2/api/#key" rel="nofollow"><code>:key</code></a></td> 
   <td>可选。支持<code>字符串</code>和<code>数字</code>。建议<code>始终加上</code></td> 
  </tr> 
 </tbody> 
</table>

## `v-for` 遍历对象 ##

`v-for="(value, key, index) in obj"`  
只遍历 `value` 可以省略括号。遍历的结果来自`Object.keys(obj)`本质还是遍历数组。

## 维护状态 ##

[:key][key]不是`for`专用的。支持`字符串`和`数字`。

## 数组更新检测 ##

### 变更方法 ###

`Vue`封装了这些 `push() pop() shift() unshift() splice() sort() reverse()`数组方法，所以它们也能触发视图更新。

### 替换数组 ###

`filter()、concat()` 和 `slice()`一般用来替换原数组。`Vue`实现了一些智能方法，所以用含有相同元素的数组替换原来数组是非常高效的。

### 注意事项 ###

由于 JavaScript 的限制，Vue **不能检测**数组和对象的变化。[深入响应式原理][Link 3]中有相关的讨论。

### 显示过滤/排序后的结果 ###

*  使用`计算属性`保护原始数据，返回要用的结果。
 *  在`嵌套 v-for`循环中`计算属性`不合适，可以使用`方法`

### 在 v-for 里使用值范围 ###

遍历 1 到 10

<div>
      <span v-for="(item, index) of 10">{
       {index}} - {
       { item }}</span>
    </div>

### 在 上使用 v-for ###

利用`template`可以渲染一组元素（`template`自己是不会出现的）

### `v-for` 与 `v-if` 一同使用 ###

官方不推荐在同一元素上使用 `v-if` 和 `v-for`。更多细节可查阅[风格指南][Link 4]。

### 在组件上使用 `v-for` ###

`自定义组件`和`普通元素`上`v-for`用法一样。 但：

1.  `2.2.0+` 的版本里`key` 是必须的。
2.  组件有自己的作用域，所以外面的数据要`v-bind:`手动传进去。

<div id="app">
    	<my_component v-for="item in arr" v-bind:npc="item"></my_component>
    </div>
    <script> var vm = new Vue({ el: '#app', data: { arr: [{ name:'张三'},{ name:'李四'},{ name:'王五'}], }, components: { 'my_component': { props: ['npc'], template: '<div> { {npc.name}} </div>' } } }); </script>

# 事件处理 #

## 监听事件 ##

`v-on` 简写 `@`  
`v-on`:`事件名`=`"代码 or 函数名"`

<table> 
 <thead> 
  <tr> 
   <th>参数描述</th> 
   <th>示例 (变量or函数都已Vue实例中定义)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>表达式</td> 
   <td>v-on:click=<code>"i++"</code></td> 
  </tr> 
  <tr> 
   <td>函数</td> 
   <td>v-on:click=<code>"function foo(){i++}"</code></td> 
  </tr> 
  <tr> 
   <td><font><b>事件处理方法<b></b></b></font></td> 
   <td>v-on:click=<code>"foo"</code></td> 
  </tr> 
  <tr> 
   <td><font><b>内联处理器中的方法<b></b></b></font></td> 
   <td>v-on:click=<code>"foo(2)"</code></td> 
  </tr> 
  <tr> 
   <td>原始的 DOM 事件</td> 
   <td>v-on:click=<code>"foo(2, $event)"</code></td> 
  </tr> 
 </tbody> 
</table>

## 事件修饰符 ##

`v-on`:`事件`.`修饰符1`.`修饰符2`=`"事件处理方法"`。修饰生效与顺序有关，从左向右依次生效。

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-on:click.stop</td> 
   <td>阻止单击事件继续传播</td> 
  </tr> 
  <tr> 
   <td>v-on:submit.prevent</td> 
   <td>提交事件不再重载页面</td> 
  </tr> 
  <tr> 
   <td>v-on:click.stop.prevent</td> 
   <td>修饰符可以串联：阻止单击事件继续传播、提交事件不再重载页面</td> 
  </tr> 
  <tr> 
   <td>v-on:submit.prevent</td> 
   <td>只有修饰符</td> 
  </tr> 
  <tr> 
   <td>v-on:click.capture</td> 
   <td>添加事件监听器时使用事件捕获模式<br>即外部元素触发的事件先处理，然后才交由内部元素进行处理</td> 
  </tr> 
  <tr> 
   <td>v-on:click.self</td> 
   <td>只当在 event.target 是当前元素自身时触发处理函数</td> 
  </tr> 
  <tr> 
   <td>v-on:click.once</td> 
   <td>2.1.4 新增：点击事件将只会触发一次</td> 
  </tr> 
  <tr> 
   <td>v-on:scroll.passive</td> 
   <td>2.3.0 新增：滚动事件的默认行为 (即滚动行为) 将会立即触发<br>而不会等待 <code>onScroll</code> 完成<br>这其中包含 <code>event.preventDefault()</code> 的情况<br>这个 .passive 修饰符尤其能够提升移动端的性能。<br> <code>.passive</code> 和 <code>.prevent</code> 不要一起使用，<code>.passive</code> 会告诉浏览器你不想阻止事件的默认行为。</td> 
  </tr> 
 </tbody> 
</table>

## 按键修饰符 ##

在监听键盘事件时可以使用：`v-on`:`keyup`.`enter`=`"myClick"`  
如上仅当`$event.key` 为`"Enter"`时调用`"myClick"`方法。完整有效按键名见：[MDN: Key Values][MDN_ Key Values]

### 按键码 keyCode ###

keyCode即将废弃，为兼容旧浏览器Vue定义了常用别名：  
`.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right`  
你还可以通过全局 `config.keyCodes` 对象[自定义按键修饰符别名][Link 5]

// 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

## 系统修饰键 `2.1.0 新增` ##

`.ctrl .alt .shift .meta`

<input v-on:keyup.alt.67="clear">
    
    
    <div v-on:click.ctrl="doSomething">Do something</div>

系统键要是按住的，如果想单击触发，请使用`按键码 keyCode`

### `.exact` 修饰符 `2.5.0 新增` ###

<button v-on:click.ctrl="onClick">A</button>
    
    
    <button v-on:click.ctrl.exact="onCtrlClick">A</button>
    
    
    <button v-on:click.exact="onClick">A</button>

### 鼠标按钮修饰符 `2.2.0 新增` ###

`.left .right .middle`

## 为什么在 HTML 中监听事件？ ##

`Vue` 只在标签上用`v-on`绑定事件，方便查找定位。视图销毁，Vue会`自动清理`事件。代码里也是可以的但尽量避免使用，详见：[**实例方法 / 事件**][Link 6]

# 表单输入绑定 #

## 基础用法 ##

*  `v-model`用来进行双向绑定，可用在`<input>`、`<textarea>` 及`<select>`。
 *  用了它就后就只认Vue实例`data`中的值，元素上的 `value、checked、selected` 都忽略。

**输入元素将会触发什么`事件`，从何处`取值`赋给`变量a`**

<table> 
 <thead> 
  <tr> 
   <th>输入元素</th> 
   <th>取值</th> 
   <th>事件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;input type="text " v-model=“变量a”&gt;</td> 
   <td>value</td> 
   <td>input</td> 
  </tr> 
  <tr> 
   <td>&lt;textarea v-model=“变量a”&gt;</td> 
   <td>value</td> 
   <td>input</td> 
  </tr> 
  <tr> 
   <td>&lt;input type=“checkbox” v-model=“变量a”&gt;</td> 
   <td>checked</td> 
   <td>change</td> 
  </tr> 
  <tr> 
   <td>&lt;select v-model=“变量a”&gt;</td> 
   <td>value</td> 
   <td>change</td> 
  </tr> 
 </tbody> 
</table>

下表中专注于输入元素本身，对应的标签`<label for="input的Id">标签文字</label>`省略。

<table> 
 <thead> 
  <tr> 
   <th>元素</th> 
   <th align="left">写法</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>文本</strong></td> 
   <td align="left">&lt;input v-model=“message”&gt;</td> 
   <td align="left">绑定到字符串<code>message</code></td> 
  </tr> 
  <tr> 
   <td><strong>多行文本</strong></td> 
   <td align="left">&lt;textarea v-model=“message”&gt;</td> 
   <td align="left"><code>&lt;textarea&gt;{ {message}}&lt;/textarea&gt;</code>无效</td> 
  </tr> 
  <tr> 
   <td><strong>复选框（单个）</strong></td> 
   <td align="left">&lt;input type=“checkbox” v-model=“isChecked”&gt;</td> 
   <td align="left">绑定到布尔值 <code>isChecked</code></td> 
  </tr> 
  <tr> 
   <td><strong>复选框（多个）</strong></td> 
   <td align="left">&lt;input type=“checkbox” value=“a” v-model=“arr”&gt;<br>&lt;input type=“checkbox” value=“b” v-model=“arr”&gt;<br>&lt;input type=“checkbox” value=“c” v-model=“arr”&gt;<br></td> 
   <td align="left">绑定到数组<code>arr</code><br>比如全勾选则<code>arr = [ "a", "b", "c" ]</code></td> 
  </tr> 
  <tr> 
   <td><strong>单选按钮</strong></td> 
   <td align="left">&lt;input type=“radio” value=“男” v-model=“gender”&gt;<br>&lt;input type=“radio” value=“女” v-model=“gender”&gt;</td> 
   <td align="left">绑定到变量<code>gender</code>勾选后值为<code>男</code>或<code>女</code></td> 
  </tr> 
  <tr> 
   <td><strong>选择框(单选)</strong></td> 
   <td align="left">&lt;select v-model=“book”&gt;<br>&lt;option disabled value=""&gt;请选择&lt;/option&gt;<br> &lt;option&gt;三国&lt;/option&gt;<br>&lt;option&gt;水浒&lt;/option&gt;<br>&lt;option&gt;西游&lt;/option&gt;<br>&lt;/select&gt;</td> 
   <td align="left">绑定到变量<code>book</code> 如：<code>book = "三国"</code><br>建议始终添加一个禁用的空值</td> 
  </tr> 
  <tr> 
   <td><strong>选择框(多选)</strong></td> 
   <td align="left">&lt;select v-model=“bookList” multiple &gt;<br>&lt;option&gt;三国&lt;/option&gt;<br>&lt;option&gt;水浒&lt;/option&gt;<br>&lt;option&gt;西游&lt;/option&gt;<br>&lt;/select&gt;</td> 
   <td align="left">1. 绑定到数组<code>bookList</code><br>如：<code>bookList= ["三国","水浒","西游"]</code><br>2. 支持 <code>v-for</code> 动态生成<code>&lt;option&gt;</code> 值可用<code>v-bind</code>绑定如：<code>:value="book.name"</code></td> 
  </tr> 
 </tbody> 
</table>

## 值绑定 ##

`单选按钮`，`复选框`及`选择框`，`v-model`绑定的值通常是：`字符常量`（单个复选框默认布尔）。但也支持通过`v-bind:value="xxx"`将值绑定到实例的`property`上。

<table> 
 <thead> 
  <tr> 
   <th>选择输入类型元素</th> 
   <th align="left">写法</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>复选框</strong></td> 
   <td align="left">&lt;input type=“checkbox” v-model=“t” true-value=“yes” false-value=“no”&gt;</td> 
   <td align="left">vm.t === ‘yes’ // 当选中时 <br>vm.t === ‘no’ // 当没有选中时</td> 
  </tr> 
  <tr> 
   <td><strong>单选按钮</strong></td> 
   <td align="left">&lt;input type=“radio” v-model=“pick” v-bind:value=“a”&gt;</td> 
   <td align="left">vm.pick === vm.a //选中时</td> 
  </tr> 
  <tr> 
   <td><strong>选择框的选项</strong></td> 
   <td align="left">&lt;select v-model=“book”&gt;<br>&lt;option v-bind:value="{ name: ‘三国’ }"&gt;三国演绎&lt;/option&gt;<br>&lt;/select&gt;</td> 
   <td align="left">此处绑定的值是个<code>内联对象字面量</code><br>如果选中<code>book={name:'三国'}</code></td> 
  </tr> 
 </tbody> 
</table>

## 修饰符 ##

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th align="left">写法</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.lazy</code></td> 
   <td align="left">&lt;input v-model.trim=“msg”&gt;</td> 
   <td>将数据同步改为<code>change</code>事件后。<code>v-model</code>默认每次<code>input</code>同步数据。</td> 
  </tr> 
  <tr> 
   <td><code>.number</code></td> 
   <td align="left">&lt;input v-model.number=“n” type=“number”&gt;</td> 
   <td>输入的值可以被 parseFloat() 解析 <code>?</code> 转为数值 <code>:</code> 返回原始值</td> 
  </tr> 
  <tr> 
   <td><code>.trim</code></td> 
   <td align="left">&lt;input v-model.trim=“msg”&gt;</td> 
   <td>去掉首尾空白字符</td> 
  </tr> 
 </tbody> 
</table>

## 在组件上使用 v-model ##

组件上支持使用`v-model`，建议先按顺序学习，学完组件后再看：[自定义输入组件][Link 7]

# 参考资料 #

[Vue 官方教程基数篇 - 本笔记的学习对象][Vue _ -]  
[Vue 官方CLI 官方文档][Vue _CLI]  
[Vue 官方API 参考][Vue _API]  
[Vue 官方API文档 - 生命周期钩子][Vue _API_ -]

[vue-devtools 编译安装][vue-devtools]  
[我的 Vue CLI 学习笔记][Vue CLI]  
[Vue 学习笔记 - 基础（上）][Vue _ - 1]  
Vue 学习笔记 - 基础（中）  
[Vue 学习笔记 - 基础（下）组件基础][Vue _ - 2]  
[Vue 学习笔记 - 深入了解组件][Vue _ - 3]

[MDN 完整有效按键名 Key Values][MDN_ Key Values]  
[千锋教育-李卫民 Vue 渐进式 JavaScript 框架][-_ Vue _ JavaScript]

[Link 1]: https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81
[Link 2]: https://cn.vuejs.org/v2/guide/list.html#v-for-object
[key]: https://cn.vuejs.org/v2/api/#key
[Link 3]: https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
[Link 4]: https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81
[MDN_ Key Values]: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key/Key_Values
[Link 5]: https://cn.vuejs.org/v2/api/#keyCodes
[Link 6]: https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95-%E4%BA%8B%E4%BB%B6
[Link 7]: https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
[Vue _ -]: https://cn.vuejs.org/v2/guide/
[Vue _CLI]: https://cli.vuejs.org/zh/
[Vue _API]: https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property
[Vue _API_ -]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[vue-devtools]: https://blog.csdn.net/jx520/article/details/106635106
[Vue CLI]: https://blog.csdn.net/jx520/article/details/106609547
[Vue _ - 1]: https://blog.csdn.net/jx520/article/details/106745449
[Vue _ - 2]: https://blog.csdn.net/jx520/article/details/106805544
[Vue _ - 3]: https://blog.csdn.net/jx520/article/details/106812618
[-_ Vue _ JavaScript]: https://www.funtl.com/zh/guide/Vue-%E6%B8%90%E8%BF%9B%E5%BC%8F-JavaScript-%E6%A1%86%E6%9E%B6.html