Vue.js入门学习（1）

来源：互联网发布：网络销售做外汇是什么编辑：程序博客网时间：2024/05/22 16:48

概述：

Vue.js 是一个轻量级的简单灵活可拓展的数据驱动的组件，可进行组件化的UI构建。简单来讲，Vue.js 聚焦在MVVM模式的ViewModel层，通过双向数据绑定连接视图和模型。

他和其他同类框架的比较可以参考http://cn.vuejs.org/guide/comparison.html

安装：

学习一个东西，从安装开始。你可以选择通过<script>标签来引用，也可以用npm install vue或者bower install vue来安装。

最简单的demo：

安装完，先来个hello world体验一下。简单来说，就是一个HTML 模板 + JSON 数据，再创建一个 Vue 实例。

<!DOCTYPE html><html>    <head>        <title>vue demo</title>        <script src="vue.js"></script>    </head>    <body>        <div id="app">          {{ message }}        </div>        <script>            new Vue({              el: '#app',              data: {                message: 'Hello Vue.js!'              }            })        </script>    </body></html>

是不是很简单就单向绑定了一个数据。
想要进行双向绑定，先来看一个概念：v-model，类似angularJS里的ng-model，当v-model改变时，双重花括号指代的内容也会跟着改变，例子如下：
<!DOCTYPE html><html>    <head>        <title>vue demo</title>        <script src="vue.js"></script>    </head>    <body>        <div id="app">          <p>{{ message }}</p>          <input v-model="message">        </div>        <script>            new Vue({              el: '#app',              data: {                message: 'Hello Vue.js!'              }            })        </script>    </body></html>

看完这两个例子，把文档过一遍。在后面的学习中，将具体学习vue.js的指令和组件，并搭配webpack尝试构建项目。

关于webpack的入门，下午看了一篇博客，作者从零开始讲，非常适合我这种入门自学的菜鸟学生，在这里mark一下（http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/）

资料传送： http://cn.vuejs.org/

0 0