vue的初步了解

最新推荐文章于 2024-06-15 14:41:39 发布

OYang mie

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量550

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_57201523/article/details/121204363

版权

一、文本显示
1、{{}}
主要作用是进行数据绑定进行文本的显示。
HTML部分：

<body>
	<div id="app"> {{message}} <div>
</body>

JS部分：

<script>
	new Vue ({
		el:#app,
		data:{
			massage:'看我显示出来'
		}
	})
</script>

在这里插入图片描述

2、v-html
除了可以用来替换文本，还可以显示出里面写的html其他标签的效果。
HTML部分：

<body>
	<div id="app">
		<div> {{message}} </div>
		<div v-html="message"></div>
	</div>
</body>

JS部分

<script>
	new Vue({
		el:"#app",
		data:{
			message:"<a href='#'>看我有没有链接</a>"
		}
	})

在这里插入图片描述

3、v-text
用来操作纯文本，与{{}}不同的是，v-text是写在标签里的，用法一样。

二、绑定事件

1、v-on
用于绑定HTML事件，如点击按钮事件绑定： v-on:click
HTML部分：

<div id="app">
	<button v-on:click="dd">点我一下</button>
</div>

JS部分：

<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			methods:{
				dd:function(){
					alert('想不到吧')
				}
			}
		})
</script>

在这里插入图片描述

2、v-model
能够将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值，即达成双向绑定。
HTML部分：
JS部分：
3、v-bind
用于绑定样式属性
① v-bind:class 动态切换class（当该类的值设置为true时显示，false不显示）
HTML部分：

<body>
	<div id="app">
		<div v-bind:class="{'pink':isactive}"></div>
	</div>		
</body>

CSS部分：

	<style>
		.pink{
			width: 200px;
			height: 200px;
			background-color: #7FFFD4;
		}
	</style>

JS部分：

	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
					isactive:true
				}
		})
	</script>

在这里插入图片描述

②v-bind:style 直接设置样式
HTML部分：

<body>
		<div id="app">
		  <div v-bind:style="style">看看我有没有变绿</div>
		</div>
		
</body>

JS部分：

	<script type="text/javascript">
		new Vue({
		  el: '#app',
		  data: {
		    style: {
		      color: 'green',
		      fontSize: '30px'
		    }
		  }
		})
	</script>

在这里插入图片描述
以上即初步了解，深入学习后在做补充。

OYang mie

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的初步了解

一、文本显示1、{{}}主要作用是进行数据绑定进行文本的显示。HTML部分：<body> <div id="app"> {{message}} <div></body>JS部分：<script> new Vue ({ el:#app, data:{ massage:'看我显示出来' } })</script>2、v-html除了可以用来替换文本，还可以显示出里面写的html其他标签的效果。
复制链接

扫一扫