vue日常练习一
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="temp"></p>
<div v-html="thtml"></div>
<p>{{num1+num2}}</p>
<p>{{num1+10}}</p>
<p>{{mtemp?888:999}}</p>
<p v-show="vs">澳洲生物学家发现新草本植物，薯片味的</p>
<p v-if="vif">DIY：五种配方简单的唇膏</p>
<p v-else="velse">美军将在武器系统中加入人工智能</p>
<div v-for="item in userlist">
<ul>
<li>{{item.name}}</li>
<li>{{item.age}}</li>
<li>{{item.gender}}</li>
</ul>
</div>
<input type="text" v-model="showtemp">
<p>{{showtemp}}</p>
<input type="button" value="显示我" v-on:click="showme">
<select v-model="sel">
<option value="111">111</option>
<option value="222" selected>222</option>
<option value="333">333</option>
</select>
</div> <script>
var vm=new Vue({
el:"#app",
data:{
temp:"morgana",
showtemp:'',
sel:'111',
thtml:"<button>heeh<button>",
num1:1000,
num2:10,
mtemp:true,
vs:true,
vif:true,
userlist:[{'name':'hope','age':18,'gender':'girl'},
{'name':'katherine','age':8,'gender':'girl'},
{'name':'morgana','age':28,'gender':'girl'},
]
},
methods:{
showme:function(){
// alert(this.showtemp)
alert(this.sel)
}
}
})
setTimeout(function () {
vm.temp="hope"
},2000)
</script>
</body>
</html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="clickme" v-on:click="showme">
<ul>
<li v-for="item in items">
{{item.cityCode}}
{{item.cityName}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
items:[]
},
methods: {
showme: function () {
var self = this;
var url = 'hotcity.json' axios.get(url, {
params: {
username: "egon",
}
}).then(function (response) {
self.items = response.data.data.hotCity;
})
.catch(function (error) {
console.log(error)
})
} }
}) </script> </html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app">
username:<input type="text">
password:<input type="password">
<input type="button" value="login" v-on:click="login">
</div>
<script>
new Vue({
el:"#app",
data:{
username:'',
password:''
},
methods:{
login:function(){
var url="hotcity.json";
axios.post(
url,{username:this.username, password:this.password,},
{"headers":{"Content-Type":"application/x-www-form-urlencodeed"}}
).then(function(response){
console.log(response)
}).catch(function (error) {
console.log(error)
})
}
}
})
</script>
</body>
</html>
vue日常练习一的更多相关文章
- vue 日常开发小细节
1. element-ui 日期选区禁用,设置属性 disabledDate: (time) => { const curDate = (new Date()).getTime() const ...
- vue日常问题总结
1.Vue项目启动后首页URL带的#该怎么去掉? vue-router中默认使用的是hash模式,URL中带有#号,我们可以用如下代码修改成history模式: import Vue from 'vu ...
- Vue日常开发问题
1.sh: webpack-dev-server: command not found 我的公众号:
- vue日常学习（2）
1.组件学习之内容分发 1.1 作用域插槽 父级 <div class="parent"> <child> <template scope=" ...
- vue日常学习
1.$refs可以用来进行父子级间通信.ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件.用法如下parent.$refs.idname 使用方法: 在父级元素上加上ref属性 &l ...
- Vue日常报错
报错信息: Error: Cannot find module 'webpack/bin/config-yargs' at Function.Module._resolveFilename (inte ...
- 『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...
- Vue packages version mismatch的解决方法 初来乍到，踩坑日常
初来乍到,踩坑日常 这个问题也是我也是接受别人项目,出现的问题,在下载好依赖后运行的时候报这样的错误 它上面显示两个版本一个vue的版本,一个vue-template-compiler版本,我这边忘了 ...
- [20190618]日常学习记录(二)-flex属性及vue实战
早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...
随机推荐
- Spring data jpa 实现简单动态查询的通用Specification方法
本篇前提: SpringBoot中使用Spring Data Jpa 实现简单的动态查询的两种方法 这篇文章中的第二种方法 实现Specification 这块的方法 只适用于一个对象针对某一个固定字 ...
- Avoid nesting too deeply and return early避免嵌套太深应尽早返回
当某个变量与多个值进行比较的时候 不要用多个if else 判断是否相等 将多个值放在数组里,然后用PHP函数in_array(mixed $needle,array $haystack),检查数组$ ...
- JS中的“use strict” 严格模式
1.介绍严格模式 2.严格模式影响范围 变量: var.delete.变量关键字 对象: 只读属性. 对象字面量属性重复申明 函数:参数重名.arguments对象.申明 其他:this.eval. ...
- 使用GridSearchCV寻找最佳参数组合——机器学习工具箱代码
# -*- coding: utf-8 -*- import numpy as np from sklearn.feature_extraction import FeatureHasher from ...
- JS循环遍历JSON数据的方法
JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...
- 201621123014《Java程序设计》第七周学习总结
1. 本周学习总结 1.1 思维导图:Java图形界面总结 答: 1.2 可选:使用常规方法总结其他上课内容. 答:1.Swing组件主要分为容器组件和其他组件. 2.JFrame和JPanel都可以 ...
- C++之结构体struct
原创博客,转载请注明出处! 1.简介 # C++提供一些基本的数据类型(int,float,double,char等),但由于程序处理的问题通常较复杂,基本的数据类型不能满足程序需要,因此C++允许用 ...
- 修改dedecms 列表页上一页 下一页 方法！
dedecms根目录下include文件夹下:arc.listview.class.php文件! 1.简单文字替换:如 上一页替换成上页,直接替换即可! 2.文字替换成图片:上一页替换成<img ...
- CERC2016 爵士之旅 Jazz Journey
传送门(洛谷) 题目大意 给定$n$个位置,和一个长为$m$的序列$A$,你需要经过一条直接的边从第$A_i$个位置到第$A_{i+1}$个位置. 每条有向边$(u,v)$分为两种,第一种可以花费$C ...
- redis实战之事务与持久化
1. 事务描述 (1)什么是事务 事务,就是把一堆事情绑在一起,按顺序的执行,都成功了才算完成,否则恢复之前的样子 事务必须服从ACID原则,ACID原则分别是原子性(atomicity).一致性(c ...