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…

本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件与复用 7.1.1 为什么使用组件在正式介绍组件前,我们先来看一个简单的场景,如图7-1所示: 图7-1中是一个…

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学习笔记第六篇内置属性

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学习笔记第四篇列表渲染

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

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学习笔记（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…

Vue.js学习笔记：在元素和 template 中使用 v-if 指令

f 指令语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.…