一、Vue快速入门
程序员文章站
2022-06-04 19:37:49
...
一、什么是Vue?
1.1 Vue.js 介绍 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑
定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
1.2 MVVM模式：MVVM是Model-View-View-Model 的简写，它的本质就是MVC的改进版，MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。
MVVM和MVC一样,主要分离视图View 和模型Model。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
二、Vue 解决了什么？
Vue解决的是逻辑与赋值的分离。
来看一段jQuery的ajax异步。
$.ajax({
type:"post",
url:"user/userInfo",
data:'{"username":James,id:1}',
datatype:"json"，
success:function(data){
//使用jQuery 给页面元素赋值，元素的值就在data中
$.("#username").html(data.username);
}
})这一部分为逻辑部分。
$.ajax({
type:"post",
url:"user/userInfo",
data:'{"username":James,id:1}',
datatype:"json"，
success:function(data){
}
})这部分为赋值部分。
//使用jQuery 给页面元素赋值，元素的值就在data中
$.("#username").html(data.username);MVVM将以上两部分直接分离，以后在html中直接写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
//使用jQuery 给页面元素赋值，元素的值就在data中
$.("#username").html(data.username);
</body>
</html>
三、快速入门代码编写。
3.1 code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="application/javascript" charset="UTF-8"></script>
</head>
<div id="app">
{{message}}<!-- 插值表达式 将data中定义的数据显示到此处-->
</div>
<body>
<script type="application/javascript">
// view model
// 创建vue对象
var app=new Vue({
el:"#app", //接管id为app的区域
data:{ //定义数据内容
message:"hello vue ！！！！" // 注意:此处不要分号
}
});
</script>
</body>
</html>3.2 展示