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 ...
随机推荐
- Hive 填坑指南
Hive 填坑指南 目录 Hive 填坑指南 数据表备份 数据表备份 方法1:create table 表名_new as select * from 原表 create table 表名_new a ...
- 后端程序员之路 52、A Tour of Go-2
# flowcontrol - for - for i := 0; i < 10; i++ { - for ; sum < 1000; { ...
- System.IO.IOException:“找不到资源“window1.xaml”。” 解决方法
报错:找不到资源"window1.xaml 原因:在编译时使用的是en-US选项进行编译并生成了en-US为名的文件夹,里面包含了可本地化的内容:但是你的本地系统使用的是zh-CN,在你运行 ...
- Redis单机数据库的实现原理
本文主要介绍Redis的数据库结构,Redis两种持久化的原理:RDB持久化.AOF持久化,以及Redis事件分类及执行原理.最后,分别介绍了单机班Redid客户端和Redis服务器的使用和实现原理. ...
- 初窥MyBatis-普通的CRUD操作
编写接口 编写对应的Mapper.xml中的sql语句 测试(增删改需要提交事务) <mapper namespace="com.perwrj.dao.UserMapper" ...
- C#中事件流程的简单理解
C#中事件流程的简单理解 C#中事件基于委托,要理解事件要先理解委托,但是现在我还没想好怎么写委托,如果不懂委托可以先找找委托的文章 事件基于委托,为委托提供了一种发布/订阅机制 一上来就是这句话,很 ...
- jdk8的安装与环境搭建
jdk8的安装与环境搭建 jdk8下载网址:https://www.oracle.com/cn/java/technologies/javase/javase-jdk8-downloads.html ...
- Excel老式技术
Excel老式技术 VBS宏脚本嵌入明文代码
- 关于github的使用学习心得
先写先介绍一下如何用github上创建一个项目吧. 用户登录后的界面如上所示.右下角是我们已经建好的库.点击其中任何一个就可以查看相应的库了.如果要新建一个项目的话,就点击Start a projec ...
- E - Recursive sequence HDU - 5950 （矩阵快速幂）
题目链接:https://vjudge.net/problem/HDU-5950 思路: 构造矩阵,然后利用矩阵快速幂. 1 #include <bits/stdc++.h> 2 #inc ...