学习周记 Week12

最新推荐文章于 2021-06-26 23:27:46 发布

Daisy47199390

最新推荐文章于 2021-06-26 23:27:46 发布

阅读量81

点赞数

分类专栏：学习周记

本文链接：https://blog.csdn.net/weixin_47199390/article/details/118191590

版权

学习周记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学习周记 Week12

1.学习目标
2.学习内容
3.练习
- 3.1 缓冲运动
- 3.2 浮动窗口

1.学习目标

了解Vue初步

2.学习内容

2.1 Vue本质

Vue的本质是将数据和内容展现的视图分开，即所谓的MV模式，代码可以分为三个板块：模型(Model)，逻辑控制(*)，视图(View)，模型板块负责数据，视图板块负责样式，逻辑控制负责将视图和数据关联。这样的好处是，当需求发生变动时，只需要修改对应的板块。

2.2 Vue的快速起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue({
  // 选项
})

2.3 Vue的模板语法

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

运行前：
在这里插入图片描述
运行后：

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
例子：

<!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">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
按钮的事件我们可以使用 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">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

运行前：
在这里插入图片描述
运行后：

2.4 条件语句、循环语句

可以用 v-else 指令给 v-if 添加一个 “else” 块：

例子：随机生成一个数字，判断是否大于0.5，然后输出对应信息

<!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">
	<div v-if="Math.random() > 0.5">
	  Sorry
	</div>
	<div v-else>
	  Not sorry
	</div>
</div>
	
<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>

循环使用 v-for 指令

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：
例子：

<!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">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>

3.练习

3.1 缓冲运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		#box{
			width: 200px;
			height: 200px;
			background: lightcoral;
			position: absolute;
			left: 0;
			top: 0;
		}
		
	</style>
	<body>
		<div id="box"></div>
		
		<script>
		 var box = document. getElementById("box");

    //移入
    box.onmouseover = function(){
	animate(box,300);  //传入参数
    }
    //移出
    box.onmouseout = function(){
	animate(box,0);
    }

    var timer = null;
    function animate(dom,target){
    clearInterval(timer);
    timer = setInterval(function(){

        var speed = (target-dom.offsetLeft)/10;
		
	  /*dom.offsetLeft
		0(开始)——>	300(停止)
		
		targct-dom.offsetLeft   300/10=30
		……
		target-30				270/10=27
		300-57					243/10=24.3
		*/
		
		//console.log(speed);
		
		/*if(speed>0){        //if判断语句
			speed = Math.ceil(speed);
        }else{
            speed = Math.floor(speed);
        }
		*/
	   speed = speed>0 ?Math.ceil(speed):Math.floor(speed); //优化

        if(target == dom.offsetLeft){

            //停止定时器
            clearInterval(timer);

        }else{
            dom.style.left = dom.offsetLeft + speed +"px";
        }
    },30)
}

		</script>
	</body>
</html>

3.2 浮动窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
	<!-- 浮动层 -->
	<div id="ad" style=" position:absolute;">
    	<a href="http://www.baidu.com">
    		<img src="http://pic.616pic.com/ys_bnew_img/00/03/74/DypSW7JCnf.jpg" width="220" height="95" border="0">
    	</a>
    </div>
    <script type="text/javascript">
		//定义浮动初始位置
		var x=50,y=50;
		//定义浮动层每次移动的幅度
		var step=1000;		//单位为像素
		//定义浮动层每次移动的时间间隔
		var delay=100; //单位为毫秒
		//判断横、纵坐标是否在范围内
		var x_flag=true;
		var y_flag=true;
		//获取浮动层对象
		var floatObj=document.getElementById("ad");
		
		function floatAD(){
			//上、下、左、右四个边界点
			var top_border=0;
			var bottom_border=document.documentElement.clientHeight-floatObj.offsetHeight;
			var left_border=0;
			var right_border=document.body.clientWidth-floatObj.offsetWidth;
			//实现移动，移动的过程其实就是x轴移动一个幅度，y轴移动一个幅度，这里要注意超出边界范围的时候如何处理
			floatObj.style.left = x + document.body.scrollLeft //更新层的X坐标，实现X轴方向上的运动；document.body.scrollLeft为文档区域的滚动条向右拉的距离，以保证在滚动条右拉时层仍在可见范围内 
			floatObj.style.top = y + document.body.scrollTop //更新层的Y坐标，实现Y轴方向上的运动；document.body.scrollTop为文档区域的滚动条向下拉的距离，以保证在滚动条下拉时层仍在可见范围
			x = x+step*(x_flag?1:-1);
			if(x<left_border){
				x_flag=true;
				x=left_border;
			}
			if(x>right_border){
				x_flag=false;
				x=right_border;
			}
			y = y+step*(y_flag?1:-1);
			if(y<top_border){
				y_flag=true;
				y=top_border;
			}
			if(y>bottom_border){
				y_flag=false;
				y=bottom_border;
			}
		} 
		var move = setInterval("floatAD()",delay);
		//鼠标进入图片停止移动
		floatObj.οnmοuseοver=function(){
			clearInterval(move);
		}
		floatObj.οnmοuseοut=function(){
			move=setInterval("floatAD()",delay);
		}
    </script>
</body>
</html>