序言
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
同时,Vue基于webpack来进行开发。
Vue API:http://cn.vuejs.org/v2/api/
解析MVVM模式
- MVVM模式(Model-View-ViewModel)
- 从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
- 从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
- 定义View
- 定义Model
- 创建一个Vue实例或"ViewModel",它用于连接View和Model
- 创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
双向绑定示例
MVVM模式本身是实现了双向绑定的,在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
<!--这是我们的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
<!--将message绑定到文本框,当更改文本框的值时,<p>{{ message }}</p> 中的内容也会被更新。-->
开始实战
为了达到快速的开发,我们可以使用Vue的各种模版,首先我们得先构建一下开发环境。
- 安装node
- 安装Vue官方命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init [webpack模版] [my-project项目名]
# 进入项目目录
$ cd my-project
# 执行模块的下载安装,所需模块的配置信息在 package.json 中
$ npm install
# 执行 dev 脚本(也在 package.json 中),即项目开发模式
$ npm run dev
# npm run build 执行 build 脚本,项目文件打包生成
ios 不要忘记给予权限哦!sudo npm install 即可
vue-cli会有几种模版:
- webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.(全功能的 Webpack + vue-loader 设置,包括热加载,静态检测,测试,css 提取)
- webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.(一个简易的 Webpack + vue-loader 设置,以便于快速开始)
- browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.(全功能的 Browserify + vueify 设置,包括热加载,静态检测,单元测试)
- browserify-simple - A simple Browserify + vueify setup for quick prototyping.(一个简易的 Browserify + vueify 设置,以便于快速开始)
- simple - The simplest possible Vue setup in a single HTML file
相关阅读:Announcing vue-cli(译)Vuejs 自己的构建工具 vue-cli
Vue初始化
命令行输入:
npm run dev
这一行命令代表着它会去找到package.json的scripts对象,执行node bulid/dev-server.js。在这文件里,配置了Webpack,会让它去编译项目文件,并且运行服务器,我们在localhost:8080即可查看我们的应用。
效果如下: