Vue的入门
首先学习Vue,看官网是最简单明了的入门方式,官网地址:https://cn.vuejs.org/
在学习Vue之前呢,需要咱们已了解关于 HTML、CSS 和 JavaScript 的知识,这是最基础的。
第一步,在官网上下载并安装Vue.js
注意:要安装开发版本的,因为开发版本含有命令行警告,生产版本就是压缩后的js库。
第二步,创建一个.html的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.html结构 -->
{{ mesage }}
<div id="app">
{{ message }}
<br/>
<span>{{ message }}</span>
</div>
<script>
//3.创建Vue示例
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
</body>
</html>
显示效果
解释:
1)el 挂载点:el是用来设置Vue实例挂载的元素、Vue会管理el选项命中的元素及其内部的后代元素
2)data数据对象:Vue中用到的数据定义在data中
关于 data 的复杂类型的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data:复杂数据类型</title>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.html结构 -->
<div id="app">
<h2>地址:{{ addr.name }} 电话:{{ addr.mobile }}</h2>
<ul>
<li>{{ index[0] }}</li>
<li>{{ index[2] }}</li>
<li>{{ index[4] }}</li>
</ul>
</div>
<script>
//3.创建Vue示例
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue",
addr:{
name:"江苏",
mobile:"400-8888888"
},
index:["南京","苏州","无锡","徐州","宿迁"]
}
})
</script>
</body>
</html>
显示效果
data 中可以写复杂类型的数据,渲染服装类型数据时,遵守js的语法就可以了。