VUE.JS 简介

VUE.JS 是什么？

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

第一个vue程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue程序</title>
</head>
<body>
    <div id="app">
        {{message}}  <!-- {{}} 是vue的数据渲染方法,在里面可以直接写数据 也可以写一些简单的逻辑 还可以写函数调用-->
    </div>
    <script src="../../js/vue.js"></script> <!-- 引入外部vue.js 文件 -->
    <script>
        var app = new Vue ({
            el: '#app', // el: element(元素)的缩写，在vue中 el 可以当作js内容要执行在 id 名为 app 标签元素；
            data: { // data: vue中存储数据的地方；
                message: 'hello,Vue!',
                people: {
                    name:'李白',
                    age: 18,
                },
                school: ['郑州','三门峡','合肥']
            }
        })
    </script>
</body>
</html>

vue 语法格式：

        var app = new Vue ({
            el: '#app', // el: element(元素)的缩写，在vue中 el 可以当作js内容要执行在 id 名为 app 标签元素；
            data: { // data: vue中存储数据的地方；
                message: 'hello,Vue!',
                people: {
                    name:'李白',
                    age: 18,
                },
                school: ['郑州','三门峡','合肥'],
            }
        })

        <div id = "app">
            <div>{{}}</div>
        </div>
    <script>
        new Vue({
            data: {

            }
        }).$mount('#app')  // 另一种挂载点的写法
    </script>

el : 

    element(元素)的缩写，在vue中 el 可以当作js内容要执行在 id 名为 app 标签元素；简单理解就是选中某个元素,所有的vue代码都应该包含在挂载点的内部；

    el 的作用范围：只能选中命中的元素，及其内部的后代元素；

data : 

    vue中用到的数据都存在data中；data中可以写其他的复杂数据类型（数组，对象等）

methods：

    定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用；

vue中渲染数据：

    在Vue我们可以通过 {{}} 来渲染数据，在里面可以直接写数据 也可以写一些简单的逻辑 如三元表达式等 还可以写函数调用；渲染复杂的数据类型时，遵守js的语法即可（对象的 . 语法；数组的[索引] 语法）；

        <div id="app"> {{message}} </div>
        <!-- 对象 . 语法 -->
        <span>{{people.name}}</span>
        <span>{{people.age}}</span>
        <!-- 数组[索引] 语法 -->
        <div>
            {{school[2]}}
        </div>