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 ...
随机推荐
- HTTP常用请求头大揭秘
本文为<三万长文50+趣图带你领悟web编程的内功心法>第四个章节. 4.HTTP常用请求头大揭秘 上面列出了报文的各种请求头.响应头.状态码,是不是感到特别晕呢.这节我们就专门挑一些最常 ...
- 【ZeyFraのJavaEE开发小知识01】@DateTimeFomat和@JsonFormat
@DateTimeFormat 所在包:org.springframework.format.annotation.DateTimeFormat springframework的注解,一般用来对Dat ...
- Spring Boot集成Springfox Swagger3和简单应用
摘要:Springfox Swagger可以动态生成 API 接口供前后端进行交互和在线调试接口,Spring Boot 框架是目前非常流行的微服务框架,所以,在Spring Boot 项目中集成Sp ...
- 后端程序员之路 14、NumPy
NumPy - NumPyhttp://www.numpy.org/ NumPy-快速处理数据 - 用Python做科学计算http://old.sebug.net/paper/books/scipy ...
- rabbitmq如何保证消息可靠性不丢失
目录 生产者丢失消息 代码模拟 事务 confirm模式确实 数据退回监听 MQ事务相关软文推荐 MQ丢失信息 消费者丢失信息 之前我们简单介绍了rabbitmq的功能.他的作用就是方便我们的消息解耦 ...
- 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面
剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 Offer 21 这题的解法其实是考察快慢指针和头尾指针. package com.walegarrett.offer; /** * @Aut ...
- Python编程中可能经常用到的函数
1.os.walk() 一般用法为 import os ph=r'D:\temp\build' for root,dirs,files in os.walk(ph): print(root,dirs, ...
- android分析之Condition
Condition的含义是条件变量,其实现依赖于系统,一般都要配合Mutex使用,使用步骤为:给mutex上锁(Lock),调用wait等待"条件"发生,如果没有发生则re-wai ...
- Nodejs学习笔记（1） Nodejs安装+借助express模块简单部署服务器
1 安装 1.1 下载和安装 1.2 什么是REPL?如何使用? 1.3 npm对单一模块的安装和删除功能 1.4 通过package.json自定义模块(安装模块) 1.5 设置全局目录 2 部署网 ...
- A New Stone Game POJ - 1740
题目链接:https://vjudge.net/problem/POJ-1740#author=0 题意:有n堆石子,每次你可以选一堆拿走任意数量的石子,而且你还可以选择从这一堆剩下石子中取任意数量石 ...