概念
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。
企业中，使用框架，能够提高开发的效率。
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js
框架能够帮助我们减少不必要的DOM操作，提高渲染效率，双向数据绑定的概念，通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了。
框架和库
框架：是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
node 中的 express
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
从Jquery 切换到 Zepto
从 EJS 切换到 art-template
代码和指令
基本代码
先导入Vue的包
在一个元素上添加id为app，这个元素不能是body，也就是不能在body上添加app，这里和angular不同，添加了app的元素，作为最外层的包裹元素
html部分就是MVVM中的V
new一个Vue的实例，这个实例对象就是MVVM中的VM
对象中的data就是MVVM中的M，用来保存每个页面的数据
data中放的就是methods中要使用的数据
methods是一个对象，不是数组
在实例中如果想要调用data上的数据或者想要调用methods中的方法，必须通过this点数据属性名或this点方法名来进行访问，这里的this就表示new出来的实例对象
用箭头函数，解决this指向的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 将来new的Vue实例，会控制这个元素中的所有内容 -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
var vm = new Vue({
el: '#app',// 表示控制页面上的哪个区域
data: {
msg: '欢迎学习Vue'
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
})
</script>
</body>
</html>
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
