vue.js框架
写在前面
vue菜鸟教程
https://www.runoob.com/vue2/vue-install.html
1、开始上手
vue下载地址
https://vuejs.org/js/vue.min.js
打开是vue的代码，复制直接存在新建js文件里
在vue.js同目录里面创建一个1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '你好vue.js!'
}
})
</script>
</body>
</html>
运行html：一个最简单的vue项目就完成了
2、MVVM理解
在前端开发中，MVVM 是将View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开，来应对复杂的页面开发。
mvvm其实是MVC 的改进版，但要注意mvvn是前端思想、mvc是后端开发思想。
3、解析vue实例
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '你好vue.js!'
}
})
- el：表示当前new的这个实例，要控制页面哪个区域
- data：{ } 存放el中要用到的数据，是键值对类型
注意：vue不提倡手动操作DOM元素
4、使用HBuilder创建vue项目
源教程地址：
https://www.jianshu.com/p/bf51c5c311a3
HBuilder下载地址
https://download.dcloud.net.cn/HBuilderX.2.6.1.20200226.zip
注意，这里创建目录不要有中文，选择模板选vue第二个，不要选成普通模板
vue需要node.js支持，下载地址：
https://nodejs.org/en/download/
下载完成直接安转就ok
接下来配置node.js
配置完node后重启一下HBuilder
安装内置终端
编译
运行
到浏览器访问：http://localhost:8080/
