vue.js的使用

最新推荐文章于 2024-06-09 20:17:27 发布

西小贝。

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量138

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46535287/article/details/118549729

版权

概念

Vue.js是前端js的框架, vue框架的优点使用成本低,生态系统完整适应任何规模项目,体积小丶效率高丶性能好。

建议参考vue官方文档

Vue.js的基本用法：

可以直接下载到本地（官网下载vue.min.js）或使用CDN，然后用 < script > 标签引入到页面中，Vue会被注册为一个全局变量。

Vue.js基本语法使用

1丶el:被称为挂载点,利用css选择器来设置vue实例挂载的元素

2丶data:数据对象用来绑定vue实例的数据变量,每个不同变量间用逗号隔开.数据的类型可以是数组对象字符串等(其中数组,对象为复杂数据类型).

data里面可以写复杂数据类型
vue中用到的数据在data里面
渲染数据遵守js规则

Vue.js指令

Vue指令指的是以v-开头的一组特殊语法，利用它们可以实现常见的网页效果

(1)利用插值表达式({{}})、v-text、v-html 实现元素的数据绑定

数据绑定最常见的形式就是使用{{…}} (双大括号)的插值表达式。插值表达式只会替换自己的这个占位符，不会把整个元素的内容替换，适合部分替换;
v-text和v-html也可以为元素绑定数据，v-text设置标签的内容(textContent)，v-htm| 设置标签的innerHTML,但它们会覆盖元素中原本的内容。
v-text替换内容中的html标签以文本的形式存在，v-html替换内容中的html标签以标签解析显示在页面上，对于普通文本它们是一样的。

<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title>one</title>
</head>
<body>
	<div id="app">
		<h1>{{message}}敲代码啦</h1>
		<h1 v-text="message+'你'">要敲代码</h1>

	</div>

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//创建vue实例
		var myVue=new Vue({
			el:"#app",
			data:{
				//vue实例用到的数据
				message:"**",


			}

		})
	</script>
</body>
</html>

利用v-on实现元素的事件绑定

v-on指令是为元素绑定事件

1.可以简写为@

2.可以通过this指向来调用data里面的数据

3.绑定的方法写在methods属性中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.demo{
			width: 200px;
			height: 200px;
			border: 1px solid gray;
			
			
		}
		ul{
			display: flex;
			
			list-style: none;
		}
		li{
			cursor: pointer;
			padding: 15px;
		}
	</style>
	<body>
		<div id="app">
			
			<button @click="changeClick('red')">红色</button>
			<button @click="changeClick('blue')">蓝色</button>
			<button @click="changeClick('yellow')">黄色</button>
			<div class="demo" :style="{backgroundColor: bg}"></div>
			
			
		</div>
		
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					
					bg:'gray',
					},
					methods:{
						changeClick(color){
							this.bg = color
						}
				}
			})
		</script>
	</body>
</html>

西小贝。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue.js的使用

概念Vue.js是前端js的框架, vue框架的优点使用成本低,生态系统完整适应任何规模项目,体积小丶效率高丶性能好。建议参考vue官方文档Vue.js的基本用法：可以直接下载到本地（官网下载vue.min.js）或使用CDN，然后用 < script > 标签引入到页面中，Vue会被注册为一个全局变量。Vue.js基本语法使用1丶el:被称为挂载点,利用css选择器来设置vue实例挂载的元素2丶data:数据对象用来绑定vue实例的数据变量,每个不同变量间用逗号隔
复制链接

扫一扫