Vue学习笔记-生命周期
整体页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
</head>
<body>
<div id="app">
<h3>添加品牌</h3>
<form action="" method="post">
品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description"
name="description"></textarea><br>
状态：
<input type="radio" name="status" v-model="brand.status" value="0">禁用
<input type="radio" name="status" v-model="brand.status" value="1">启用<br>
<input type="button" id="btn" @click="submitForm" value="提交">
</form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data(){
return {
brand:{}
}
},
methods:{
submitForm(){
// 发送ajax请求，添加
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/brand-demo/addServlet",
data:_this.brand
}).then(function (resp) {
// 判断响应数据是否为 success
if(resp.data == "success"){
location.href = "http://localhost:8080/brand-demo/brand.html";
}
})
}
}
})
</script>
</body>
</html>
Vue学习笔记-生命周期的更多相关文章
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- vue学习之五生命周期
一.vue生命周期图解 下图展示了实例的生命周期.你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高. 二.vue钩子函数使用 2.1beforeCreate 在实例初始 ...
- vue学习三:生命周期钩子
生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...
- Vue学习之生命周期钩子小结（四）
一.生命周期钩子(函数): 1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运 ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
- vue学习笔记（二） ---- vue实例的生命周期
vue实例的生命周期 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
- vue学习笔记：Vue生命周期
概念 一个Vue 实例从开始创建.初始化数据.编译模板.挂载 DOM.渲染→更新→渲染.卸载等一系列过程,这就是 Vue 的生命周期.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- Web攻防--Java_SQL注入--XXE注入-- SSTI模板注入--SPEL表达式注入
预编译 编译器在编译sql语句时,会依次进行词法分析.语法分析.语义分析等操作, 预编译技术会让数据库跳过编译阶段,也就无法就进行词法分析,关键字不会被拆开,注入语句也就不会被识别为SQL的关键字,从 ...
- 每日一库：lumberjack -- 日志轮换和管理
在开发应用程序时,记录日志是一项关键的任务,以便在应用程序运行时追踪问题.监视性能和保留审计记录.Go 语言提供了灵活且强大的日志记录功能,可以通过多种方式配置和使用.其中一个常用的日志记录库是 gi ...
- LeetCode 周赛上分之旅 #45 精妙的 O(lgn) 扫描算法与树上 DP 问题
️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越 ...
- @Validated指定校验顺序
在Java中,使用@NotNull注解时,可以指定多个参数的顺序.为了指定顺序,你可以使用@GroupSequence注解. 首先,为每个需要校验的参数定义一个接口,并在接口上添加@GroupSequ ...
- Windows11如何设置经典的右键菜单
使用Windows11几个月了,解决了我的电脑经常性彻底死机.蓝屏的问题,系统也流畅.易用了好多.唯一不能忍受的是右键菜单,经常需要再点一次才能找到自己想要的选项,今天网搜了下解决办法,特记录于此. ...
- 区间检测(range)
区间检测(range) 时间限制: 1 Sec 内存限制: 128 MB 题目描述 给定一个长度为n的序列,进行m次检测,每次检测某个区间中,是否有重复的数. 输入 第一行,两个整数n和m,表示序列 ...
- 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
在我们开发的前端项目中,往往为了方便,都需对一些控件进行自定义的处理,以便实现快速的数据绑定以及便捷的使用,本篇随笔介绍通过抽取常见字典列表,实现通用的字典类型绑定:以及通过自定义控件的属性处理,实现 ...
- 飞码LowCode前端技术系列（一）：数据结构设计
简介 飞码是京东科技研发的低代码产品,可使营销运营域下web页面快速搭建.飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案.会通过七篇文章介绍飞码,分别是:(1)背景与数据结构设计 ...
- html-0
选择器 (一):first-child和:first-of-type :first-child第一个元素 <!DOCTYPE html> <html> <head> ...
- .Net Core 3.1升级 .Net 5后出现代码错误 rzc generate exited with code 1.
安装.Net 5后出现错误,错误定位到了CodeGeneration相关的文件,找了半天也不知道哪里的问题. 升级类库,清理解决方案,删除obj.bin文件夹什么的卵用没有. 最后发现升级.Net 5 ...