vue学习--起步(一) ::花与剑::

介绍

数据驱动的组件，为现代化的 Web 界面而生。

vue是一款优雅小巧的MVVM框架，相对ng它更简单易学，能够很好的与其它库或已有项目进行整合，因此在中小公司中很快流行开来，当然也不乏一些大公司的采用。

注：Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。

使用

vue可根据实际项目需要灵活的采用引入方式。

最快的开始方式

<script src="https://npmcdn.com/vue/dist/vue.min.js"></script>

NPM

在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供webpack的配套工具(vue-loader)来开发单文件组件。

VUE-CLI

官方提供的脚手架工具，可以快速开始实际工作项目的开发。

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Hello World

和其它编程惯例一样，以Hello World的形式开始我们的第一段vue代码。

为了简单起见，我们用script标签的方式直接引入vue.js

代码

<!DOCTYPE html>
<html>
<head>
    <title>Hello Vue!</title>
    <script src="https://npmcdn.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

运行结果

Hello Vue!

也许你觉得这个和传统的字符串替换js模板引擎类似，其实vue在后方帮我们做了远不止这些，此时的数据和DOM元素已经建立了联系，它是响应式的。也就是数据变化的同时会自动同步更新DOM元素。

Tips: 可以按F12打开Console控制台输入app.message并赋一个新值，观察HTML视图的变化。