博客
关于我
vue基础6——自定义组件v-model
阅读量:177 次
发布时间:2019-02-28

本文共 4806 字,大约阅读时间需要 16 分钟。

上次复习

在这里插入图片描述

在这里插入图片描述

自定义组件——v-model——与v-bind不同

不能正常加减

    
Document

在这里插入图片描述

换成v-bind就可以

在这里插入图片描述

在这里插入图片描述

解决:v-model里面需要添加prop属性

在这里插入图片描述

问题:count不是goods-count

在这里插入图片描述

在这里插入图片描述

解决:

在这里插入图片描述

在这里插入图片描述

生命周期函数

beforeCreate:只有vue或者组件实例化执行

    
Document

{ { username}}

在这里插入图片描述

created:

在这里插入图片描述

在这里插入图片描述

beforeMount:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

mounted:

在这里插入图片描述

在这里插入图片描述

beforeUpdate:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

updated:

在这里插入图片描述

在这里插入图片描述

销毁阶段:

    
Document

在这里插入图片描述

销毁时加入v-if,点击则销毁

在这里插入图片描述

在这里插入图片描述

beforeDestroy:点击销毁则触发

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

destroyed:

在这里插入图片描述

在这里插入图片描述

图书管理系统 事例

在bootstrap找样式

    
Document

图书管理系统

在这里插入图片描述

添加表格:

在这里插入图片描述

在这里插入图片描述

    
Document

图书管理系统

序号 名称 作者 价格 时间 删除
{ { index+1}} { { book.name}} { { book.author}} { { book.price}} { { book.atime}} 删除

在这里插入图片描述

增加功能的添加

    
Document

图书管理系统

序号 名称 作者 价格 时间 删除
{ { index+1}} { { book.name}} { { book.author}} { { book.price}} { { book.atime}} 删除

在这里插入图片描述

使用JSON.parse和JSON.straighfy()

在这里插入图片描述

在这里插入图片描述

输入完就可以情况框中内容

在这里插入图片描述

在这里插入图片描述

图书馆删除

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

图书馆搜索

    
Document

图书管理系统

序号 名称 作者 价格 时间 删除
{ { index+1}} { { book.name}} { { book.author}} { { book.price}} { { book.atime}} 删除

转载地址:http://urun.baihongyu.com/

你可能感兴趣的文章
MySQL5.1安装
查看>>
mysql5.5和5.6版本间的坑
查看>>
mysql5.5最简安装教程
查看>>
mysql5.6 TIME,DATETIME,TIMESTAMP
查看>>
mysql5.6.21重置数据库的root密码
查看>>
Mysql5.6主从复制-基于binlog
查看>>
MySQL5.6忘记root密码(win平台)
查看>>
MySQL5.6的Linux安装shell脚本之二进制安装(一)
查看>>
MySQL5.6的zip包安装教程
查看>>
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>