实习第二天

想…

已于 2022-07-31 00:23:40 修改

阅读量201

点赞数

分类专栏：实习日记文章标签： javascript 前端 vue.js

于 2022-07-13 09:28:27 首次发布

本文链接：https://blog.csdn.net/weixin_53491844/article/details/125756872

版权

实习日记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue第二天内容

1.数据绑定

1.1 概述

把data里的数据和模板中的标签的值进行绑定的过程我们就称为数据绑定。

1.2 分类

	内容绑定  标签的value属性

属性绑定：任意属性的值都可以通过vue的数据绑定进行设置值。

单向数据绑定

双向数据绑定

1.3 格式

单向数据绑定

v-bind:属性值 = "变量名"  
	属性值：任意，只要是改标签的属性都可以使用
	变量名： data存储的数据的变量名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script type="text/javascript" src="./js/vue.js"></script>
		<style type="text/css">
			.color:red;
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-bind:value="msg" v-bind:class="color"/>
			<a v-bind:href="go">点我啊！</a>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			props:[],
			data() {
				return{
					msg:'欢迎来到Vue世界！',
					go:'http://www.baidu.com',
					color:'',
				}
			}
		});
		
	</script>
</html>

1.4 格式简化

v-bind:属性名 等价于 :属性名

1.5 双向数据绑定

内存的改变会影响页面的改变，同样页面的改变也会影响内存的改变。

1.5.1 格式

v-model="绑定的数据变量" 
切记：
	不是所有的标签都可以使用v-model双向数据绑定，只有input输入框里面包换value属性的标签才可以进行正常操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script type="text/javascript" src="./js/vue.js"></script>
		<style type="text/css">
			.color{
			  color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-bind:value="msg" :class="color" />
			<a v-bind:href="go" :class="color">点我啊！</a>
			<p>
					<input type="text" v-model="userName" />
			</p>
			{{userName}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			props:[],
			data() {
				return{
					msg:'欢迎来到Vue世界！',
					go:'http://www.baidu.com',
					color:'color',
					userName:'bbb',
				}
			},
		
		});
		
	</script>
</html>

2.事件绑定

2.1 概述

把我JavaScript的事件可以和vue进行绑定产生的结果称为事件绑定，事件绑定也可以绑定我们自定义的事件。

2.2 格式

v-on:事件名称="表达式|函数名" 简写为：@事件名="表达式|函数名"

2.3 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 
				组件传参：
					
			-->
			<button v-on:oop="test()">点我啊</button>
			<img src="./img/小兔兔.jpg" @mouseover="over()" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data() {
				return{
					
				}
			},
			//这里存放我们vue要使用到的方法
			methods:{
				test(){
					console.log("我被点击了！");
				},
				over(){
					console.log("出发了！");
				}
			}
		});
	</script>
</html>

3.过滤器

3.1 概述

把不需要的资源进行过滤，最终留下需要的资源。

3.2 过滤器的分类

1.全局过滤器：整个vue都可以使用

2.组件过滤器：只有当前这个组件才能使用

3.3 格式

全局过滤器
		Vue.filter('过滤器名称',过滤方法fn)
组件内过滤器：
		filters:{'过滤器名称',过滤方法}
过滤器使用方式：
{{msg|过滤器名}}
切记最终过滤器方法return回来的值就是你们需要的值。

3.4 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
			<div id="app">
				<p>你输入的：<input type="text"  v-model="instring"/></p>
				<p>翻转后的数据：{{instring|reversal()}}</p>
				 <p>
					过滤后的名称：
						{{names|removeNames()}}
				</p> 
				<p>
					过滤后的商品：
					{{listgoods|filterGoods()}}
				</p>
			</div>
	</body>
	<script type="text/javascript">
		Vue.filter('reversal',function(val){ //val:需要过滤的原始数据
				/**
				 * split:分割字符串，返回数组
				 * reverse：反转数组
				 * join：拼接字符数组变成一个字符出啊。
				 */
			var reversal = val.split('').reverse().join('');
			return reversal ;
		})
		Vue.filter('removeNames',function(val){ //val:需要过滤的原始数据
			var nameArry=[];
			for(var i = 0 ; i < val.length; i++){
				var name = val[i] ;
				var index = name.indexOf("张");
				if(index == -1){
					nameArry.push(name);
				}
			}
			return nameArry ;
		})
		new Vue({
			el:'#app',
			data() {
				return{
					instring:'',
					names:['张三丰','张杰','李四','王五','赵张云'],
					listgoods:[{id:1,name:'康师傅冰红茶'},{id:2,name:'康师傅老坛酸菜'},{id:3,name:'康师傅茉莉蜜'}]
				}
			},
			//编写过滤器
			filters:{
				filterGoods(val){
						//ES6 : goods代表数组中的每个元素，=>{对每个数组元素要进行的操作}
						var filterGoodsList = [];
						val.forEach(goods=>{
							//goods:代表一个对象
							//console.log(goods.name);
							console.log();
							if(goods.name.indexOf('老坛酸菜') == -1){
								filterGoodsList.push(goods);
							}
						});
						return filterGoodsList;
				}
			}
		});
	</script>
</html>

4.监听器 watch 计算属性 computed

4.1 概述

监听客户的某些动作，如果发生我们要执行的一些操作。

4.2 格式

watch{
	需要监听的数据：{
		处理器(){
			对数据进行操作。
		}
	},
	deep:true,//深度监听，如果需要监听对象类型就必须加这段代码
}

4.3 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器</title>
	   <script type="text/javascript" src="./js/vue.js"></script>
	</head>
	
	<body>
			<div id="app">
				<input type="text" v-model="msg" />
			</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data() {
				return{
					msg:'',//见名知意  大驼峰+小驼峰
				}
			},
			//mvc: m:model (pojo,mapper,service),v :view 视图对象 modelAndView .c:controller  
			//this:在vue如果你想跨属性获取变量，必须通过this关键字
			watch:{
				msg:{
					handler(newval,oldval){
						console.log(newval);
						if(newval == '123'){
							this.msg = '456'
						}
						//console.log(oldval);
					}
				}
			}
		});
	</script>
</html>

4.4 计算属性computed

4.4.1 计算属性概述

计算属性其实就是对多个数据进行监听然后做运算操作。

4.4.2 格式

computed:{
	计算方法{
		return：最终的结果
	}
}
只要在计算属性里面使用到的vue的是据，都会自动监听他的状态变化。

4.4.3 代码

vuex  state

想…

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实习第二天

实习第二天
复制链接

扫一扫

专栏目录