【Vue】案例-购物车

demo<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { } .container .cart { width: 300px; margin: auto; } .container .title { background-color: lightblue; height: 40px; line-height: 40px; text-align: center; /*color: #fff;*/ } .container .total { background-color: #FF...

【Vue】学习笔记Five

组件基本使用如何全局注册组件Vue.component('组件名称', { })组件注册注意事项组件注意事项 组件参数的data值必须是函数同时这个函数要求返回一个对象 组件模板必须是单个根元素组件模板的内容可以是模板字符串组件命名有什么规定短横线驼峰命名局部组件注册方式如何定义局部组件在Vue 中 通过 components 注意 全局的不带s 局部的带s父组件向子组件传值-基本用法父组件如何向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收父组件向子组件传值-props属性命名规则属性名称规则在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制父组件向子组件传值-props属性值类型父组件向子组件传值-props属性值类型可以传递静态值也可以传递动态值动态值可以是 字符串 数字 布尔值 数组 对象子组件向父组件传值-基本用法字组件如何 向父组件传递数据 子组件用$emit()触发事件$emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据父组件通过事件监听监听子组件传递过来...

【Vue】小案例-图书管理系统+笔记Four

demo<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid{ margin: auto; width: 500px; text-align: center; } .grid table{ width: 100%; border-collapse: collapse; } .grid th,td{ padding: 10; border: 1px dashed orange; height: 35px; line...

【Vue】笔记Three

表单基本操作单选框如何实现单选?1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据复选框如何实现复选1、 复选框需要同时通过v-model 双向绑定 一个值 2、 每一个复选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据表单基本操作-下如何实现获取下拉框的选中状态1、 需要给select 通过v-model 双向绑定 一个值 2、 每一个option 必须要有value属性 且value 值不能一样 3、 当某一个option选中的时候 v-model 会将当前的 value值 改变 data 中的 数据如何获取文本域中的值通过v-model 绑定一个值表单域修饰符用法表单域修饰符有哪些.trim 自动过滤用户输入的首尾空白字符 - 只能去掉首尾的 不能去除中间的空格lazy 将inp...

【Vue】小案例-选项卡

demo<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul{ overflow: hidden; padding: 0; margin: 0; } .tab ul li { box-sizing: border-box; padding: 0; float: left; width: 100px; height: 45px; line-height: 45px; list-style: none; ...