HelloVue
步骤
第一步：创建一个HTML文件
在导航栏中的文件按钮中新建文件，在右下角的位置将纯文本替换成HTML。如图
在文本中输入! + tab即可生成HTML文件的模板。
第二步：导入Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
开发版本提示更加多，但是体积也更加大。生产版本削去不必要的提示，同时也压缩了体积。新人学习的时候建议使用开发版本。
第三步：编写HTML
<div id='app'>
{{ message}}
</div>
第四步：编写JavaScript
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
</head>
<body>
<div id='app'>
{{ message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
讲解
el：挂载点
- el是用来设置Vue实例挂载(管理)的元素
元素中用{{}}修饰的内容，会被Vue实例中data的属性的值替换。 - Vue实例的作用范围
Vue会管理el选项命中的元素及其内部的后代元素。 - 可以使用的选择器
可以使用其他的选择器，但是建议使用ID选择器。因为ID选择器可以保证挂载唯一，而其他选择器都有可能挂载多个元素。 - 可以设置的dom元素
可以使用除了HTML和BODY以外其他的双标签，单标签不行。建议使用div标签，因为div没有特殊的样式。
data：数据对象
1.Vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂类型数据时，遵守js的语法即可
复杂类型的data demo
示例如下：
<body>
<div id='app'>
{{ message}}
<h2>{{ school.name }} {{school.ranking}}</h2>
<ul>
<li>{{academy[0]}}</li>
<li>{{academy[1]}}</li>
<li>{{academy[2]}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
school: {
name: '清华北大',
ranking: 1
},
academy: ['计算机学院', '美术学院', '数学学院']
}
})
</script>
</body>
效果：
都非常简单，不做过多解释。