VUE.JS 简介_vue.js是固定的吗-优快云博客

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/105244757

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>