Vue介绍

1. vue.js是什么

vue是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，其核心库只关注视图层。
当与现代化的工具链以及各种支持类库结合使用，也能为复杂的单页应用提供驱动。

2. 声明式渲染

采用简洁的模板语法来声明式将数据渲染进DOM

<div id="app">
    {{ message }}   // 利用文本插值，数据和DOM建立了关联，所有东西都是响应式
</div>

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

// v-bind特性被称为指令，带前缀v-，vue提供的特殊特性
<div id="app-2">
    <span v-bind:title="messgae"></span>
</div>

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

3. 条件与循环

// 不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构
// 可以在Vue插入/更新/移除元素时自动应用过渡效果
<div id="app-3">
    <p v-if="seen">看到我</p>
</div>

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

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: '学习1' },
            { text: '学习2' },
            { text: '学习3' },
        ]
    }
})

4. 处理用户输入

// 让用户和你的应用进行交互，用v-on指令添加一个事件监听器，来调用在vue实例中定义的方法
<div id="app-5">
    <p>{{ messgae }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello',
    },
    methods: {
        // 更新了应用的状态，但没有触碰DOM(所有DOM操作都由Vue处理，编写代码只需关注逻辑层面)
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

// v-model指令，轻松实现表单输入和应用状态之间的双向绑定
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello'
    }
})

5. 组件化应用构建

允许我们使用小型、独立和通常可复用的组件构建大型应用。
在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例。

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

// 构建另一个组件模板
<ol>
    // 创建一个todo-item组件的实例
    <todo-item></todo-item>
</ol>

从父作用域将数据传到子组件

// 修改组件的定义，使之能够接受一个prop
Vue.component('todo-item', {
    // 子组件接受一个prop,类似于一个自定义特性
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

// 使用v-bind指令将待办项传到循环输出的每个组件中
<div id="app-7">
    <ol>
        // 为每个todo-item提供todo对象
        // todo对象是变量,其内容可以是动态的
        // 需要为每个组件提供一个"key"
        <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id">
        </todo-item>
    </ol>
</div>

var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '牛肉' },
        ]
    }
})