学学学....（vue）

最新推荐文章于 2023-11-23 11:06:28 发布

小渣渣～

最新推荐文章于 2023-11-23 11:06:28 发布

阅读量355

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_63245620/article/details/123309378

版权

vue基础 -el挂载点

（

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。

）

el是用来设置Vue实例挂载(管理)的元素

Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器，但是建议使用ID选择器

可以使用其他的双标签，不能使用HTML和BODY

框架

var app =new Vue（{

el："#app"

data:{}

app为定义的变量名

例子：

<div id="app" class="app" >{{message}}</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
		var app=new Vue({
		//el:"#app",
		//el:".app",
		el:"div",
		data:{
			message:"学习vue！学习vue1"
		}
		})
		</script>

data：数据对象

vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js的语法即可

<body>
		<div id="app" >
		{{message}}
		<h2>{{school.name}} {{school.mobile}}</h2>
		<ul>
			<li>{{campus[0]}}</li>
			<li>{{campus[3]}}</li>
		</ul>
		</div>
				<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
				<script>
				var app=new Vue({
				el:"#app",
				data:{
					message:"你好 vue！",
					school:{
						name:"小菜鸟",
						mobile:"400-618-9090"
				},
				campus:["B站","CSDN","慕课网","快手"]
				}
				})
				</script>
	</body>

本地应用

v-text

用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题（如果数据中有HTML标签会将html标签一并输出）

注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

var app= new Vue({

el:"app"

data{message：" "

}

})

v-html

作用：设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么，只会解析为文本

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-html="content"></p>
		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				content:"<a href='#'>菜鸡网</a>"
			}
		})
		</script>
	</body>
</html>

计数器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
		<div class="input-num">
			<button @click="sub">-</button>
			<span >{{num}}</span>
			<button @click="add">+</button>
		</div>
		</div>
		<script>
		var app=new Vue ({
			el:"#app",
			data:{
				num:1
			},
			methods:{
				add:function(){
					//console.log('add');
					if(this.num<10){
						this.num++;
					}else{
						alert('别点了，最大啦！');
					}
				},
				sub:function(){
					//console.log('sub');
					if(this.num>0){
						this.num--;
					}else{
						alert("别点啦，最小啦！")
					}
				}
			},
		})
		</script>
	</body>
</html>

v-show

作用：根据真假切换元素的显示状态

原理：修改元素的display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为true元素显示，值为false元素隐藏

数据改变之后，对应元素的显示状态会同步更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<input type="button" value="切换显示状态" @click="changeIsShow">
					<img v-show="isShow" src="./3.png" alt="">
				</div>
				<script>
				var app = new Vue({
					el:"#app",
					data:{
						isShow:false
					},
					methods:{
						changeIsShow:function(){
							this.isShow=!this.isShow;
						}
					},
				})
		</script>
	
	</body>
</html>