给企业做网站运营,兰亭集势网站模板,海南网站推广,珠海网站制作品牌策划看文章可以得到什么#xff1f;
1.可以快速的了解并会使用vue的指令
2.可以加深你对vue指令的理解#xff0c;知道每个指令代表什么功能
目录
什么是vue的指令#xff1f;
vue常见指令的使用
v-html
v-show
v-if
v-else 和v-else-…看文章可以得到什么
1.可以快速的了解并会使用vue的指令
2.可以加深你对vue指令的理解知道每个指令代表什么功能
目录
什么是vue的指令
vue常见指令的使用
v-html
v-show
v-if
v-else 和v-else-if
v-on
v-bind v-for
v-model
案例-小黑记事本 什么是vue的指令
指令带有 v- 前缀 的 特殊 标签属性
vue这个框架自己规定的特殊的规范类似于html中的自己定义p等标签
Vue 会根据不同的【指令】针对标签实现不同的【功能】 vue常见指令的使用
v-html
作用设置元素的 innerHTML
语法v-html 表达式 v-show
1. 作用 控制元素显示隐藏
2. 语法 v-show 表达式 表达式值 true 显示 false 隐藏
3. 原理 切换 display:none 控制
4. 场景 频繁切换显示隐藏的场景 v-if
1. 作用 控制元素显示隐藏条件渲染
2. 语法 v-if 表达式 表达式值 true 显示false 隐藏
3. 原理 基于条件判断是否 创建 或 移除 元素节点
4. 场景 要么显示要么隐藏不频繁切换的场景 v-else 和v-else-if
1. 作用 辅助 v-if 进行判断渲染
2. 语法 v-else v-else-if 表达式
3. 注意 需要紧挨着 v-if 一起使用 v-on
1. 作用 注册事件 添加监听 提供处理逻辑
2. 语法
① v-on:事件名 内联语句
② v-on:事件名 methods中的函数名
3. 简写事件名
4. 注意methods函数内的 this 指向 Vue 实例 v-on 调用传参 v-bind
1. 作用 动态的设置html的标签属性 2. 语法 v-bind:属性名表达式 3. 注意
简写形式 :属性名表达式 小案例案例波仔的学习之旅
需求点击按钮切换图片 v-for
1. 作用 基于数据循环 多次渲染整个元素 → 数组、对象、数字 2. 遍历数组语法
v-for (item, index) in 数组
item 每一项 index 下标省略 index: v-for item in 数组 v-for 中的 key
语法key属性 唯一标识
作用给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
注意
key 的值只能是 字符串 或 数字类型 key 的值必须具有 唯一性 推荐使用 id 作为 key唯一不推荐使用 index 作为 key会变化不对应
如果这个属性不添加那么在对数组进行操作的时候后重新渲染的数据会出现问题 例子假设我们要删除下图中那个带颜色的那个li如果不添加 key 这个属性那么就会出现内容被删除了但样式还在的情况 不加 :key属性的情况 加了 :key的属性的情况 v-model
1. 作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容
① 数据变化 → 视图自动更新② 视图变化 → 数据自动更新
2. 语法: v-model 变量 案例-小黑记事本
① 列表渲染
② 删除功能
③ 添加功能
④ 底部统计 和 清空 !DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta http-equivX-UA-Compatible contentIEedge /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relstylesheet href./css/index.css /
title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1input placeholder请输入任务 classnew-todo v-modeltodo /button classadd v-on:clickadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item,index) in todoList div classviewspan classindex{{index1}}./span label{{item}}/labelbutton classdestroy clickdel(index)/button/div/li/ul/section!-- 统计和清空 --footer classfooter v-showtodoList.length0!-- 统计 --span classtodo-count合 计:strong {{todoList.length}} /strong/span!-- 清空 --button classclear-completed clickdelAll清空任务/button/footer
/section!-- 底部 --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {todoList: [],todo: },methods:{add(){console.log(this.todo);this.todoList.push(this.todo)console.log(this.todoList);//加入本地存储localStorage.setItem(todoList,JSON.stringify(this.todoList))this.todo },delAll(){console.log(清空);this.todoList []},render(){//读取本地数据this.todoList JSON.parse(getItem(todoList))},del(index){// console.log(index);// 删除指定数组元素this.todoList.splice(index,1)}}})/script
/body
/html功能总结 ① 列表渲染 v-for key 的设置 {{ }} 插值表达式 ② 删除功能 v-on 调用传参 filter 过滤 覆盖修改原数组 ③ 添加功能 v-model 绑定 unshift 修改原数组添加 ④ 底部统计 和 清空 数组.length累计长度 覆盖数组清空列表 v-show 控制隐
