Vue（1）

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>

就像我们曾经引入 jQuery 一样：

<script type="text/javascript" src="./js/jquery.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>

6、实例讲解

1). el 

把 vue 实例挂载到页面元素上 

el: '#app1'

2). data

初始化页面使用到的数据，有了数据，我们就能使用插值和指令：

tipsMsg : '我们不会保存您的帐号密码，仅采集与您信用相关的信息。您的信息受严密保护，不对外公开'。

对应的插值写法 ：

<div class="top-tips"> {{ tipsMsg }} </div>

表单 v-modal 的出现，也需要预先给定 data 进行绑定 ：

data: {
    account : '',
    password : ''
}

对应的 v-modal 写法：

<input id="account" v-model="account">
<input id="password" v-model="password">

v-modal 是双向数据绑定，界面的输入会实时绑定到相应的 data 上面，反之亦然。

3). methods

页面中的自定义事件，都在 methods 里面定义。

定义一个叫做 nextButtonClick 的函数，用来 alert 相应的数据 ：

methods: {
    nextButtonClick : function () {
        alert( "account : " + this.account + "\npassword : " + this.password )
    }
}

对应绑定到元素上面，使用 v-on 指令 ：

<button id="app1-next-btn" v-on:click="nextButtonClick"> 开始授权 </button>

或者使用 v-on: 的缩写 @ ：

<button id="app1-next-btn" @click="nextButtonClick"> 开始授权 </button>