Pure vue demo 实战第一节：Vue基础一

为了让初学者更直观地上手 vue，项目去除对构建工具的使用，直接从 <script> 标签引入 vue.min.js ，就好像我们当初使用 jQuery 的方式一样。

1、创建 web 工程基本文件夹

创建一个vue-demo-1的文件夹，然后在里面创建三个文件夹，分别存储网页的样式表（css）、图片（images）、脚本（js）文件，还创建了一个demo1.html 的静态文件来书写代码。

2、HTML 的 <script> 引入

直接从 .html 文件的标签 <script> 引入 ：

<script type="text/javascript" src="./js/vue.min.js"></script>

3、HTML 编写布局

demo.html 内容 ：

<div id="app1">
    <div class="top-tips">我们不会保存您的帐号密码，仅采集与您信用相关的信息。您的信息受严密保护，不对外公开</div>
    <div class="input-wrapper">
        <div class="flex wrapper-item">
            <label for="account" class="flex2 item-name">帐号/手机号</label>
            <div class="flex4 item-input">
                <input id="account" type="tel" maxlength="11" placeholder="帐号/手机号" autofocus="autofocus">
            </div>
        </div>
        <div class="flex wrapper-item">
            <label for="password" class="flex2 item-name">密码</label>
            <div class="flex4 item-input">
                <input id="password" type="password" placeholder="输入授权密码">
            </div>
        </div>
    </div>
    <div class="flex vertical-center license">
        <div class="checked"></div>
        <div class="text">我已阅读并同意</div>
        <div><a href="javascript:void(0);">《授权协议》</a>
        </div>
    </div>
    <div class="bottom-button">
        <button id="app1-next-btn" type="button" disabled="disabled" class="next-button">开始授权</button>
    </div>
</div>

4、哪些方面需要使用到 Vue ?

观察设计稿（页面） 以及阅读项目的需求，我们分析出页面需要 vue 特性的有 ： 

插值

这段文本需要从数据读取出来，这就需要使用到 Vue 的插值。

v-model 指令

需要使用表单，我们需要用 v-modal 来进行双向绑定数据。

v-bind 和 v-on 指令

给“开始授权 ”这个按钮绑定功能，需要使用 v-bind 动态绑定样式、v-on 绑定事件。

5、实例化 vue

1). 在我们使用插值、指令等一系列 vue 特性的时候，我们应该先创建 vue 的实例 。

用 new Vue({ ... }) 实例化一个Vue对象：

<script type="text/javascript" src="./js/vue.min.js"></script>
<script>
    var app1 = new Vue({
        el: '#app1'
    });
</script>

通过 new Vue() 创建了一个 vue 实例，并且让它挂载到 <div id="app1"> ... </div> 里面去。

当实例挂载到<div id="app1"> 之后，<div id="app1"> 以及它的所有子孙元素，都拥有了vue 的特性，此时此刻我们才能算得上拥有了一个 vue 的页面。

实例不唯一，你可以创建很多元素： <div id="app2"> ，<div id="app3"> 然后用 vue 将实例统统挂载到它们上面：

<script>
    var app2 = new Vue({
        el: '#app2'
    });

    var app3 = new Vue({
        el: '#app3'
    });
</script>

实例内部的访问： this.属性。

实例之间的访问： app2.属性、app3.属性。

2). 实例的选项

前面第1点提到的 el 也是 vue实例的选项之一，它会找到页面的元素，并让实例挂载上去。

但 el 并不是唯一，这里我们重点挑选基本的几个讲解，以后的章节再慢慢细化：

el： 实例的挂载点 

data：实例的数据（页面的数据 ），控件的开关 

methods：实例绑定的方法

<script>
var app1 = new Vue({
    el: '#app1',
    data: {
        tipsMsg : '我们不会保存您的帐号密码，仅采集与您信用相关的信息。您的信息受严密保护，不对外公开',
        account : '',
        password : ''
    },
    methods: {
        nextButtonClick : function () {
            alert( "account : " + this.account + "\npassword : " + this.password )
        }
    }
});
</script>

完整教程列表可访问：Vue.js demo项目：pure vue demo