Vue入门

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

不落飞行

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

阅读量117

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/chiyangj/article/details/108017713

版权

这里写目录标题

什么是Vue

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

优点

vue是一款友好的、多用途的且高性能的js框架，它可以帮你创建可维护性和可测试性更强的代码库。官网对vue的优点描述是这样的：

1.易用：学习曲线平缓，api简洁，容易上手。学习过程较react来说比较容易，不那么痛苦

2.灵活：
如果你已经有一个现成的服务端框架，你可以将vue作为其中的一部分嵌入，带来更加丰富的交互系统，或者你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可以满足你的各式需求，vue允许你将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件，以用来渲染网页中相应的地方。

3.高效：
虚拟dom：其数据全部在内存中，只有js引擎参与其中
而真实dom会有浏览器渲染层在其中

MVVM

是Model-View-ViewModel 的缩写，由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
在这里插入图片描述

Vue入门实例

安装Vue
CDN网址

4.1 cdn下载(需连接网络)

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.基础案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="adp">
		//将msg中的值显示到页面
			<h2>{{msg}}</h2>
		</div>

	</body>
	<script type="text/javascript">
		//作用将vue实例化挂载到具体的边界,那么这个边界就会被Vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签.边界一定是根标签
	new Vue({
		el:'#adp',
		data:{
			msg:'hello vue!!'
		}
		
	})
	</script>
	
	
</html>

Vue双向数据绑定

所谓MVVM数据双向绑定，即主要是：数据变化更新视图，视图变化更新数据。如图：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="adp">
			<h2>{{msg}}</h2>
			  <input type="text" v-model="msg"/>
			<h2>{{msg}}</h2>
			<h2>{{msg}}</h2>
			
		</div>

	</body>
	<script type="text/javascript">
		//作用将vue实例化挂载到具体的边界,那么这个边界就会被Vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签.边界一定是根标签
	new Vue({
		el:'#adp',
		data() {
			return{
				msg:'hello Vue3!!!'
			}	
		},
	})
	</script>
	
	
</html>