1.实现简单记事本
1.1 功能
1.1.1 新增内容
步骤
1)生成列表结构(v-for 数组)
2)获取用户输入(v-model 双向绑定)
3)回车,新增数据(v-on .enter事件修饰符)
4)页面布局不熟悉,可以通过审查元素的方式快速找到元素
1.1.2 删除内容
步骤
1)点击删除指定的内容( 根据索引删除元素)
2)在methods中添加一个删除的方法,使用splice函数进行删除
1.1.3 统计操作
步骤
1)统计页面信息的个数,就是列表中的元素的个数.
2)获取 list数组的长度,就是信息的个数
1)基于数据的开发方式
2)v-text设置的是文本,可以使用简化方式 {{}}
1.1.4 清空数据
步骤:
1)点击清除所有信息
2)本质就是清空数组
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
</head>
<body>
<!-- VUE示例接管区域 -->
<section id="app">
<!-- 输入框 -->
<header class="header">
<h1>VUE记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="输入日程"
class="new-todo"
v-model="inputValue"
@keyup.enter="add"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="listview">
<!-- 1.使用v-for指令 生成列表结构 -->
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index+1}}</span> <label>{{item}}</label>
<!-- 2.删除操作 传递index -->
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count">
<strong>{{list.length}}</strong> items left
</span>
<button class="clear-completed" @click="clear()">
Clear
</button>
</footer>
</section>
</body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
list: ["写代码", "吃饭", "睡觉", "打豆豆"],
inputValue: "996还是997",
},
methods: {
//新增日程方法
add: function () {
//将用户输入的内容添加到list
this.list.push(this.inputValue);
},
remove: function (index) {
console.log(index);
//使用 splice(元素的索引,删除几个)
this.list.splice(index, 1);
},
//清空操作
clear: function () {
this.list = [];
},
},
});
</script>
</html>
2.天气查询案例
2.1 需求分析
功能分析: 回车查询
输入内容,点击回车 (v-on.enter)
访问接口,查询数据 (axios v-model)
返回数据,渲染数据
2.2 接口文档
请求地址:http://wthrcdn.etouch.cn/weather_mini 请求方法:get
请求参数:city (要查询的城市名称)
响应内容:天气信息
main.js
/**
*
* 请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city (要查询的城市名称)
响应内容:天气信息
*/
var VM = new Vue({
el: "#app",
data: {
city: "",
//定义数组保存 天气信息
weatherList: [],
},
//编写查询天气的方法
methods: {
searchWeather: function () {
console.log("天气查询");
console.log(this.city);
var that = this;
//调用接口
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(
function (resp) {
console.log(resp.data.data.forecast);
//获取天气信息 保存到weatherList
that.weatherList = resp.data.data.forecast;
},
function (error) {}
);
},
},
});
天气案例HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天气查询</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
<style>
/*
1.应用的逻辑代码 建议与页面进行分离,使用单独的JS编写
2.axios中 回调函数中的this 需要先保存 再使用
3.服务器返回的数据比较复杂,获取数据的时候 要注意层级结构
*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div class="wrap" id="app" v-cloak>
<div class="search_form">
<div class="logo">天气查询</div>
<div class="form_group">
<input
type="text"
class="input_txt"
placeholder="请输入要查询的城市"
v-model="city"
@keyup.enter="searchWeather"
/>
<button class="input_sub">回车查询</button>
</div>
</div>
<ul class="weather_list">
<!-- 展示数据 -->
<li v-for="item in weatherList">
<div class="info_type">
<span class="iconfont">{{item.type}}</span>
</div>
<div class="info_temp">
<b>{{item.low}}</b>
~
<b>{{item.high}}</b>
</div>
<div class="info_date"><span>{{item.date}}</span></div>
</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 自己的js -->
<script src="./js/main.js"></script>
</body>
</html>
2.3 案例总结
1)应用的逻辑代码,建议与页面进行分离,使用单独的JS编写
2)axios回调函数中的 this的指向改变,无法正常使用, 需要另外保存一份
3)服务器返回的数据比较的复杂时,获取数据时要注意层级结构
2.4 解决页面闪烁问题
我们发现访问天气预报案例页面时, 使用插值表达式的地方出现了闪烁问题,如何解决呢
v-cloak指令
作用: 解决插值表达式闪烁问题
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
1)添加样式
<style>
/* 通过属性选择器,设置 添加了v-cloak */ [v-cloak] {
display: none;
}
</style>
2)在id为app的div中添加 v-cloak
<div class="wrap" id="app" v-cloak>
3.案例监听姓名变化,实时显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<label>名:<input type="text" v-model="fristName" /></label>
<label>姓:<input type="text" v-model="lastName" /></label>
{{fullNameComputed}}
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
fristName: "",
lastName: "",
fullName: "",
},
//侦听器
watch: {
fristName: function (nval, oval) {
//参数 1.新值,2.旧值
this.fullName = nval + " " + this.lastName;
},
lastName: function (nval, oval) {
this.fullName = this.fristName + " " + nval;
},
},
});
</script>
</html>
节选自拉钩教育JAVA系列教程