【Vue自学笔记（一）】第一个Vue程序

HelloVue

步骤

第一步：创建一个HTML文件
在导航栏中的文件按钮中新建文件，在右下角的位置将纯文本替换成HTML。如图

在文本中输入! + tab即可生成HTML文件的模板。

第二步：导入Vue

 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

开发版本提示更加多，但是体积也更加大。生产版本削去不必要的提示，同时也压缩了体积。新人学习的时候建议使用开发版本。

第三步：编写HTML

<div id='app'>
        {{ message}}
    </div>

第四步：编写JavaScript

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello 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}}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

讲解

el：挂载点

el是用来设置Vue实例挂载(管理)的元素
元素中用{{}}修饰的内容，会被Vue实例中data的属性的值替换。
Vue实例的作用范围
Vue会管理el选项命中的元素及其内部的后代元素。
可以使用的选择器
可以使用其他的选择器，但是建议使用ID选择器。因为ID选择器可以保证挂载唯一，而其他选择器都有可能挂载多个元素。
可以设置的dom元素
可以使用除了HTML和BODY以外其他的双标签，单标签不行。建议使用div标签，因为div没有特殊的样式。

data：数据对象

1.Vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂类型数据时，遵守js的语法即可

复杂类型的data demo

示例如下：

<body>
    <div id='app'>
        {{ message}}

        <h2>{{ school.name }} {{school.ranking}}</h2>
        <ul>
            <li>{{academy[0]}}</li>
            <li>{{academy[1]}}</li>
            <li>{{academy[2]}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                school: {
                    name: '清华北大',
                    ranking: 1
                },
                academy: ['计算机学院', '美术学院', '数学学院']
            }
        })
    </script>
</body>

效果：

都非常简单，不做过多解释。