一、Vue初体验及基础结构

作者: 温新

分类: 【Vue.js】

阅读: 2111

时间: 2020-08-25 14:08:34

说明

基础2.x作为笔记记录。因为记录的笔记比较慢，如果笔记还未完全记录完整且又碰到Vue3稳定版，那么笔记会转向Vue3进行记录。

什么是Vue.js

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

Vue.js一个典型的MVVM（Model-View-ViewModel）模型框架，它由MVC演变而来。

关于什么是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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>

    <script>
        var vm = new Vue({			// 初始化一个Vue实例
            el:"#app",				// 挂载Vue区域
            data:{
                msg : '自如初'		  // 定义数据
            }
        });
    </script>
</body>
</html>

代码分析

首先是引入Vue.js。为了快速便捷的体验，这里引入了CDN资源。引入Vue.js之后就可以大张旗鼓的使用它了，一切好的玩的都将从引入Vue.js这一刻开始。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

其次就是对Vue进行实例化了。想要玩好Vue，还需要为它指定一个地方，哪个地方是Vue的专属区域，这里为Vue指定了一个id为div的元素，这个div里面将是Vue的天下了。Vue从这里正式开始。

<!-- vue的专属区域 -->
<!-- 数据展示，对应着View -->
<div id="app">
    {{ msg }}
</div>

实例Vue对象

<script>
    var vm = new Vue({		// new Vue() 对应着ViewModel
        el:"#app",
        data:{
            msg : '自如初'	  // data对应着Model
        }
    });
</script>

Vue初体验到这里就结束咯。结束之后的疑问？还什么都没有做，数据怎么就出来了，如果有此疑惑就对了，这就是Vue的魅力所在。魅力无限，笔记不断，一步一步学习，一步一步解惑。

2020-8.25

请登录后再评论