一、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>
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
