Vue学习笔记

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>

参数：

• items 为遍历的数组

• item 为遍历出来的元素

• index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"

key：

• 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能

• 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

注意：遍历的数组，必须在data中定义； 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

      <tbody><tr v-for="(emp, index) in empList" :key="index"><td>{{ emp.name }}</td><td>{{ emp.gender === 1 ? '男' : '女' }}</td><td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td><td><span v-if="emp.job === '1'">班主任</span><span v-else-if="emp.job === '2'">讲师</span><span v-else-if="emp.job === '3'">学工主管</span><span v-else-if="emp.job === '4'">教研主管</span><span v-else-if="emp.job === '5'">咨询师</span></td><td>{{ emp.entrydate }}</td><td>{{ emp.updatetime }}</td><td class="btn-group"><button class="edit">编辑</button><button class="delete">删除</button></td></tr></tbody>

定义在data中的数据

    <script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {searchEmp: {name: '',gender: '',job: ''},empList: [{ "id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg","gender": 1,"job": "1","entrydate": "2023-06-09","updatetime": "2024-07-30T14:59:38"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 1,"job": "1","entrydate": "2020-05-09","updatetime": "2023-07-01T00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg","gender": 2,"job": "2","entrydate": "2021-06-01","updatetime": "2023-07-01T00:00:00"}]}}
</script>

v-bind

 动态的为标签的属性绑定值，不能使用插值表达式，要使用v-bind指令。且绑定的数据必须在data中定义

错例，不能使用插值表达式

v-if & v-show 

 

v-if例子 

<td><span v-if="emp.job === '1'">班主任</span><span v-else-if="emp.job === '2'">讲师</span><span v-else-if="emp.job === '3'">学工主管</span><span v-else-if="emp.job === '4'">教研主管</span><span v-else-if="emp.job === '5'">咨询师</span></td>

v-show例子 （都会渲染）

 

v-model & v-on

v-model

• 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据

• 语法：v-model="变量名"

• 这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示 。 视图中的输入的数据变化，也会影响Vue的数据模型

 

注意：v-model 中绑定的变量，必须在data中定义。

   <!-- 搜索表单区域 --><form class="search-form" action="#" method="post"><input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" /><select name="gender" v-model="searchEmp.gender"><option value="">性别</option><option value="1">男</option><option value="2">女</option></select><select name="job" v-model="searchEmp.job"><option value="">职位</option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="submit">查询</button><button type="reset" class="clear">清空</button></form>

 v-on

作用：为html标签绑定事件（添加时间监听）

语法：

• v-on:事件名="方法名"

• 简写为 @事件名="…"

• <input type="button" value="点我一下试试" v-on:click="handle">

• <input type="button" value="点我一下试试" @click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。 

        methods: {search() {console.log(this.searchEmp)},clear() {this.searchEmp = {name: '',gender: '',job: ''}}}

 methods:{}要与data平齐

注意： methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。