VueJS初次使用完全解析 _vue框架

【VueJS初次使用完全解析】接上一节：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="http://img.readke.com/220411/0Z30540W-0.jpg">< /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}}，如果改变该值，对应的页面渲染也会跟着改变，如下：