Vue入门学习（一）

目前，前端主要有jquery、react、Angular、Vue等主流框架，各有其特点，可以进行对比
今天我们看一下Vue.js的魅力所在。
Vue.js是什么？
Vue（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级别框架不同的是，Vue采用自底向上的增量开发的设计。Vue的核心只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页面应用程序提供驱动。
学习Vue.js，首先我们可以通过下面方式引进Vue，和引进jquery一样。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

1.声明式渲染
Vue.js核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM。

<div id="app">    {{message}}</div>

var app = new Vue({    el: "#app",    data: {        message: 'hello world!'    }})

就是这么简单，好像渲染一个字符串一样，其实Vue在后面已经帮我们搞定，将数据和DOM绑定在一起了，所有的元素都是响应式的。
打开浏览器的控制台，当我们修改app.message，视图层将会更新。
除了文本插值，我们还可以通过这样的方式绑定DOM元素属性：

<div id="app">    <span v-bind:title="message">鼠标停几秒钟就会发生改变</span></div>

var app = new Vue({    el: '#app',    data: {        message: '页面加载于' + new Date()    }})

v-bind属性被称为指令，指令带有前缀 v-，以表示Vue提供的特殊属性，它们会在渲染的DOM上应用特殊的响应式行为，简言之，简言之，该指令的作用是：”将这个元素节点的title属性和Vue实例的message保持一致”
2.条件与循环
v-if指令控制切换一个元素的显示

<div id="app">    <p v-if="seen">显示</p></div>

var app = new Vue({    el: '#app',    data: {        seen: true    }})

继续在控制台上输出 app.seen = false,我们发现里面的显示消失了。
v-for指令 可以绑定数组中的数据，渲染每一个项目列表。

<div id="app">    <ul>        <li v-for="item in arr">            {{item.text}}        </li>    </ul></div>

var app = new Vue({    el: "#app",    data: {        arr: [            { text: 'apple' },            { text: 'banana' },            { text: 'orange' }        ]    }})

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

<div id="app">    <p>{{message}}</p>    <button v-on:click="reseverMessage">逆转消息</button></div>

var app = ({    el: "#app",    data: {        message: 'Hello World'    },    methods: {        reverseMessage: function(){            this.message = this.message.split('').reveser.join('');        }    }})

在reverse方法中，我们更新了数据，但没有触碰到DOM–所有的DOM都有Vue来处理，你编写的代码不需要关注底层逻辑。

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

<div id="app">    <p>{{message}}</p>    <input type="text" v-model="message"></div>

var app = new Vue({    el: "#app",    data: {        message: "Hello World"    }})

组件化引用构建
Vue系统是vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型引用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。
在Vue里，一个组件本质上是一个拥有预定义选项的Vue实例，在Vue中注册组件很简单：

//定义名为todo-item的新组件Vue.componnet('todo-item',{    template: '<li>这是个待办项</li>'})

现在你可以用它构建另一个组件模板：

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

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

Vue.component('todo-item',{    //todo-item 组件现在接收一个"props",类似一个自定义的属性，这个属性名为todo.    props: ['todo'],    template: '<li>{{todo.text}}</li>'})

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

<div id="app">    <ul>        <!-- 现在我们为每个todo-item提供待办项对象 -->        <!-- 待办项对象是变量,即其内容是可以动态的 -->        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>    </ul></div>

var app = new Vue({    el: "#app",    data: {        groceryList: [            { text: '黄瓜菜' },            { text: '青椒菜' },            { text: '其他的菜' }        ]    }})

运行结果如下:

• 黄瓜菜
• 青椒菜
• 其他的菜

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发可管理。这里有一个（假想的）使用了组件的应用模板是什么样的例子

<div id="app">    <app-nav></app-nav>    <app-view>        <app-slidebar></app-slidebar>        <app-content></app-content>    </app-view></div>

与自定义元素的关系
你可能会注意到Vue组件非常类似于自定义元素–它是Web组件规范的一部分，这是因为Vue的组件语法部分参考了该部分。例如，Vue组件实现了Slot API与is特性。但还是有几个区别：
1.Web组件规范仍然处理草案阶段，并且尚无浏览器原生实现，相比之下，Vue不需要任何补丁，并且在所有支持的浏览器（IE及更高版本）之下表现一致。必要时，Vue组件也可以包装于原生自定义元素之内。
2.Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流，自定义事件通信以及构建工具集成。