Vue.js的简介

声明式渲染：

vue.js的核心是一个允许简介的模板语法来声明式的将数据渲染进DOM

    <div id="app">        {{ message }}    </div>    <script>        // 这是我们的Model        new Vue({            el: '#app',            data: {                message:'vamous'            }        })    </script>

数据和DOM已经被绑定在一起，所有的元素都是响应式的，当message改变的时候，上面的例子也在实时更新

除了文本插值，还可以采用下面的方式绑定DOM属性：

    <div id="app-2">        <a v-bind:title="message" href="#">            鼠标悬停几秒钟后查看此处动态绑定的提示信息        </a>    </div>    <script type="text/javascript">        var app2 = new Vue({            el: '#app-2',            data : {                message : '页面加载于 ' + new Date()            }        });    </script>

v-bind属性属于一条指令，指令带有前缀v-，以表示它们是Vue提供的特殊属性，从上面的例子可以看出来，将a这个标签的title属性和message绑定在一起

条件与循环：

控制切换一个元素的显示：

    <div id="app-3">        <p v-if="seen">现在你看到我了</p>    </div>    <script type="text/javascript">        new Vue({            el: "#app-3",            data : {                seen : true            }        });    </script>

通过上面的例子可以看出，我们不仅仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据，而且Vue也提供了一个强大的过渡效果系统，可以在Vue插入/更新/删除元素时，自动更新到过渡效果。

其他的指令

v-for指令可以绑定数组的数据来渲染一个项目列表

    <div id="app-4">        <ol>            <li v-for="todo in todos">                {{todo.text}}            </li>        </ol>    </div>    <script type="text/javascript">        new Vue({            el : "#app-4",            data : {                todos : [                    {text: '学习JavaScript'},                    {text: '学习Vue'},                    {text: '学习webPacket'}                ]            }        });    </script>

处理用户输入

为了让用户和应用进行互动，我们可以用v-on指令绑定一个事件监听器，通过它调用我们Vue实例中定义的方法

    <div id="app-5">        <p>{{message}}</p>        <button v-on:click="reverseMessage">逆转消息</button>    </div>    <script type="text/javascript">        var app5 = new Vue({            el : "#app-5",            data: {                message: 'v-on指令的实例'            },            methods: {                reverseMessage:  function() {                    this.message = this.message.split('').reverse().join('');                }            }        });    </script>

在上面的reverseMessage方法中，我们只更新了应用的状态，但没有碰触DOM——所有的操作都由Vue来完成，自己编写的代码只要关注底层逻辑

Vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定

    <div id="app-6">        <p>{{message}}</p>        <input v-model="message">    </div>    <script type="text/javascript">        var app6 = new Vue({            el : "#app-6",            data: {                message : "please input your name"            }        });    </script>

组件化应用的构建

组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可服用的组件构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树

在Vue中，一个组件本质上是一个拥有预定义选项的一个Vue实例，在Vue中注册组件的方式如下：

//定义名为todo-item的新组件Vue.component('todo-item', {    template : '<li>{{todo.next}}</li>'});

现在用它构建另一个组件模板

<ol>    <!--创建一个todo-item组件的实例-->    <todo-item></todo-item></ol>

但是这样会为每个待办项渲染同样的文本，这看起来并不酷炫，我们应该能将数据从父作用域传到子组件。修改下组件的定义，使之能够接受一个属性：

Vue.component('todo-item', {  props: ['todo'],  template : '<li>{{todo.next}}</li>'});

现在，可以使用v-bind指令将待办项传到每一个重复的组件中：

<div id="app-7">  <ol>    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>  </ol></div>

Vue.component('todo-item', {  props: ['todo'],  template : '<li>{{todo.next}}</li>'});var app7 = new Vue({  el: "#app-7",  data : {    groceryList : [      {text: '蔬菜'},      {text: '奶酪'},      {text: '随便啦'}    ]  }});

参考网址：https://cn.vuejs.org/v2/guide/