vue.js从入门到深入再到随心而用———初步认识vue.js

本文链接：https://blog.csdn.net/qq_42147171/article/details/104901509

初步认识vue.js

1.vue.js简介
2.mvc和mvvm流程详解
3.第一个vue.js程序

1.vue.js简介

Vue.js不是一个框架一它只聚焦视图层，是一个构建数据驱动的Web界面的库。Vue.js
通过简单的API提供高效的数据绑定和灵活的组件系统。
先看看Vue.js 的特性。

1.确实轻量

除了以MVP模式代表的Riot.js 外, Vue.js 已经算是前端库里面体积非常小的，但不依赖其
他基础库。

2.数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

3.指令

类似于AngularJS，可以用一.些内置的简单指令(v-*)，也可以自定义指令，通过对应表达
式值的变化就可以修改对应的DOM。

4.插件化

Vue.js核心库不包含Router、AJAX、表单验证等功能，但是可以非常方便地加载对应的插
件.

2.mvc和mvvm流程详解

在这里插入图片描述

3.第一个vue.js程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1.导入vue包-->
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<p >{{msg}}</p>
		</div>
	</body>
	<script type="text/javascript">
		//2.创建一个vue实例
		//当我们导入包之后，在浏览器的内存中，就多了一个vue构造函数
		var vm=new Vue({
			el:'#app',//表示当前我们new的这个vue实例，要控制页面上的哪个区域
			data:{//data属性中，存放的是el中要用到的数据
				msg:'欢迎学习vue'//通过vue提供的指令可以很方便的吧数据渲染到页面上，程序员不再手动操作DOM元素了
			}
		})
	</script>
</html>