Vue 基本语法

一. 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代 化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二. 基本语法

1、基本数据渲染和指令

指令带有前缀 v除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

2、双向数据绑定

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>

3、事件

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明 的 methods 节点中

<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

4、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()： 即阻止事件原本的默认行为

5、条件渲染

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销 毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会 开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基 于 CSS 进行切换。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频 繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、列表渲染

v-for：列表循环指令

<!-- 1、简单的列表渲染 -->
<ul>
 <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
 <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
 <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>