文章目录
1、引言
- ① JavaScript框架
- ② 简化Dom操作
- ③ 响应式数据驱动
document文档 object 对象 model模型,Dom翻译中文:文档对象模型
4、第一个Vue程序(Hello Vue)
- 导入开发版本的Vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}}{{name}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: "Hello Vue !",
name: ' by yangchaoyi'
}
});
</script>
</body>
</html>
5、el挂载点相关问题
- ① Vue实例的作用范围是什么呢?
- ② 是否可以使用其他的选择器?
- ③ 是否可以设置其他的dom元素呢?
第一个问题: Vue实例的作用范围是什么呢?
比如我们在元素的外部写上{{message}}
结果显示:
6、data:数据对象
- ① Vue中用到的数据定义在data中
- ② data中可以写复杂类型的数据
- ③ 渲染复杂类型数据时,遵守js的语法即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本,包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<h3>{{school.name}} {{school.phone}}</h3>
<h3>专业:</h3>
<li>{{array[0]}}</li>
<li>{{array[1]}}</li>
<li>{{array[2]}}</li>
<li>{{array[3]}}</li>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: "Hello Vue !",
school:{
name:'湖南大学',
phone:'123456'
},
array:['计算机','市场营销','信息管理','医学信息工程']
}
});
</script>
</body>
</html>