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 ...
随机推荐
- Linux文件常用指令
目录 Linux文件常用指令 1.pwd 显示当前目录 2.cd 切换目录 3.mkdir 创建目录 4.touch 修改或创建文件 5.ls 显示目录下的内容 6.cat 查看文件信息 7.echo ...
- Svelte 码半功倍
你未注意到的最重要的指标. 注意:原文发表于2019-04-20,随着框架不断演进,部分内容可能已不适用. 所有代码都有 BUG,你写的越多,BUG 越多,这很合情合理. 同时,写的越多,费时越多,留 ...
- SpringCloud(一):微服务架构概述
1-1. 系统进化理论概述 在系统架构与设计的实践中,经历了两个阶段,一个阶段是早些年常见的集中式系统,一个阶段是近年来流行的分布式系统: 集中式系统: 集中式系统也叫单体应用,就是把所有的程序.功 ...
- 数据库事务 ACID属性、数据库并发问题和四种隔离级别
数据库事务 ACID属性.数据库并发问题和四种隔离级别 数据库事务 数据库事务是一组逻辑操作单元,使数据从一种状态变换到另一种状态 一组逻辑操作单元:一个或多个DML操作 事务处理原则 保证所有事务都 ...
- 【pytest官方文档】解读fixtures - 7. Teardown处理，yield和addfinalizer
当我们运行测试函数时,我们希望确保测试函数在运行结束后,可以自己清理掉对环境的影响. 这样的话,它们就不会干扰任何其他的测试函数,更不会日积月累的留下越来越多的测试数据. 用过unittest的朋友相 ...
- @MockBean 注解后 bean成员对象为 null？
笔者在写自测的时候遇到的问题: 我想模拟一个Bean,并在之后使用Mockito打桩,于是使用了 @MockBean 注解(spring集成mockito的产物),但代码编写好了后启动测试却报Null ...
- 【python】虚拟环境管理之 virtualenv 、pipenv
虚拟环境介绍 应用场景 python在安装第三方包时,会被pip安装到/site-package下,如果我们需要同时维护多个python项目,那这些项目都会共用一个python,而真实需求是多个项目之 ...
- 【odoo14】第二十一章、性能优化
通过odoo框架,我们可以开发大型且复杂的应用.良好的性能是实现这一目标的基础.本章,我们将探讨如何提高应用性能.同时,我们也会讲解找出影响性能的因素. 本章包含以下内容: 记录集的预读取模式 将数据 ...
- Java8的新特性--Optional
目录 Optional 一.Optional类是什么? 二.Optional类常用的方法 1. 创建Optional实例 1.1 Optional.of(T) 1.2 Optional.empty() ...
- 攻防世界 reverse parallel-comparator-200
parallel-comparator-200 school-ctf-winter-2015 https://github.com/ctfs/write-ups-2015/tree/master/sc ...