Vue 基础

Vue 是由尤雨溪所开发的一种前端js框架，以vue为中心的vue 库最为出名，其中知名的有vue-data、vue-table……分别运用在数据大屏以及表格处理方面，其中vue主要用于构建用户界面的渐进式框架，核心库只支持前端显示。而渐进式框架主要是：“一开始不需要完全掌握全部功能，到后面会慢慢的提升”，就以vue-data为例，即使光通过官方文档也可以快速上手，这与vue.js的成功密切相关。

vue.js 的官方文档是写的最为详细的框架文档之一，这与其vue.js发展之出的Laravel 社区文档出现了对比，如果按照通俗的话来讲就是“教你造车但不教你开车”，这也是vue.js如此成功的关键因素之一，其二就是由于vue.js是由国人所开发的，这也增加了vue.js在国内的受欢迎程度不同类框架第一影响更好。

安装

Vue的安装非常的简单，本文主要使用vue所提供的cdn来引入项目内进行演示，vue为开发者提供了两种方式，分别为开发环境版以及生产环境版本，两者的区别就是一个含有了帮助以及命令行警告，而另一个主要优化了尺寸和处理速度，我们分别可以使用以下 CDN进行引入 ：

输出

Vue.js允许使用较为简洁的模板语法以声明式的将数据渲染到HTML DOM（HTML Document Object Model，文档对象模型）内，使得数据可以任意的进行编辑，以及实时预览，HTML DOM用于将元素看作对象，从而使得元素可以被进行编辑以及获取，就比如我们声明一个message对象：

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    {{message}}
</div>
<script>
    var app =new Vue({
        el: '#app',
        data: {
            message: 'hello,world!'
        }
    }) 
</script>

绑定元素属性

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    <p v-bind:title="message">绑定标题</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "绑定属性为toLocaleDateString " + new Date().toLocaleDateString() 
        }
    })
</script>

此时如果将鼠标移动到<p>元素内，则会提示信息为绑定属性为 toLocaleDateString()方法，这里所用到的v-bind为vue所提供的指令：

ID	DA	FA
v-bind	将这个元素点的标题属性和message 实例内的消息属性 绑定在一起
toLocaleDateString	区域日期字符串
toLocaleTimeString	区域时间字符串
toLocaleString	区域字符串

条件

vue.js支持提交语法的写入，本章主要先介绍下vue的特点以及语法等基础功能的实现，在后续我们会详细介绍vue的条件以及循环指令：

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    <p v-if="message">Hello,world！</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: true
        }
    })
</script>

与上述一样，vue不仅仅可以将数据绑定到DOM文本或属性，还可以绑定DOM的结构，这意味着你在控制台中将app.message=false可以将Hello,wirkd!所隐藏。

循环

在vue内，循环可以通过使用v-for指令来实现，与上述一样，vue也会将此绑定到DOM对象内，都可进行控制台内输入app.todos.push({text : "Hello,vue"})进行修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="app">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            todos: [
                { text: 'Hello,world'},
                { text: 'Hello,china'}
            ]
        }
    })
</script>

双向绑定

1
2
3
4
5
6
7
8
9
10
11
12

<div id="app">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: 'Hello,world'
        }
    })
</script>

通过使用v-model指令，我们可以非常方便的获取表单所输入的内容来实现双向绑定。