一、Vue框架简介
1、Vue.js 是目前最火的一个前端框架,和Angular.js、React.js 一起,并成为前端三大主流框架。
2、Vue.js是用于构建用户界面的渐进式框架。
3、在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑。
4、Vue框架,能够提高开发的效率。
提高开发效率的发展历程:
原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Vue.js
二、MVVM简介
MVVM是Model-View-ViewModel的简写,即模型-视图-视图模型。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】mvvm模式的核心,它是连接view和model的桥梁。
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信。
ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。
三、Vuejs中的HelloWorld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE中最厉害的HelloWorld</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>请输入: <input type="text" v-model="name"> </p>
<p>你输入的为: <span v-text="name"> </span> </p>
</div>
<script type="text/javascript">
// 原生JS操作DOM实现
// let input = document.getElementsByTagName("input")[0];
// let span = document.getElementsByTagName("span")[0];
// input.onkeyup = function(){
// span.innerText=input.value;
// }
// VUE版本实现
const vm = new Vue({
el:"#app",
data:{
name:"manong0371"
}
})
</script>
</body>
</html>