Vue学习笔记_vue实例可以做什么-CSDN博客

本文链接：https://blog.csdn.net/m0_58680865/article/details/122194276

1、第一个Vue示例

解析：{{ messeage }}寻找data中和messeage 名称一致的数据，将值转换为data中messeage 绑定的值
注：{{message}}这种写法被称为差值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue示例</title>
	</head>
	<body>
		<div id="app">
			{{ messeage }}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					messeage:"hello Vue!"
				}
			})
		</script>	
	</body>
</html>

2、el挂载点

（1）Vue实例的作用范围

范围是el命中元素的内部。即div（视图）内部。

		<div id="app">
			{{ messeage }}
		</div>

（2）是否可以使用除id选择器外的其他选择器

可以使用其他的选择器，但通常使用id选择器

（3）是否可以设置其他的dom元素

可以支持除div以外的其他标签，比如：<p></p>等，但不能使用HTML和BODY但必须是双标签，不能是单标签。通常使用div标签。

3、data：数据对象

Vue用到的数据定义在data中
data中可以写复杂类型的数据（比如对象、数组等）
渲染复杂类型数据遵循js语法即可（比如对象的点语法、数组的索引语法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el关在</title>
	</head>	
	<body>
		<div id="app">
			{{ messeage }}
			{{school.name}}{{school.address}}
			{{arr[0]}}{{arr[2]}}
		</div>	
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					messeage:"hello sdfsdfsd!",
					school:{
						name:'清华',
						address:'北京'
					},
					arr:['大连','沈阳','丹东']
				}
			})
		</script>
	</body>
</html>

4、Vue指令

(1)v-show指令：显示隐藏

（1）v-show：根据真假切换元素的显示状态
（2）原理：修改元素的display来实现显示和隐藏
（3）指令后面的内容最终解析为布尔值
（4）值为true，显示元素；值为false，隐藏元素
注意：内容频繁的显示和隐藏用此指令

 <!-- View视图 -->
   <div id="app">
       //true显示，false不显示
       <span v-show="b">你好</span>
       <span v-show="c">张三</span>
       <span v-show="age >= 19">张三</span>
   </div>
   
   <script>
    // Model模型
    var model = {b:true, c:false,age:16};
    
    // ViewModel视图模型(一个Vue对象)
    var vm = new Vue({
        el:'#app',
        data:model
    });
</script>

v-show的实例

本案例知识点：
（1）v-show的方法事件的写法是this.isShow = !this.isShow;
（2）v-show是修改元素的display来显示和隐藏
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el关在</title>
	</head>	
	<body>
		<div id="app">
			<input type="button" value="切换状态" @click="changeShow"  >
			<img src="a.jpg" style="width: 150px;" v-show="isShow">
		</div>		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
				},
				methods:{
					changeShow(){
						this.isShow = !this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

(2)v-if、v-else：分支（要么单用v-if，要么两个连用）

（1）v-if：根据真假切换元素的显示状态
（2）本质是通过操作dom元素来显示和隐藏（dom元素就是那些标签，p标签、div标签等）
（3）表达式为true，元素存在于dom树中；为false，从dom树中移除

<!-- View视图 -->
   <div id="app">
       //""里面的内容就相当于if括号里面的内容
       //注意：v-if和v-else之间不能加其他标签
       //v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
       <span v-if="name == '张三'">100</span>
       <span v-if="age >= 20">200</span>
       <span v-else>300</span>
   </div>
   
   <script>
    // Model模型
    var model = {name:'张三', age:10};
    
    // ViewModel视图模型(一个Vue对象)
    var vm = new Vue({
        el:'#app',
        data:model
    });
</script>

v-show和v-if区别

v-show：本质是修改元素的display来显示和隐藏
v-if：本质是通过操作dom元素来显示和隐藏（dom元素就是那些标签，p标签、div标签等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换状态" @click="changeShow"  >
			<p v-if="isShow">v-if展示</p>
			<p v-show="isShow">v-show展示</p>
		</div>	
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>	
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
				},
				methods:{
					
					changeShow(){
						this.isShow = !this.isShow;
					}
				}
			})
		</script>
	</body>
</html>