条件渲染

v-if

<p v-if="布尔表达式"> if </p>
<p v-else-if="布尔表达式"> else if </p>
<p v-else> else </p>

• 用 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 一起使用 (在同一标签上)

• 不推荐同时使用。详情看风格指南。
• 一起使用时v-for优先级更高。详情看列表渲染指南。

列表渲染

v-for 遍历数组

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

v-for 遍历对象

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

维护状态

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

数组更新检测

变更方法

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

替换数组

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

注意事项

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

显示过滤/排序后的结果

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

在 v-for 里使用值范围

遍历 1 到 10

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

在 上使用 v-for

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

<ul>
  <template v-for="n in 3">
    <li>{{ n }}</li>
    <li>--------</li>
  </template>
</ul>

	<ul>
		<li>1</li>
		<li>--------</li>
		<li>2</li>
		<li>--------</li>
		<li>3</li>
		<li>--------</li>
	</ul>

v-for 与 v-if 一同使用

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

在组件上使用 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>

	<div id="app">
		<div> 张三 </div>
		<div> 李四 </div>
		<div> 王五 </div>
	</div>

事件处理

监听事件

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

事件修饰符

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

按键修饰符

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

按键码 keyCode

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

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

系统修饰键 2.1.0 新增

.ctrl .alt .shift .meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

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

.exact 修饰符 2.5.0 新增

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<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会自动清理事件。代码里也是可以的但尽量避免使用，详见：实例方法 / 事件

表单输入绑定

基础用法

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

<p> 【变量a】的值为：{{变量a}} <p>
<input v-model="变量a">

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

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

值绑定

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

修饰符

在组件上使用 v-model

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

参考资料

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

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

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

最后

以上就是孝顺巨人为你收集整理的Vue 学习笔记 - 基础（中）条件渲染列表渲染事件处理表单输入绑定参考资料的全部内容，希望文章能够帮你解决Vue 学习笔记 - 基础（中）条件渲染列表渲染事件处理表单输入绑定参考资料所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。