Vue.js教程:v-if/v-show/v-for与TodoList实现
"Vue第二天学习笔记概述了Vue.js框架中的核心指令v-if、v-show和v-for,以及如何实现一个简单的TodoList应用,并涉及到组件的基本概念和父子组件通信的基础知识。" 在Vue.js中,`v-if`和`v-show`都是用于条件渲染的指令,它们可以根据表达式的值来决定是否渲染对应的元素。`v-if`是基于条件的块级移除,当条件为假时,元素及其包含的所有内容都不会被渲染到DOM中,因此在元素需要频繁切换显示状态时,`v-if`的效率较高。相反,`v-show`通过改变CSS的`display`属性来控制元素的可见性,元素始终存在于DOM中,只是切换显示状态,对于频繁切换但不移除的场景,`v-show`更合适。 `v-for`指令则用于遍历数组或对象,动态地渲染列表。在使用`v-for`时,需要提供一个key属性,以便Vue能跟踪每个节点的身份,优化DOM更新。key的值应确保在每次迭代中都是唯一的,避免使用可能会重复的值,如数组的索引。例如,在数据频繁变动的情况下,直接使用index作为key可能导致不必要的错误,此时可以考虑使用其他唯一标识符。 接下来,笔记中展示了如何实现一个基本的TodoList应用。HTML结构包括一个输入框、一个提交按钮和一个列表。Vue实例化时,绑定了数据属性`list`(存储待办事项)、`submit`(提交按钮文本)和`inoutValue`(输入框内容)。`v-model`用于双向数据绑定,将输入框的值与`inoutValue`同步。`add`方法负责将输入框的值添加到`list`中,并清空输入框。 TodoList应用的组件化是Vue的一个重要特性。组件是可复用的代码单元,能够封装独立的功能和视图。在大型项目中,组件可以帮助我们更好地组织和管理代码。组件之间可以通过props进行父子通信,父组件可以通过props向子组件传递数据,子组件可以通过事件向父组件发送消息。Vue提供了`.sync`修饰符或`v-bind`的`prop`来简化这一过程。 这个学习笔记涵盖了Vue.js的基础知识,包括条件渲染、列表渲染和基本的组件化概念,是初学者理解Vue工作原理的良好起点。随着对Vue的深入学习,还可以探索更高级的主题,如计算属性、侦听器、异步组件、路由和状态管理等,这些都是构建复杂前端应用的关键技术。
v-if="show" 判断是否隐藏
show在data里面可以控制true和false来控制这个属性的显示和隐藏
v-show="show" 判断是否隐藏
显示和隐藏和v-if看上去差不多,但是差异在于v-if是移除掉html源码,而show是用display控制显示和隐藏。
如果只需要做一次显示和隐藏,推荐v-if,如果是多次,v-show性能会好一些,因为不会销毁这个代码
v-for 循环展示
用v-for的时候记得加一下:key="变量"这个属性会加快渲染的速度
<ul>
<li v-for="item of list" :key="item">{{item}}</li>
<ul>
:key 的要求是每次循环值都不能相同
如果数据频繁会做变更,使用index 是会出问题的(具体问题还需要自己慢慢去体会)
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
<ul>
TodoList功能开发:
<html>
<head>
<title>VUE</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="inoutValue"/>
<button @click="add">{{submit}}</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
list:[],
submit:'提交',
inoutValue:''
},
methods:{
add:function(){
this.list.push(this.inoutValue);
this.inoutValue = ''
}
}
});
</script>
</html>
总结之前学习的一些知识在input输入内容,提交到列表当中
TodoList组件拆分:
组件就是指页面的某一部分
Vue.component('todo-item') Vue提供的创建组件方法
Vue.component('todo-item',{
template:'<li>item</li>'
剩余5页未读,继续阅读
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++多态实现机制详解:虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统:无向图实现最短路径探索
- SQL2005彻底删除指南:避免重装失败
- GTD时间管理法:提升效率与组织生活的关键
- Python进制转换全攻略:从10进制到16进制
- 商丘物流业区位优势探究:发展战略与机遇
- C语言实训:简单计算器程序设计
- Oracle SQL命令大全:用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解:电路与程序设计
- 反激开关电源设计:UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程:创建员工层级结构