安装
vue的安装大体上分成三种方式，第一种是通过script标签引用的，第二种是通过npm(node package manager)来安装，第三种是通过vue-cli命令行来安装。作为初学者，建议直接通过第一种方式来安装，把心思集中在vue的学习上，而不是安装上。
# 开发环境 <script src="https://cdn.jsdelivr.net/npm/vue"></script> # 或者是指定版本号 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> # 或者是下载代码保存到本地 <script src="lib/vue.js"></script> # 生产环境，使用压缩后的文件 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
基本使用
要使用Vue，首先需要创建一个Vue对象，并且在这个对象中传递el参数，el参数全称是element，用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数，data中的所有值都可以直接在根元素下使用{{}}来使用。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuedemo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"name": "博客园"
}
});
</script>
</body>
</html>
其中data中的数据，只能在vue的根元素下使用，在其他地方是不能被vue识别和渲染的。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuedemo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
</div>
<!-- 这里渲染不了,页面中展示{{name}} -->
<p>{{name}}</p>
<script>
let vm = new Vue({
el: "#app",
data: {
"name": "知了课堂"
}
});
</script>
</body>
</html>
另外也可以在vue对象中添加methods，这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用，并且在methods中的函数来访问data中的值，只需要通过this.属性名就可以访问到了，不需要额外加this.data.属性名来访问。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuedemo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{greet()}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"name": "博客园"
},
methods: {
greet: function () {
return "HELLO ！" + this.name
}
}
});
</script>
</body>
</html>