vue.js语法及常用指令

下面是关于“vue.js语法及常用指令”的完整攻略。

一、Vue.js语法

Vue.js 是一款流行的 JavaScript 框架，它的语法和模板采用了基于 HTML 的模板语法，简化了前端开发中数据绑定和 DOM 操作的复杂度。下面是 Vue.js 的一些基本语法：

1. 基本模板

Vue.js 的基本模板由普通的 HTML 标签和 Vue.js 的特殊属性组成。例如：

<div id="app">
  {{ message }}
</div>

其中，{{ message }} 是 Vue.js 的模板语法，表示该元素的文本内容会自动更新为 message 变量的值。

2. 绑定属性

除了绑定元素文本内容，Vue.js 还可以绑定元素的属性。例如：

<div id="app">
  <img v-bind:src="imageSrc">
</div>

其中，v-bind 是 Vue.js 绑定属性的指令，src 属性绑定到 imageSrc 变量。

二、Vue.js常用指令

除了绑定属性和文本内容，Vue.js 还提供了一些常用指令，方便开发者进行条件渲染、循环渲染、事件监听等操作。

1. 条件渲染

Vue.js 提供了 v-if 和 v-show 指令，用于控制元素的显示和隐藏。

• v-if：根据条件渲染元素。例如：

```html

Hello, Vue.js

```

这里 isShow 是一个在 Vue 实例中定义的变量，根据不同的情况，该元素会在 DOM 中添加或移除。

• v-show：根据条件切换元素的可见性。例如：

```html

Hello, Vue.js

```

这里 isShow 是一个在 Vue 实例中定义的变量，该元素会一直存在于 DOM 中，但 CSS 样式会根据该变量的值，进行显示或隐藏。

2. 循环渲染

Vue.js 提供了 v-for 指令，用于渲染循环结构。例如：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

这里 items 是一个在 Vue 实例中定义的数组，v-for 指令会根据数组的值，循环渲染出多个相同的元素。

3. 事件监听

Vue.js 提供了 v-on 指令，用于监听事件，并触发相关的方法。例如：

<button v-on:click="onClick">点击</button>

这里 v-on 指令可以监听任何 DOM 事件，例如 click、mousedown、keydown 等等。当事件发生时，将会调用 Vue 实例中的 onClick 方法。

示例说明

这里提供两个简单的示例，用于演示 Vue.js 的常用指令。

示例一：条件渲染

实现一个简单的登录表单，当用户未登录时，显示登录表单，当用户已登录时，显示欢迎信息。

<div id="app">
  <div v-if="!isLogin">
    <input v-model="username" placeholder="请输入用户名">
    <input v-model="password" placeholder="请输入密码">
    <button v-on:click="onLogin">登录</button>
  </div>
  <div v-else>
    欢迎，{{ username }}
  </div>
</div>

在 Vue 实例中，定义 isLogin、username、password 等变量，并且实现 onLogin 方法，当用户成功登录后，设置 isLogin 为 true，并且保存 username 变量。这样，当 isLogin 为 false 时，会显示登录表单，当 isLogin 为 true 时，将会显示欢迎信息。

示例二：循环渲染

实现一个简单的待办事项列表，用户可以添加新的待办事项，同时也可以删除已完成的待办事项：

<div id="app">
  <input v-model="text" placeholder="请输入待办事项">
  <button v-on:click="onAdd">添加</button>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }} <button v-on:click="onDelete(index)">删除</button>
    </li>
  </ul>
</div>

在 Vue 实例中，定义 text 和 list 变量，当用户点击添加按钮时，将 text 的值添加到 list 数组中，同时清空 text 的内容。当用户点击某个待办事项的删除按钮时，将对应的待办事项从 list 数组中删除。

以上是关于“Vue.js语法及常用指令”的完整攻略，希望能对你有所帮助。