Vue入门

最新推荐文章于 2024-11-03 17:22:51 发布

花千邪

最新推荐文章于 2024-11-03 17:22:51 发布

阅读量85

点赞数

本文链接：https://blog.youkuaiyun.com/m0_47252566/article/details/107950348

版权

本文介绍Vue.js的基础概念，包括其作为渐进式JavaScript框架的特点，与库和框架的区别，以及如何通过CDN安装Vue。通过三个案例演示Vue的基本用法，如数据绑定、事件处理等，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue入门

什么是Vue?
库和框架的区别
安装Vue
案例
尾言

什么是Vue?

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架------官网.

库和框架的区别

库
库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者。
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作。
框架
框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码。
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案；
使用框架的时候，由框架控制一切，我们只需要按照规则写代码；
框架的侵入性很高(从头到尾)。

安装Vue

手动下载
CDN.
选中vue
在这里插入图片描述
找到最新版本的vue,js，例如

复制

案例

案例1

简单的页面展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{msg}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		//将Vue实例挂载到具体的边界,会被Vue渐变式所管理
		//边界不能有兄弟标签,边界一定是根标签
		new Vue({
			el:'#app',// DOM 元素，挂载视图模型
			data:{// 定义属性，并设置初始值
				msg:'来吧展示！！'
			}
		})
	</script>
</html>

效果
在这里插入图片描述

案例2

Vue双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{msg}}</h2>
			<input type="text" v-model="msg" />
			<h2>{{msg}}</h2>
			<h2>{{msg}}</h2>
			<h2>{{msg}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',// DOM 元素，挂载视图模型
			data:{// 定义属性，并设置初始值
				msg:'hello!!'
			}
		})
	</script>
</html>

效果
在这里插入图片描述

案例3

Vue事件
v-on代表的是指令，后面代表的是参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{msg}}</h2>
			<input type="text"  />
			<button v-on:click="xxx">事件按钮</button>
			<button @click="xxx">事件按钮</button>
			<!-- v-on代表的是指令，后面代表的是参数 -->
		</div>
	</body>
	<script type="text/javascript">
		//三种方式
		new Vue({
			el:'#app',
// 			data:{
// 				msg:'hello!!'
// 			},
// 			data:function(){
// 				return {
// 					msg:'hello!!22'
// 				}
// 			},
			//主流方式如下
			data(){
				return {
					msg:'hello!!33'
				}
			},
			methods:{
				xxx(){
					alert('xxx666');
					this.msg='aaaa';
				}
			}
		})
	</script>
</html>