Vue.js的从入门到放弃进击录（一）

感谢我们项目组给机会，让我学了Vue.js，打开新世界大门。。。哈哈哈，也没有那么夸张，不过学下来确实觉得入门还是蛮容易的。我大概前前后后学了有一个月的样子，一开始只是比较急着可以写东西出来，后来因为分配到九月份的分享，项目组也买了vue相关的书籍，所以又进行了比较深入的一个学习。

====================================================嘀哩哩哩~========================================================

按照惯例，我学习过程用到的资料：

1.vue官网：https://cn.vuejs.org/v2/guide/installation.html （官网已经很友好了，很有参考价值的）

2.简书vue的入坑教程：http://blog.csdn.net/sinat_17775997/article/details/77824878 （拉到下面，开始看入坑系列就可以了）

3.智能社陈潇冰老师的vue视频：链接：http://pan.baidu.com/s/1sla6lkh 密码：72ep （老师讲的很基础，还不错。我基本都听完了，对vue有较好理解，不过老师是凭经验讲的，看完最好再看看书，就比较完美）

4.曾经超火的60分钟入门 http://www.cnblogs.com/keepfool/p/5625583.html （里面的内容很详细，不够完美的地方是这个教程是基于vue1.x版本的，基础的部分基本2.0也适用，但到过滤器这些部分会有比较大出入，当时我也是学到这里懵逼了弃了~有点可惜）

===================================================哒哒哒====分割=======================================================

学习Vue要准备的环境：

1.我用的是Sublime Text3 做编辑器 : 链接：http://pan.baidu.com/s/1dFITZnb 密码：bwfy

2.安装node.js (这个直接去官网下载安装就可以了，到后面安装脚手架vue-cli要用到的）传送门：http://nodejs.cn/download/

=======================================================嘀嘀嘀======分割==================================================

现在我们开始正式一个坑一个坑学习vue

1.建立第一个vue页面

准备：①下载vue.js (进入官网https://cn.vuejs.org/v2/guide/installation.html）选择“开发版本”，点击即可下载到vue.js

Vue.js的从入门到放弃进击录（一）

②打开sublime text3，新建一个html页面。快速建立一个html页面的快捷键（同时按住shift+ctrl+p，然后看到顶部会弹出框，输入 sshtml ，按回车键，这时候虽然没有看到什么变化，然后输入感叹号！，然后按 Tab 键。完成。如果没出来，检查输入感叹号！是不是英文输入法）。

写代码：第一个vue页面

效果图：

Vue.js的从入门到放弃进击录（一）

代码：(这是一个双向数据绑定的案例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue-Hello</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>   <!-- 数据显示 -->
        <input v-model = "message">  <!-- 绑定数据 -->
    </div>

    <script src="vue.js"></script>    /*引入vue*/
    <script>
    // vue实例
        new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!'  /*message本体*/
            }
        })
    </script>
</body>
</html>

hello.html