Vue.js学习笔记第三篇条件渲染

条件选择条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id=&…

Vue.js学习笔记第四篇列表渲染

遍历数组和对象和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <…

目录一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例二.列表渲染 1. 遍历数组 2. 遍历对象获取value 同时获取key 同时获取index 3. 循环渲染中key的使用 4. 哪些数组方法是响应式的 5. CoderWhy老师留下作业的完成一.条件渲染条件判断渲染相关的指令: v-if v-else v-elif v-show 1. v-if v-if 指令用于条件性地渲染一块内容.这块…

Vue.js学习笔记（三） - 修饰符

本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名称. 一.v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令.在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值. 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安装Vue Devto…

Vue.js学习笔记第七篇表单控件绑定

本篇主要说明表单控件的数据绑定,这次没有新的知识点文本框 1.普通文本框 <div id="app-1"> <p><input v-model="textBox" placeholder="输入内容...">输入的内容:{{ textBox }}</p> </div> <script type="text/javascript"> var vm1 = n…

Vue.js学习笔记第八篇组件

全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> <g…

Vue.js学习笔记第六篇内置属性

computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> &…

Vue.js学习笔记第五篇事件处理

监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> <but…

Vue.js学习笔记（2）vue-router

vue中vue-router的使用:…

vue.js 学习笔记3——TypeScript

目录 vue.js 学习笔记3--TypeScript 工具基础类型数组元组枚举字面量接口类类型类类型要素函数函数参数 this对象和类型重载迭代器 Symbol.iterator 声明.解构.展开.类型断言泛型泛型约束交叉类型.联合类型索引类型映射类型类型兼容类型保护.推断模块和命名空间装饰器类装饰器: 函数装饰器: 属性装饰器: 参数装饰器: vue.js 学习笔记3--TypeScript 工具 npm install -g typescript…