Vue.js的安装及简单使用
简介：
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
安装：
Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。
验证是否安装成功
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
|
|
这样就可以使用 cnpm 命令来安装模块了：
|
|
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
|
|
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
|
|
进入项目，安装并运行：
|
|
将生成好的项目使用IDE（idea，eclipse）的工作目录中
这里使用的idea，安装vue.js的插件。
在Terminnal中启动项目
修改HelloWorld.vue中的代码，刷新浏览器
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
|
<%@ page contentType <html> <head> <title> </head> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <body> <div id="vue_det"> <h3> <h3> <h3> </div>
<!--这是我们的View--> <div id="app">
</div>
<script type="text/javascript"> var vm el
username
}
userinfo return "用户名："
} })
var exampleData message }
// 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model var test2 el
}) </script> </body> </html>
|
data:定义所需的属性
methods:定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
|
<%@ page contentType <html> <head> <title> </head> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <body>
<!--这是我们的View--> <div id="app"> <p> <input type="text" v-model="message"/> </div>
<script> // 这是我们的Model var exampleData message }
// 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model new el
}) </script> </body> </html> |
将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。
反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。
