本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

好处

轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）移动优先。更适合移动端，比如移动端的 Touch 事件易上手，学习曲线平稳，文档齐全吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性开源，社区活跃度高

2.第一个vue的程序

开发版本包含完整的警告和调试模式：vuejs.org/js/vue.js 删除了警告，30.96KB min + gzip：vuejs.org/js/vue.min.…

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<body>
    <div id="vue">
        {{message}}
    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data: {
                message: 'Hello Vue!'
            }
        }); 
    </script>
</body>

</html>

el:'#vue' ：绑定元素的 ID data:{message:'Hello Vue!'} ：数据对象中有一个名为 message 的属性，并设置了初始值

在这里插入图片描述

说明：只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果，是不是和 EL 表达式非常像？

2.基本语法

2.1 v-bind

v-bind 特性被称为指令。指令带有前缀 v- ，以表示它们是 Vue 提供的特殊特性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!--如果要将模型数据绑定在html属性中
             则使用 v-bind 指令,此时title中显示的是模型数据 -->
        <h1 v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </h1> <!-- v-bind 指令的简写形式： 冒号（:） -->
        <h1 :title="message">我是简写的v-bind/h1>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        }) 
    </script>
</body>

</html>

v-bind: 被称为指令，v- 代表啥vue的指令。 v-bind: 的简写形式就是 :

2.2 v-if 系列

v-if v-else-if v-else

<body>
    <div id="app">
        <h1 v-if="type === 'A'">A</h1>
        <h1 v-else-if="type === 'B'">B</h1>
        <h1 v-else-if="type === 'C'">C</h1>
        <h1 v-else>who</h1>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                type: 'B'
            }
        }) 
    </script>
</body>

2.3 v-for

<body>
    <div id="app">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                //items数组
                items: [
                    { message: '你好Java！' },
                    { message: '你好世界！' }
                ]
            }
        }) 
    </script>
</body>

2.4 v-on

v-on 监听事件：

<body>
    <div id="app">
        <button v-on:click="sayHi">点我</button> 
        <!-- v-on 指令的简写形式 @ --> 
        <button @click="sayHi">点我</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message:"你好，世界"
            },
            methods: {
                sayHi:function(event){
                    alert(this.message);
                }
            }
        }) 
    </script>
</body>

v-on:click="sayHi" 绑定事件简写 @click="sayHi"

2.5 v-model

v-model：双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

文本框

<body>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 可以进行双向的数据绑定 -->
        <input type="text" v-model="searchMap.keyWord">
        <p>您要查询的是：{{searchMap.keyWord}}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '张三'
                }
            },
            methods: {

            }
        }) 
    </script>
</body>

v-bind:value只能进行单向的数据渲染 v-model 可以进行双向的数据绑定

单复选框

for 属性规定 label 与哪个表单元素绑定。

<body>
    <div id="app">
        单复选框：
        <input type="checkbox" id="checkbox" v-model="checked">
        &nbsp;&nbsp;
        <label for="checkbox">{{ checked }}</label>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                checked: false
            },
            methods: {

            }
        }) 
    </script>
</body>

下拉框：

<body>
    <div id="app">
        下拉框：
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>选中的值: {{ selected }}</span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                selected: ''
            },
            methods: {

            }
        }) 
    </script>
</body>

3.组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

3.1 第一个vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，以下方法只是为了让大家理解什么是组件。

新建一个 vue-component.html

<body>
    <div id="app">
        <ul>
            <!-- 有点类似自定义标签 --> 
            <my-component-li v-for="item in items"  v-model:value="item"></my-component-li> 
        </ul>
    </div>
 

    <script>
        // 先注册组件
        Vue.component('my-component-li', {
            props: ['value'],
            template: '<li>{{value}}</li>'
        });
        // 再实例化 Vue 
        var vm = new Vue({
            el: '#app',
            data () {
                return {
                    items:["张三","李四","王二麻子"]
                }
            }
        }); 
    </script>
</body>

Vue.component()：注册组件 my-component-li：自定义组件的名字 props：参数传递 template：组件的模板

注意：默认规则下 props 属性里的值不能为大写：

4. 计算属性

<body>
    <div id="app">
        <span>选中的值: {{ currentTime }}</span>
        <span>当前时间戳: {{ currentTime1() }}</span>
        <span>当前时间戳: {{ currentTime2 }}</span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentTime: Date.now()
            },
            methods: {
                currentTime1:function(){
                    return Date.now();
                }
            },
            computed:{
                currentTime2:function(){
                    return Date.now();
                }
            }
        }) 
    </script>
</body>

注意：methods 和 computed 里的东西不能重名调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

5.插槽

在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

我们先用模板组件定义一个简单的待办事项的

<body>
    <div id="app">
        <todo></todo>
    </div>


    <script>
        // 定义一个待办事项的组件 
        Vue.component('todo', {
            template: '<div>' +
                '<div>待办事项</div>' +
                ' <ul>' +
                '<li>猫吃鱼</li>' +
                '<li>狗吃肉</li>' +
                '<li>奥特曼打小怪兽</li>' +
                ' </ul>' +
                ' </div>'
        });

        new Vue({
            el: '#app',
            data: {

            }
        }) 
    </script>
</body>

但是这些代办怎么实现动态绑定呢

<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" title="代办事项"></todo-title>
            <todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item" v-bind:index="index"></todo-items>
        </todo>
    </div>


    <script>
        // 定义一个待办事项的组件 
        Vue.component('todo', {
            template: '<div>' +
                '<slot name="todo-title"></slot>' +
                ' <ul>' +
                '<slot name="todo-items"></slot>' +
                ' </ul>' +
                ' </div>'
        });
        Vue.component('todo-title', {
            props: ['title'],
            template: '<div>{{title}}</div>'
        });
        //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
         Vue.component('todo-items', { 
            props: ['item', 'index'], 
            template: '<li>{{index + 1}}. {{item}}</li>'
         });

        new Vue({
            el: '#app',
            data: {
                todoItems: ['猫吃鱼', '狗吃肉', '奥特曼打小怪兽']
            }
        }) 
    </script>
</body>

vue入门到精通-第一个vue程序和基本语法组件