目录
Vue代码碎片
01-vue的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
// 使用原生js代码来替换html内容
// msg = "北京xxxx"
// divApp = document.getElementById('app')
// divApp.innerHTML += msg
// 使用vue框架对html进行内容替换
var vm = new Vue({ // 1.创建vue对象
el: "#app", // 2.绑定需要进行内容替换的标签 只有绑定的标签中才能使用vue语法进行内容替换
data: { // 3.设置vue对象的属性 (需要在模板中进行替换的数据)
msg: "hello",
num: 10,
isFirst: false,
num2: 20
},
methods: { // 设置vue对象的方法 (需要在模板中调用的函数)
func1: function () {
alert("func1")
}
}
})
// 获取vue对象的属性
// alert(vm.msg)
// 调用vue对象的方法
vm.func1()
}
</script>
</head>
<body>
<div id="app">
<!-- 4. 在模板中使用vue语法进行内容替换 语法: {{ vue属性 }} -->
<!-- 搜索结果为:<br/>
第一行:{{msg}}<br/>
第二行:{{num}}<br/>
第三行:{{isFirst}}<br/> -->
<!-- 支持函数调用 -->
{{func1()}}
<!-- 更复杂的表达式 -->
<!-- 支持js对象内置的方法调用 -->
{{ msg.split("").reverse().join("") }}
<!-- 支持数学运算 -->
{{num+num2}}
<!-- 支持三目运算 判断 ? 成立时的语句 : 不成立时的语句 -->
{{isFirst ? "YES" : "NO"}}
</div>
</body>
</html>
02-节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
// DOM 文档对象模型 js中对html标签的"面向对象化", 根据DOM规则js就可以修改html的标签
// DOM中规定 html由节点构成 元素节点/属性节点/文本节点/注释节点
// 通过js来修改html标签 称为节点操作/DOM操作
// 节点操作 包含 设置标签内容/设置标签属性/增删标签
new Vue({
el: "#app",
data: {
msg: "python",
msg2: "hello",
bg: {
backgroundColor: "red",
width: "100px",
height: "100px"
},
border: {
borderStyle: "solid",
borderColor: 'black'
}
}
})
}
</script>
</head>
<body>
<!-- 设置标签内容 -->
<!-- <div id="app">{{msg}}</div> -->
<!-- <div id="app" v-html="msg"></div> -->
<!-- 设置标签属性 -->
<!-- <div id="app" v-bind:class="msg"></div> -->
<!-- 简写形式 -->
<!-- <div id="app" :class="msg"></div> -->
<!-- 设置多个属性值 -->
<!-- <div id="app" class="hello python"></div> -->
<!-- <div id="app" :class="[msg, msg2]"></div> -->
<!-- 让msg是固定的 -->
<!-- <div id="app" :class="['msg', msg2]"></div> -->
<!-- <div id="app" style="backgroundColor: red; width:100px; height:30px;"></div> -->
<div id="app" :style="[bg, border]"></div>
</body>
</html>
03-事件监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el: "#app",
methods: {
func1: function () { // 设置vue方法
// alert("func1")
// 修改vue属性
// vm.num += 1 // vue属性被修改后,会立即更新页面的效果
// 可以通过this来获取到当前的js对象
this.num += 1
}
},
data: { // 设置vue属性
num: 0
}
})
}
</script>
</head>
<body>
<!-- 使用vue绑定事件 -->
<!-- <button id="app" v-on:click="func1">按钮</button> -->
<!-- 简写形式 -->
<!-- <button id="app" @click="func1">按钮</button> -->
<!-- 通过事件修改页面效果 -->
<button id="app" @click="func1"> {{num}} </button>
<!-- 事件也支持内联js语句 -->
<!-- <button id="app" @click="num+=1"> {{num}} </button> -->
</body>
</html>
04-样式绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bg {
background-color: red;
width: 100px;
height: 30px
}
.border {
border-style: solid;
border-color: black
}
</style>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el: "#app",
data: {
isBg: true, // 记录是否显示背景
isBorder: true // 记录是否显示边框
}
})
new Vue({
el: "#btn",
methods: {
func1:function () {
vm.isBorder = !vm.isBorder
}
},
})
}
</script>
</head>
<body>
<!-- 常规设置样式 -->
<!-- <div id="app" class='bg border'></div> -->
<!-- 通过 js对象的形式 来控制样式 -->
<!-- <div id="app" :class='{bg: isBg, border: isBorder}'></div> -->
<!-- bg样式是固定的 -->
<!-- <div id="app" :class='["bg", {border: isBorder}]'></div> -->
<!-- 通过 三目运算 来控制样式 -->
<!-- <div id="app" :class='isBorder ? "border":"" '></div> -->
<div id="app" :class='["bg", isBorder ? "border":""]'></div>
<!-- 通过事件来切换样式 -->
<button id="btn" @click="func1">按钮</button>
</body>
</html>
05-选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src=""></script>
<script>
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
</html>
06-监听属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
num: 0
},
methods: {
func1: function () {
this.num += 1
}
},
watch: { // 用于设置要监听的属性
num: function () { // 当num属性发生变化时, 会调用该匿名函数
// vue属性变化时, 会先触发监听, 再更新界面
if (this.num > 9){
this.num = 111
}
}
},
})
}
</script>
</head>
<body>
<div id="app">
{{num}}<br/>
<button @click="func1">按钮</button>
</div>
</body>
</html>
07-计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
msg: "hello"
},
computed: {
reverseMsg: function () {
return this.msg.split('').reverse().join("")
}
},
})
}
</script>
</head>
<body>
<div id="app">
<!-- 使用js对象内置的方法 -->
<!-- {{ msg.split('').reverse().join("") }} -->
<!-- 使用计算属性来封装处理 -->
{{reverseMsg}}
</div>
</body>
</html>
<!--
class Dog:
@propery
def age(self):
pass
@age.setter
def age(self, value):
pass
dog1 = Dog()
dog1.age = 20
print(dog1.age)
-->
08-条件语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
num: 10
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- 使用vue进行条件判断 -->
<div v-if="num==1">北京</div>
<div v-else-if="num==2">上海</div>
<div v-else>深圳</div>
<!-- v-show类似v-if, 但是实现机制为隐藏标签 v-if不成立的标签直接删除该标签-->
<!-- <div v-show="num==1">北京</div> -->
</div>
</body>
</html>
09-循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
// companies: ["百度", "阿里", "腾讯"]
companies: [{name: '百度', word: "B"}, {name: '阿里', word: "A"}, {name: '腾讯', word: "T"}],
info: {
name: "张三",
age: 20
}
}
})
}
</script>
</head>
<body>
<div id="app">
<ul>
<!-- 数组遍历 -->
<!-- <li v-for="co in companies"> {{co}} </li> -->
<!-- 自定义对象的 数组遍历 -->
<!-- <li v-for="co in companies"> {{co.name}} -- {{co.word}} </li> -->
<!-- 自定义对象的遍历 -->
<!-- <li v-for="(value, key) in info"> {{value}} -- {{key}} </li> -->
<!-- 取索引 -->
<!-- <li v-for="(co, index) in companies"> {{co.name}} -- {{co.word}} -- {{index}} </li> -->
<!-- <li v-for="(value, key, index) in info"> {{value}} -- {{key}} -- {{index}} </li> -->
<!-- vue2.0开始, 建议设置:key属性, 有利于提高vue的性能, vue内部会使用这个属性, :key要求在同一个父标签中不能重复 -->
<li v-for="(item, index) in items" :key="index"></li>
</ul>
</div>
</body>
</html>
10-_事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
methods: {
func1: function (event) {
alert('func1')
// event对应原生js的事件对象
// alert(event.type) // 事件类型
// alert(event.target) // 触发事件的对象
console.log(event)
// event.stopPropagation(); // 停止事件冒泡
// 很多标签都有默认行为, 比如a标签,点击后会跳转, form提交后会发送数据给服务器
// event.preventDefault();
}
},
})
}
</script>
</head>
<body>
<div id="app" onclick="alert('app')">
<button @click='func1'>按钮</button>
<!-- <a href="http://www.baidu.com" @click="func1">百度</a> -->
<!-- 使用事件修饰符 来阻止事件冒泡 -->
<!-- <a href="http://www.baidu.com" @click.stop="func1">百度</a> -->
<!-- 使用事件修饰符 来阻止事件冒泡 和 默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent.stop="func1">百度</a> -->
<!-- 只使用事件修饰符 -->
<!-- <a href="http://www.baidu.com" @click.prevent.stop>百度</a> -->
</div>
</body>
</html>
11-表单绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#app',
data: {
msg: "sh"
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- vue可以让 vue属性 和 表单内容 进行双向绑定
1. vue属性的值 会同步到 表单内容中
2. 表单内容 也会 同步到 vue属性 中 -->
<!-- 输入框 -->
<!-- <input type="text" name="username" v-model="msg"> -->
<!-- 多行输入框 -->
<!-- <textarea name="content" id="" cols="30" rows="10" v-model="msg"></textarea> -->
<!-- 单选框 -->
<!-- 男: <input type="radio" name="gender" id="" v-model="msg" value="1">
女: <input type="radio" name="gender" id="" v-model="msg" value="2"> -->
<!-- 复选框 绑定的vue属性必须是数组 -->
<!-- 北京: <input type="checkbox" name="city" id="" value="bj" v-model="msg">
上海: <input type="checkbox" name="city" id="" value="sh" v-model="msg">
深圳: <input type="checkbox" name="city" id="" value="sz" v-model="msg"> -->
<!-- 下拉框 -->
<select name="city" id="" v-model="msg">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
{{msg}}
</div>
</body>
</html>
12-过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
// 全局过滤器: 可以在所有vue对象绑定的标签中使用
Vue.filter("reverse", function (value) {
return value.split('').reverse().join('')
})
new Vue({
el: "#app",
data: {
msg: 'hello'
},
filters: { // 局部过滤器: 只能在当前vue对象绑定的标签中使用
upper: function (value) {
alert(value)
return value.toUpperCase() // 转大写
},
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- 过滤器作用: 对模板数据进行格式转换 -->
<!-- 格式: {{ vue属性/vue方法() | 过滤器名称 }} -->
{{ msg | upper }}
{{msg | reverse}}
</div>
</body>
</html>
13-自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
window.onload = function () {
Vue.directive("content", { // 全局自定义指令: 可以在所有vue对象绑定的标签中使用
inserted: function (el) {
el.innerHTML = "哈哈"
}
})
new Vue({
el: "#app",
data: {
msg: "hello"
},
directives: { // 局部的自定义指令: 只能在当前vue对象绑定的标签中使用
style: {
inserted: function (el) { // 当标签模板渲染完, 并添加到其父标签后会调用 (当页面首次显示时)
// el是 绑定的标签 对应的 原生js对象
el.style.backgroundColor = 'red'
el.style.width = '100px'
el.style.height = '30px'
},
componentUpdated: function (el) { // 当组件更新完成后调用(当数据更新页面后调用)
el.style.backgroundColor = 'yellow'
el.style.width = '100px'
el.style.height = '100px'
}
}
}
})
}
</script>
</head>
<body>
<div id="app" v-style> {{msg}}<br/>
<!-- <div id="app" v-content> {{msg}}<br/> -->
<button @click='msg="python"'>按钮</button>
</div>
</body>
</html>
14-_钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script>
var vm;
window.onload = function () {
vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
beforeCreate() { // vue对象初始化之前调用(vue属性/方法没有定义, 事件/属性监听都没有完成)
console.log("beforeCreate")
console.log(this.msg)
},
created() { // vue对象初始化之后调用(vue属性/方法已定义, 事件/属性监听都已完成)
console.log("created")
console.log(this.msg)
},
beforeMount() { // vue对象挂载(模板渲染)前调用 (模板内容还没有替换)
console.log('beforeMount')
console.log(document.getElementById("app").innerHTML)
},
mounted() { // vue对象挂载(模板渲染)后调用 (模板内容已经替换)
console.log('beforeMount')
console.log(document.getElementById("app").innerHTML)
},
beforeUpdate() { // vue对象的数据更新前调用 (数据同步到页面之前调用)
console.log('beforeUpdate')
console.log(document.getElementById("app").innerHTML)
},
updated() { // vue对象的数据更新后调用 (数据同步到页面之后调用)
console.log('updated')
console.log(document.getElementById("app").innerHTML)
},
beforeDestroy() {
// vue对象销毁前调用 (指的是vue对象删除, 删除后标签会保留下来, 只是vue的模板渲染/事件监听移除)
console.log('beforeDestroy')
},
destroyed() { // vue对象销毁后调用
console.log('destroyed')
},
})
}
</script>
</head>
<body>
<div id="app">
{{msg}}
<button @click='msg="python"'>按钮</button>
</div>
</body>
</html>
15-axios异步请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script src="./axios.min.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el: '#app',
data: {
movie_list: [] // 记录电影的列表
},
methods: {
func1: function () {
js_obj = {
kind: 1
}
// axios发起异步get请求
// axios({
// url: "http://192.168.42.86:5000/get_movie_list",
// method: 'get',
// params: js_obj // 设置查询字符串参数
// }).then(function (resp) { // then的回调函数会在请求成功时调用 会自动将json字符串转为js对象
// // console.log(resp)
// // 在响应的回调中不要使用this来操作vue对象 由于请求是异步的, this不再带代表当时使用的vue对象
// vm.movie_list = resp.data.movie_list
// }).catch(function (error) { // catch的回调函数会在请求失败时调用
// console.log(error)
// })
// post 发送数据 通过请求体
// 请求体中一般可以设置三类数据:
// 1> 键值对数据 如post表单
// 2> 文本数据 如json
// 3> 文件 如图片,视频
jsObj = {
movie_name: "大话西游",
movie_comment: "一生所爱"
}
// jsonStr = '{"movie_name": "大话西游", "movie_comment": "一生所爱"}'
// axios发起异步post请求 发送json数据
axios({
url: "http://192.168.42.86:5000/add_movie_comment",
method: "post",
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(jsObj) // js对象转为json字符串
}).then(function (resp) {
console.log(resp)
}).catch(function (error) {
console.log(error)
})
}
},
})
}
</script>
</head>
<body>
<div id="app">
<button @click='func1'>发起请求</button>
<ul>
<li v-for="(movie, index) in movie_list" :key="index"> {{movie}} </li>
</ul>
</div>
<form action="http://www.baidu.com" method="post">
姓名:<input type="text" name="username"><br/>
<input type="submit" value="发送">
</form>
</body>
</html>
16-聊天对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.talk_con {
width: 600px;
height: 500px;
border: 1px solid #666;
margin: 50px auto 0;
background: #f9f9f9;
}
.talk_show {
width: 580px;
height: 420px;
border: 1px solid #666;
background: #fff;
margin: 10px auto 0;
overflow: auto;
}
.talk_input {
width: 580px;
margin: 10px auto 0;
}
.whotalk {
width: 80px;
height: 30px;
float: left;
outline: none;
}
.talk_word {
width: 420px;
height: 26px;
padding: 0px;
float: left;
margin-left: 10px;
outline: none;
text-indent: 10px;
}
.talk_sub {
width: 56px;
height: 30px;
float: left;
margin-left: 10px;
}
.atalk {
margin: 10px;
}
.atalk span {
display: inline-block;
background: #0181cc;
border-radius: 10px;
color: #fff;
padding: 5px 10px;
}
.btalk {
margin: 10px;
text-align: right;
}
.btalk span {
display: inline-block;
background: #ef8201;
border-radius: 10px;
color: #fff;
padding: 5px 10px;
}
</style>
<script src="./vue.min.js"></script>
<script>
// 写出对应功能代码
// 1. 点击发送后, 如果内容为空, 显示弹窗
// 2. 发送成功后, 根据A/B添加页面内容
// 3. 发送成功后, 清空输入框的内容
window.onload = function () {
new Vue({
el: "#app",
data: {
inputValue: '', // 记录输入框的内容
selectValue: '0', // 记录下拉框的数值
talk_list: [{who: 'A', content: '吃饭了吗？'}, {who: 'B', content: '还没呢，你呢？'}]
},
methods: {
sendMsg: function () {
if (this.inputValue == '') { // 点击发送后, 如果内容为空, 显示弹窗
alert('输入框为空')
return
}
// 发送成功后, 根据A/B添加页面内容
if (this.selectValue == '0') { // A说
this.talk_list.push({who: 'A', content: this.inputValue}) // push 往数组中追加
} else { // B说
this.talk_list.push({who: 'B', content: this.inputValue})
}
// 发送成功后, 清空输入框的内容
this.inputValue = ''
}
}
})
}
</script>
</head>
<body>
<div id="app">
<div class="talk_con">
<div class="talk_show" id="words">
<!-- [{who: 'A', 'content': "吃饭了吗？"}, 第二条, 第三条] -->
<!-- <div class="atalk"><span>A说：吃饭了吗？</span></div> -->
<!-- <div class="btalk"><span>B说：还没呢，你呢？</span></div> -->
<div :class="talk.who=='A' ? 'atalk':'btalk'" v-for="(talk, index) in talk_list" :key="index"><span>{{talk.who}}说：{{talk.content}}</span></div>
</div>
<div class="talk_input">
<select class="whotalk" id="who" v-model="selectValue">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords" v-model="inputValue">
<input type="button" value="发送" class="talk_sub" id="talksub" @click='sendMsg'>
</div>
</div>
</div>
</body>
</html>
17-ES6语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num1 = 1 //
</script>
</head>
<body>
</body>
</html>
18-发送原生表单(拓展)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script src="./axios.min.js"></script>
<script>
var vm;
window.onload = function () {
vm = new Vue({
el: '#app',
data: {
username: "",
password: "",
movies: []
},
methods: {
func1: function () {
// axios 发起post请求 发送表单数据
var post_params = new URLSearchParams();
post_params.append('username', this.username);
post_params.append('password', this.password);
axios({
method: 'post',
url: 'http://127.0.0.1:5000/login',
headers: { // 设置post的请求形式
'Content-Type':'application/x-www-form-urlencoded'
},
data: post_params
}).then(function (resp) { // 请求回调
console.log(resp.data)
}).catch(function (error) {
console.log(error)
})
}
}
})
}
</script>
</head>
<body>
<div id="app">
用户名: <input type="text" name='username' v-model="username"><br/>
密码: <input type="text" name='password' v-model='password'><br/>
<button @click="func1">按钮</button>
</div>
</body>
</html>
19-上传文件(拓展)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.min.js"></script>
<script src="./axios.min.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
file: ''
},
methods: {
getFile(event) {
this.file = event.target.files[0]; // 从原生事件对象中取出文件数据
// console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData(); // 构建文件数据对象
formData.append('avatar', this.file);
axios({
method: 'post',
url: 'http://127.0.0.1:5000/upload_avatar',
headers: {
'Content-Type': 'multipart/form-data' // 发送文件需要设置content-type为form-data
},
data: formData
}).then(function (resp) {
console.log(resp)
}).catch(function (error) {
console.log(error)
})
}
}
})
}
</script>
</head>
<body>
<div id="app">
<form>
<label for="">上传文件:</label>
<!-- @change监听的是input的value值, 一旦发生变化就会触发 -->
<!-- $event会原生的事件作为参数传递给vue方法 -->
<input type="file" @change="getFile">
<button @click="submitForm">提交</button>
</form>
</div>
</body>
</html>
4600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
