首先我们新建一个vue项目，引入vue.js
vue.js可以直接去官网下载：官网地址：https://cn.vuejs.org/v2/guide/installation.html，你可以下载任何一个版本，当然，你也可以直接引入cdn的路径。如下图所示：
然后我们新建一个demo，双大括号为vue的取值方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{messages}}</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<div>{{messages}}</div>
</body>
</html>
<script>
let list=["海贼王","火影忍者","一拳超人","Java","Python"];
const app = new Vue({
el:"#app",
data:{
"messages":"娃儿瑞啦啦啦",
"list":list
}
});
</script>
| 类型 | 语法 | 说明 |
| 普通值 |
|
直接使用双大括号取值即可 |
| list |
|
使用vue语法【v-for】循环遍历list。list指new vue中的data的list值，item是迭代器，指代每一个元素，{{item}}为取值方式 |
el属性是指定vue扫描的dom元素，一般都是div，比如上述代码，如果你将{{message}}写到id=app的div范围外，是不会产生vue解析后的数据的，在页面上仅仅会展示{{message}}这个样子。如下图所示：
这就是vue的最简单的语法。