认识vue
Posted 猪八戒1.0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了认识vue相关的知识，希望对你有一定的参考价值。
认识vue.js框架
它是目前非常流行的一个框架。主要用于前端的MVVM的开发，也是前端的SPA开发框架，它是一个专 门用于服务前端的一个框架 能够实现SPA的框架目前有3个
1. vue.js
2. react.js
3. angular
M:model V:view VM:viewmodel
网页代码相当于view,上面的data相不于model,而这两者结合过程，我们叫viewmodel
下载网址
https://v2.cn.vuejs.org/Vue.js - The Progressive javascript Framework
https://v2.cn.vuejs.org/
开发工具
前端的开发工具有很多
1. WebStorm这一款开发工具，好用，但是要钱
2. VSCode微软出品，必属精品，免费， 不要钱
3. HbuilderX 国产软件，良心制作, 这一款开发工具后期不仅可以开发网页，不可以将我们的 webapp打包成安卓或ios程序，也可以发布为小程序
第一个vue程序
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
msg
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
msg:"hello world"
);
</script>
</html>在上面的代码里面，我们可以看到一个的东西，这是一种特殊的语法，这一种法允许在MVVM的视图区域里面去使用data当中的数据 ，也可以在去书写js代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>msg</h1>
student.name student.class
<ul>
<li>play[0]</li>
<li>play[1]</li>
<li>play[2]</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
msg:"你好",
student:
name:"猪八戒",
class:"2班"
,
play:["抖音","电视剧","敲代码"]
);
</script>
</html>
以上是关于认识vue的主要内容，如果未能解决你的问题，请参考以下文章