【JavaWeb | 第二篇】Vue快速入门
目录
一、Vue使用步骤
二、Vue常用指令
2.1v-for
2.2v-bind
2.3v-if&v-show
2.4v-model&v-on
一、Vue使用步骤
使用步骤：
- 准备工作
- 引入Vue模块；
- 创建Vue的应用实例；
- 定义元素（div），交给Vue控制。
- 数据驱动视图
- 准备数据；
- 用插值表达式渲染。
<body> <div id="app"> <h1>{{message}}</h1> </div> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' createApp({ data() { return { message: 'Hello World!' } } }).mount('#app') </script> </body>
二、Vue常用指令
指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
<p v-xxx="……"> …… </p>常用指令：
2.1v-for
作用：列表渲染，遍历容器的元素或者对象的属性。
语法：
<tr v-for="(item, index) in items" :key="item.id"> {{item}} </tr>参数说明：
- items为遍历的数组
- item为遍历出来的元素
- index为索引，从0开始；
- key：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能。
注意：遍历的数组，必须在data中定义;要想让哪个标签循环展示多次，就在哪个标签上使用v-for 指令
案例：
2.2v-bind
我们看到在img标签中直接使用插值表达式是无法正常显示图片的，此时就要用到Vue中的v-bind指令。
作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名="属性值"
简化： :属性名="属性值"
案例：
2.3v-if&v-show
这两类指令都是用来控制元素的显示与隐藏的。
v-if：
- 语法:v-if="表达式"，表达式值为true，显示;false，隐藏
- 原理:基于条件判断，来控制创建或移除元素节点(条件渲染)
- 场景:要么显示，要么不显示，不频繁切换的场景。
- 其它:可以配合v-else-if/v-else进行链式调用条件判断
v-show：
- 语法:v-show="表达式"，表达式值为 true，显示;false，隐藏
- 原理:基于CSS样式display来控制显示与隐藏
- 场景:频繁切换显示隐藏的场景
2.4v-model&v-on
v-model
作用：在表单元素上使用，实现双向数据绑定。可以方便的获取或设置表单项数据。
语法：v-model="变量名"
目前数据实现了双向绑定， 那么我想点击查询能够将用户输入在表单的信息输出到控制台，并且点击清空能够清空输入框的数据，应该如何实现呢？我们需要借助v-on来实现以上目标。
v-on
作用：为html标签绑定事件（添加事件监听）
语法：
v-on:事件名="方法名"
简写：@事件名="..."
<div id="app"> <button type="button" v-on:click="handle"></button> <button type="button" @click="handle"></button> <div>并定义该方法:
案例：