1.vue.js 尤雨溪，首个国产的前端开发框架。
2.vue.js 渐进式框架
2.1 库--主要提供api jquery
2.2 框架--主要提供 基础模块，比喻虚拟dom
很多时候框架和库已经没有明显的区别了
2.3渐进式 声明渲染--组件系统--客户端路由-集中式管理--项目构建
功能比较强大
3.vue基本使用 helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>vue基本语法</title>
</head>
<body>
<!-- 1.生产一个div容器 -->
<div id="app">{{msg}}</div>
<!-- 4.把js里面的 msg 信息放到div 插入表达式支持基本计算-->
<div>{{1+2}}</div>
<div id="app1">{ {msg + "---"+ 1+2} }</div>
<!-- 2.引用vue.js -->
<script type="text/javascript" src="vue.js"></script>
<script>
// 3.创建1个实例
var vm = new Vue({
el:'#app', // el元素的挂载位置 把元素数据关联在什么位置 可以是css ，dom
data:{ // data 模型数据 值是一个对象
msg:'hell world jakc'
}
});
</script>
</body>
</html>
4.vue 模块语法-前端渲染 把数据填充到html中
4.1 原生JS拼接字符串 -代码复杂 每个人不一样
4.2 模版引擎--按语法规则使用，不提供事件处理
4.3 vue模版语法
插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构
5.指令相关概念
5.1 什么是自定义属性 H5里面的data
vue指令格式 v 开头的
5.2 ## v-cloak 这个指令保持在元素上直到关联组件实例结束编译。
和 CSS 规则如[v-cloak] { display: none }一起用时
，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hell world'
}
})
</script>
</body>
</html>
5.3 v-text
更新元素的 textContent。如果要更新部分的
<div v-cloak>{{msg}}</div> 这个2个表达式意思是一致的啊
<div v-text = 'msg'></div>
5.4 ## v-html更新元素的 innerhtml元素
容易导致 XSS 攻击。只在可信内容上使用
5.5## v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
<div v-text = 'msg'></div>
<div v-html = 'msg1'></div>
<div v-pre >{{msg}}</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hell world',
msg1:'html'
}
})
</script>
</body>
</html>
5.5 ## v-once -- 后面vue不会监听 会提高性能 响应式-css样式和dom 内容变化 v-once 只编译一次，响应后不在有变化 在浏览器操作dom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div >{{msg}}</div>
<div v-once>{{info}}</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hell world',
info:'hi'
}
})
</script>
</body>
</html>
5.6 ## v-model随表单控件类型不同而不同
在表单控件或者组件上创建双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div >{{msg}}</div>
<div>
<input type="text" name="" id="" v-model='msg'>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hell world',
info:'hi'
}
})
</script>
</body>
</html>
6.mvvm 模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、[音频]这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）[模式]与WPF结合的应用方式时发展演变过来的一种新型架构[框架]。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。
