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 ...
随机推荐
- vue核心---虚拟dom的实现
生成dom的过程 由vue模板生成虚拟dom 虚拟dom转换成真实dom渲染到html页面 代码实现 要实现的真实dom <div id="box"> <p cl ...
- CSS：CSS基础
和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言.它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式. CSS规则集 选择器(Selector):元素的名 ...
- 解决appium点击软键盘上的搜索按钮
在执行appium自动化测试的时候,需要点击软件盘上的搜索按钮. 具体操作步骤如下: 前提:需要事先安装搜狗输入法 1.唤醒软件盘,可以封装到一个类里,用到的时候随时调用. import os#调起s ...
- 剑指 Offer 46. 把数字翻译成字符串 + 动态规划
剑指 Offer 46. 把数字翻译成字符串 Offer_46 题目描述 题解分析 本题的解题思路是使用动态规划,首先得出递推公式如下 dp[i] = dp[i-1]+dp[i-2](如果s[i-1] ...
- Ext.Net一般处理程序上传文件
引言 最近公司项目全部转向前端化,故所有aspx页面业务逻辑尽可能的转到用户控件前台页面完成.以方便每次发布项目时只是替换前端页面不会影响客户体验. 既然转到前台逻辑,那么必须走后台的业务也就单独封装 ...
- crudapi零代码开发平台应用场景和成功案例
应用场景 在前面文章中,已经介绍了crudapi主要功能和使用方式,本文主要介绍crudapi应用场景以及具体的使用方式. 概要 crudapi属于产品级的零代码平台,无需编程,通过配置自动生成cru ...
- 面试必备——Java多线程与并发（二）
1.synchroized相关(锁的是对象,不是代码) (1)线程安全问题的主要原因 存在共享数据(也称临界资源) 存在多线程共同操作这些共享数据 解决:同一时刻有且只有一个线程在操作共享数据,其他线 ...
- Java数组：多维数组（二维），Arrays类，冒泡排序
Arrays类数组工具类:java.util.ArraysArrays类中的方法都是static修饰的静态方法,在使用的时候可以直接使用类名进行调用,而"不用"使用对象来调用 具有 ...
- 使用css3和javascript开发web拾色器实例
本实例中的web拾色器功能使用css3实现页面效果,即在页面上显示的元素用css3样式来实现的.再使用js生成拾色器颜色数据,并控制各元素的鼠标事件.当事件作为反应时,获取到对应的数据并显示颜色值. ...
- Python中类的特殊属性和魔术方法
1.属性 属性 含义 __name__ 类.函数.方法等的名字 __dir__ __module__ 类定义所在的模块名 __class__ 对象或类所属的类 只是返回基类 __bases__ ...