1.学习目标
了解Vue初步
2.学习目标
2.1 样式绑定
将样式与数据关联，通过数据控制样式的使用。
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
例子：
将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ 'active': isActive }"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
</body>
</html>
2.2 事件处理器
通过监听事件，调用相应的逻辑处理对数据进行操作，进而通过模板和样式绑定改变视图层的展现
事件监听可以使用 v-on 指令：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
</html>
运行结果：
2.3 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
3.练习
3.1 获取动态时间
代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<script type="text/javascript">
function getnow(){
//1、获得当前时间，格式化时间
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
if(month<10){
month="0"+month;
}
var date=now.getDate();
if(date<10){
date="0"+date;
}
var hour=now.getHours();
if(hour<10){
hour="0"+hour;
}
var minute=now.getMinutes();
if(minute<10){
minute="0"+minute;
}
var second=now.getSeconds();
if(second<10){
second="0"+second;
}
var nowstr=year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second;
//alert(nowstr);
//2、显示时间 html
//获得标签对象
var nowspan=document.getElementById("nowspan");
nowspan.innerHTML=nowstr;
//3、使时间动起来
setTimeout("getnow()", 1000);
}
</script>
<body onLoad="getnow()">
<span id="nowspan" />
</body>
</html>
运行结果：
*动态时间
4.课堂练习
4.1 查询天气
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
});
$(document).ready(function(){
$("button").click(function(){
var city=$("#city").val()
$.ajax({
type: "GET", //请求方式
url: "http://wthrcdn.etouch.cn/weather_mini?city="+city, //url地址，就是json文件的路径
dataType: "json", //数据类型，可以是 text xml json script jsonp
success: function(result){ //result是响应信息返回的结果，此处包含了返回的json对象
addBox(result.data.forecast); //调用addBox函数，将result数据添加到box容器中
}
});
});
});
function addBox(json_data) {
$.each(json_data, function(index, obj) {
$("#box").append("<div'>" +
"<p>" + obj['date'] + "</p>" +
"<p>" + obj['high'] + "</p>" +
"<p>" + obj['fengli'] + "</p>" +
"<p>" + obj['low'] + "</p>" +
"<p>" + obj['fengxiang'] + "</p>" +
"<p>" + obj['type'] + "</p>" +
"</div>");
});
}
</script>
</head>
<body>
<div>
<h3>请输入城市：</h3>
城市：<input type="text" id="city"/>
<br>
<button type="button">提交</button>
</div>
<br>
<div id="box"></div>
</body>
</html>
运行结果：
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
