vue1。

一，Vue的简介

1.什么是 Vue？
是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

官网：https://cn.vuejs.org/

Vue作者：尤雨溪/中国无锡

库和框架的区别
库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
框架(Framework)：是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

3.mvm的介绍
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

相比较于mvc更加便捷；

VM：ViewModel 视图模型虚拟dom

数据是核心

二，案例演示

1.页面展示实现

步骤：
1.导入js依赖（在官网上找,js的版本有很多，之间也存在差异。最好不要随便导入一个js）
查看网址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

2.定义Vue所管理的边界

3.创建Vue实例

4.挂载边界

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> 
	</head>
	<body>
		//定义边界
		<div id="app">
			<h3>{
   
   {msg}}</h3>
			{
   
   {msg}}
		</div>
	</body>
	<script type="text/javascript">
	//绑定边界 es6的具体体现
		new Vue({
        //设置Vue所管理的边界中可以使用的变量
			el:'#app',
			data(){
				return {msg:'vue222'};
			}
		})
	</script>
</html>

一，Vue的简介

二，案例演示

猜你喜欢