vue学习日记day2

最新推荐文章于 2024-07-18 13:56:07 发布

屁小屁小屁

最新推荐文章于 2024-07-18 13:56:07 发布

阅读量164

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/pjxaaaaa/article/details/112151791

版权

vue学习日记day2

还是对第一天的补充：

新的一些选项
例如：template模板，计算属性，监听观察，v-if和v-show的初步认识

学习内容（新选项）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
		<style type="text/css">
			h2{
				
			}
			h3{
				background-color: #000;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>{{message}}</h2> 
			<h3>{{msg}}</h3>
			<h4>
				{{say()}}
			</h4>
			<!-- count要当做属性调用，不能当做方法来调用 -->
			<h3>{{count}}</h3> 
			<input type="text" name="" id="" value=""  v-model="name"/>
		</div> 
		
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{  
					message:'hello',
					msg:'我是另外一个',
					name:'pjx'
				},
				//template:"<p>我是通过模板显示的:{{msg}}</p>",
				methods:{
					say:function(){ //简写为say()
						return this.name+"说："+this.message
					}
				},
				//计算属性
				computed:{
					count(){
						return 1+1;
					}
				},
				//监听、观察 watch
				watch:{
					name(newdata,old){
						console.log(newdata,old)
					}
				},
				
			})
			console.log(vm.$data.message)
		</script>
	</body>
</html>

这个代码就是新的一些选项，在视图部分不要写太多东西，都写在下面的模型部分，就比如计算属性

<h3>{{1234+1234}}</h3>

完全可以写成这样↓视图部分就不会显得太臃肿。


	
		<div id="app">
			<!-- count要当做属性调用，不能当做方法来调用 -->
			<h3>{{count}}</h3> 
		</div> 
		
		<script type="text/javascript">
				var vm = new Vue({
				el:'#app',
				computed:{
					count(){
						return 1234+1234;
					}
				},
			})	
		</script>

还有一个是监听选项。是对新数据和旧数据的观察。

//监听、观察 watch
				watch:{
					name(newdata,old){
						console.log(newdata,old)
					}
				},

这个是初始的

根据数据的双向绑定更改数据后监听的结果

学习内容（v-show，v-if）：

v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- view -->
		<div id="app">
			<h1>用户名: {{username}}</h1>
			<h3 v-if="isvip">用户类型: vip</h3>
			<!-- v-if和v-else中间不能有其他的元素 -->
			<h3 v-else>用户类型: 普通用户</h3>
			
			<hr>
			<h1 >用户允许登陆时间:</h1>
			<h3 v-if="age>18">允许24小时登录</h3>
			<h3 v-else-if="age>14">允许8小时登录</h3>
			<h3 v-else>允许4小时登录</h3>
		</div>
		
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					username:"pjx",
					isvip:true,
					age:24,
				}
			})
		</script>
	</body>
</html>

v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#pane{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-show="isShow" id="pane">
				hello vue
			</div>
			<!-- 点击事件 -->
			<button @click="bb">切换显示内容</button> 
		</div>
		
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isShow:true,
				},
				methods:{
					bb(){
						app.isShow = !app.isShow;
					}
				}
			})
			//
			// v-if不显示时，第一次就直接不渲染，如果内容已经显示，则将其改为不显示，将内容直接从dom去除。
			// 只是渲染一次用v-if
			
			// v-show不显示时，就会改为display:none，但是会渲染在dom上。反复需要切换的内容时，使用v-show。
		</script>
	</body>
</html>

在切换频率比较频繁的情况下用v-show更好一点。

①v-if不显示时，第一次就直接不渲染，如果内容已经显示，则将其改为不显示，将内容直接从dom去除，只是渲染一次用v-if
②v-show不显示时，就会改为display:none，但是会渲染在dom上。反复需要切换的内容时，使用v-show。

总结：

今天效率不是很高，在听课过程中发现之前听过的课程比较更适合我，然后导致来回切换课程混着听，进度慢，不是很扎实，明天还需要重新学习v-show，v-if（新课），新课更加细节一点。加油（别嘲笑哈，小白一枚，正在努力）！

屁小屁小屁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue学习日记day2

vue学习日记day2还是对第一天的补充：新的一些选项例如：template模板，计算属性，监听观察，v-if和v-show的初步认识学习内容（新选项）：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="ut
复制链接

扫一扫