Vue简介

Vue是一套用于构建用户界面的渐进式框架。

JavaScript框架
简化DOM操作
响应式数据驱动（即页面由数据生成，数据改变，页面同步更新）

第一个Vue程序

步骤如下：

导入开发版本的Vue.js。在HTML中有两种方式导入不同版本的Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告    学习中常用此版本，类似完整版jQuery-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 类似mini版jQuery-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

创建Vue实例对象，设置el属性和data属性。
使用简洁的模板语法把数据渲染到页面上。

// 在HTML中写
<div id="app">
  {{ message }}
</div>

// 在JS中写
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

基本的Vue程序代码如下：

<body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '你好呀超级农农~~'
            }
        })
    </script>
</body>

页面效果显示如下：

图片.png

el：挂载点

el是用来设置Vue实例挂载（管理）的元素。

Vue会管理el选项命中的元素及其内部的后代元素。

可以使用其他的选择器，但是建议使用ID选择器（#），因为ID选择器可以直接选中某个元素。

可以使用其他的双标签，不能使用HTML和BODY。建议挂载div元素，因为没有额外的样式。

data：数据对象

Vue中用到的数据定义在data中。

data中可以写复杂类型的数据，如对象，数组等。渲染复杂类型数据时，遵守js的语法即可。

<body>
    <div id="app">
        {{ message }}
        <h2>{{ info.city }} {{ info.birth }}</h2>
        <ul>
            <li>{{ songs[0] }}</li>
            <li>{{ songs[1] }}</li>
            <li>{{ songs[2] }}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '你好呀超级农农~~',
                songs: ["敬长大","青春的酸也很甜","夏日滋味"],	// 数组
                info:{					// 对象
                    city: "台湾",
                    birth: "2000-10-3"
                }
            }
        })
    </script>
</body>