Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例：
随着三个滑动框的变化，颜色框的颜色随之改变
1.1.实例代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue实现调色板</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--调色板框-->
<div v-bind:style="{width:'400px',height:'100px',background:`rgb(${R},${G},${B})`}"></div>
<p>
R:<input type="range" min="0" max="255" value="0" v-model="R"><span>{{R}}</span>
</p>
<p>
G:<input type="range" min="0" max="255" value="0" v-model="G"><span>{{G}}</span>
</p>
<p>
B:<input type="range" min="0" max="255" value="0" v-model="B"><span>{{B}}</span>
</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app",
data:{
R:"0",
G:"0",
B:"0"
}
});
</script>
1.2.效果图
二.微博评论发布框
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>微博评论框小程序</title>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<p>
<textarea cols="30" rows="10" v-model="info"></textarea><span>{{info.length}}/140</span>
</p>
<p>
<button v-bind:disabled="info.length==0||info.length>140">发布</button>
<button @click="clear">清除</button>
</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app",
data:{
info:""
},
methods:{
clear(){
this.info = '';
}
}
});
</script>
2.2.效果图
三.watch的使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>watch练习</title>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
搜索:<input type="text" v-model="info">
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app",
data:{
info:""
},
//监听实例属性值的变化
watch:{
//watch可以监听属性值的变化
//watch中的函数名称必须和属性值的名称一致
info(){
console.log("1231231");
}
}
})
</script>
3.2.效果图
四.百度预搜索功能
<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>百度预搜索功能</title>
<!--引包-->
<script src="./vue.min.js"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
My百度:<input type="text" v-model="arr" v-bind:style="{width:'300px',height:'20px'}">
</p>
<ul>
<li v-for="(item,ide) in info" v-if="arr.length>0" @mouseenter="select(ide)" @mouseout=
"selectover(ide)" :class="{active:index==ide}">{{item}}</li>
</ul>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:"",
info:[],
index:0
},
watch:{
arr(p){
<!--请求网址拼接-->
var path = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+p+"&cb=a";
//JSONP跨域拉取数据
//实现原理
//利用script的src属性
//利用函数声明+调用放在两个不同服务器上面
//动态创建script对象
var script = document.createElement("script");
//设置src属性
script.src = path;
//标签上树将请求发送出去
document.body.appendChild(script);
}
},
methods:{
select(a){
vm.index = a;
console.log(a+"------"+vm.index);
}, selectover(a){
vm.index = a+1;
console.log(a+"------"+vm.index);
}
},
});
function a(obj){
console.log(obj);
vm.info = obj.s;
}
</script>
4.2.效果图
五.生命周期函数
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue常用生命周期函数</title>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Vue生命周期函数</h1>
<p><input type="text" v-model="info"></p>
</div>
</body>
</html>
<script>
var vm = new Vue({
//挂载
el:"#app",
data:{
msg:"我是实例vm的data属性值！",
info:""
},
methods:{ },
//生命周期函数
//在vue实例对象创建之前执行
beforeCreate(){
console.log("在vm创建之前执行");
//此时访问不到vue的data中的属性值
console.log("this.msg="+this.msg);
},
//在vue实例创建完成后执行
created(){
console.log("在vm创建完成后执行！");
//此时实例已经创建完成，所以可以访问到data中的属性值
console.log("this.msg="+this.msg);
},
//在vue实例创建完毕，挂载模板之前执行
beforeMount(){
console.log("在vm已经创建完成和模板未挂载之前执行！");
console.log("this.msg"+this.msg);
},
//在vue实例已经创建且挂载完成后执行*****************
//在实际的工作中经常使用改函数拉取服务器的数据
mounted(){
console.log("在与模板挂载完成后执行");
console.log("this.msg"+this.msg)
}
})
</script>
5.2.效果图
六.axios的使用
axios是在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端;
6.1.实例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios的使用</title>
<script src="./vue.min.js"></script>
<script src="./axios.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<p>
<button @click="getReplace">axios的get请求</button>
<button @click="postReplace">axios的post请求</button>
</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"社会主义干饭人！"
},
methods:{
getReplace(){
axios.get("./getData.txt").then((obj)=>{
this.msg = obj.data;
});
},
postReplace(){
axios.post("./postData.txt").then((obj)=>{
this.msg = obj.data;
})
}
}
})
</script>
6.2.效果图
Vue.js小案例、生命周期函数及axios的使用的更多相关文章
- Vue.js小案例(2)
即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...
- Vue.js小案例(1)
数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...
- 微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- JS小案例：循环间隔重复变色
在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...
- vue进阶语法及生命周期函数
1.calss和style绑定 操作元素的 class 列表和内联样式style是数据绑定的一个常见需求,它两都是属性,所以可以通过v-bind来绑定 1.1绑定HTML class 可以给v-bin ...
- vue.js小总结
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...
- node.js(小案例)_实现学生信息增删改
一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...
- Vue定义组件和生命周期函数及实例演示！
定义全局组件 Vue.component("name",{...}) 定义局部组件 let Com = {....} new Vue({ data : ..., ..., comp ...
随机推荐
- 资源授权？对OAuth2.0的一次重新认识的过程
什么是OAuth? OAuth一个开放的授权标准,允许用户在不提供关键信息(如账号,密码)给第三方应用的前提下,让第三方应用去访问用户在某网站上的资源(如头像,用户昵称等). OAuth分为OAuth ...
- fastjson 漏洞利用 命令执行
目录 1. 准备一个Payload 2. 服务器上启动 rmi 3. 向目标注入payload 参考 如果你已经用DNSLog之类的工具,探测到了某个url有fastjson问题,那么接着可以试试能不 ...
- Python高级——多任务编程之线程
转: Python高级--多任务编程之线程 文章目录 线程概念 1. 线程的介绍 2. 线程的概念 3. 线程的作用 多线程的使用 1. 导入线程模块 2. 线程类Thread参数说明 3. 启动线程 ...
- 恭喜！Apache Hudi社区新晋两位Committer
1. 介绍 经过Apache Hudi项目委员会讨论及投票,向WangXiangHu和LiWei 2人发出Committer邀请,2人均已接受邀请并顺利成为Committer,也使得Apache Hu ...
- python学习总结篇（2）——函数
如其他语言一样,除了基本知识外,另外一个重要的板块就是函数了,python中也有函数. 在python中,函数的定义方式为: def 函数名( ): 下面通过几个简单的例子,看看python中的函 ...
- MindSpore：基于本地差分隐私的 Bandit 算法
摘要:本文将先简单介绍Bandit 问题和本地差分隐私的相关背景,然后介绍基于本地差分隐私的 Bandit 算法,最后通过一个简单的电影推荐场景来验证 LDP LinUCB 算法. Bandit问题是 ...
- 如何优雅的移植JavaScript组件到Blazor
Blazor作为一个新兴的交互式 Web UI 的框架,有其自身的优缺点,如果现有的 JavaScript 组件能移植到 Blazor,无疑让 Blazor 如虎添翼,本文就介绍一下自己在开发 Bul ...
- vue 页面生成图片保存
需求:将页面中的元素转成图片,支持保存或下载.要求下载的图片包含页面背景,头像,用户名,文本为"我的邀请码"和个人二维码. 实现:将页面绘制到canvas中,生成base64图片链 ...
- 自定义校验注解ConstraintValidator
一 前言 系统执行业务逻辑之前,会对输入数据进行校验,检测数据是否有效合法的.所以我们可能会写大量的if else等判断逻辑,特别是在不同方法出现相同的数据时,校验的逻辑代码会反复出现,导致代码冗余, ...
- API管理工具
开源的api文档管理系统 api文档 php 在项目中,需要协同开发,所以会写许多API文档给其他同事,以前都是写一个简单的TXT文本或Word文档,口口相传,这种方式比较老土了,所以,需要有个api ...