vue初学总结(二:基础语法)

v-model: vue中的双向绑定

双向绑定,即视图和模型之间互相影响,支持的元素类型有:

• select (下拉框,单选对应字符串，多选对应数组)
• textarea (文本域,默认对应的model是字符串)
• checkbox (多选框,多个CheckBox对应一个model时，对应数组，单个时对应boolean类型)
• radio (单选框,对应的值是input的value值)
• components(vue中的自定义组件)

v-on: 用于给页面中的元素绑定事件

v-on:事件名="js片段或函数名"
事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

• .stop ：阻止事件冒泡到父元素
• .prevent：阻止默认事件发生
• .capture：使用事件捕获模式
• .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
• .once：只执行一次

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

Vue 为最常用的按键提供了别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">```

全部的按键别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
v-for="item in items"

• items：要遍历的数组，需要在vue的data中定义好。
• item：迭代得到的数组元素的别名
  在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
  v-for="(item,index) in items"
• items：要迭代的数组
• item：迭代得到的数组元素别名
• index：迭代到的当前元素索引，从0开始。
  v-for除了可以迭代数组，也可以迭代对象。语法基本类似:
  v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
• 1个参数时，得到的是对象的属性值
• 2个参数时，第一个是属性值，第二个是属性名
• 3个参数时，第三个是索引，从0开始

key

**
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。(其实我没看太明白,反正就这么用了) **

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>