srcmini接上一节：VueJS开发中的常见知识点和问题，Vue是一个JavaScript框架，用于构建用户界面，它主要集中于视图层，它的使用非常简单。因为Vue用于前端开发，所以需要处理相关的HTML、JavaScript和CSS，下面先从简单的使用开始。这里使用的版本是Vue 2.x，vue目前已经更新到3了，你也可以尝试使用新版本。
1、创建vue项目和引入vue
首先，在vscode中（或其它IDE）创建一个app.html文件，这里使用CDN引入，如下：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
</body>
</html>
2、使用vue和解析
在body中添加一个div，添加id为title，然后再div中添加h1标签，如下：
<body>
<div id="title">
<h1>{{message}}</h1>
</div>
<script>
var vue = new Vue({
el: "#title",
data: {
message: "第一个VueJS项目"
}
});
</script>
</body>
这里创建vue实例只需要new一个Vue，里面传入一个对象，对象的第一个元素是el，该属性要求指定对应的html元素的唯一标识符，这里使用id，你也可以使用class，但是一般都是使用id。
第二个属性是data，该属性指定传给对应el的html元素的数据，上面message的数据对应h1标签中的{{message}}，如果改变该值，对应的页面渲染也会跟着改变，如下：
在浏览器中打开console控制台，输入vue，可打印vue实例，该实例在以后的开发和调试中可能会经常遇到，如下图：
评论前必须登录！
注册