vue2.0介绍

1.vue.js 是什么

vue（view）是一套构建用户界面的渐进式框架

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.

2.声明式渲染

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

{{ message }} 绑定dom 元素

v-bind：绑定dom属性；缩写： :

用法：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<!-- 绑定一个属性 -->

<img v-bind:src="data:imageSrc">

<!-- 缩写 -->

<img :src="data:imageSrc">

<!-- with inline string concatenation -->

<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->

<div :class="{ red: isRed }"></div>

<div :class="[classA, classB]"></div>

<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->

<div :style="{ fontSize: size + 'px' }"></div>

<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->

<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->

<my-component :prop="someThing"></my-component>

<!-- XLink -->

<svg><a :xlink:special="foo"></a></svg>

3.条件与循环

v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

v-for：基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

<div v-for="item in items">

  {{ item.text }}

</div>

4.处理用户输入

v-on:

缩写： @

修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。

用法：

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性： v-on:click="handle('ok', $event)"。

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->

<input @keyup.13="onEnter">

在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->

<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->

<my-component @click.native="onClick"></my-component>

5.组件化应用构建

 <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'],//props:类似于一个自定义属性,这个属性名为 todo

            template: '<li>{{ todo.text }}</li>'

        })

        var app7 = new Vue({

            el: '#app-7',

            data: {

                groceryList: [{

                        text: '蔬菜'

                    },

                    {

                        text: '奶酪'

                    },

                    {

                        text: '随便其他什么人吃的东西'

                    }

                ]

            }

        })

巴特西