目录一、Vue使用步骤二、Vue常用指令2.1v-for2.2v-bind2.3v-ifv-show2.4v-modelv-on一、Vue使用步骤使用步骤准备工作引入Vue模块创建Vue的应用实例定义元素div交给Vue控制。数据驱动视图准备数据用插值表达式渲染。body div idapp h1{{message}}/h1 /div script typemodule import { createApp } from https://unpkg.com/vue3/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 :keyitem.id {{item}} /tr参数说明items为遍历的数组item为遍历出来的元素index为索引从0开始key给元素添加的唯一标识便于vue进行列表项的正确排序复用提升渲染性能。注意遍历的数组必须在data中定义;要想让哪个标签循环展示多次就在哪个标签上使用v-for 指令案例2.2v-bind我们看到在img标签中直接使用插值表达式是无法正常显示图片的此时就要用到Vue中的v-bind指令。作用动态为HTML标签绑定属性值如设置hrefsrcstyle样式等。语法v-bind:属性名属性值简化 :属性名属性值案例2.3v-ifv-show这两类指令都是用来控制元素的显示与隐藏的。v-if语法:v-if表达式表达式值为true显示;false隐藏原理:基于条件判断来控制创建或移除元素节点(条件渲染)场景:要么显示要么不显示不频繁切换的场景。其它:可以配合v-else-if/v-else进行链式调用条件判断v-show语法:v-show表达式表达式值为 true显示;false隐藏原理:基于CSS样式display来控制显示与隐藏场景:频繁切换显示隐藏的场景2.4v-modelv-onv-model作用在表单元素上使用实现双向数据绑定。可以方便的获取或设置表单项数据。语法v-model变量名目前数据实现了双向绑定 那么我想点击查询能够将用户输入在表单的信息输出到控制台并且点击清空能够清空输入框的数据应该如何实现呢我们需要借助v-on来实现以上目标。v-on作用为html标签绑定事件添加事件监听语法v-on:事件名方法名简写事件名...div idapp button typebutton v-on:clickhandle/button button typebutton clickhandle/button div并定义该方法:案例