前提
学习Vue,首先需要了解HTML、CSS、Javascript
作用
- 原生Javascript:开发时代码不简洁、大量重复片段
- Jquery框架:简化了常用操作
- Vue框架:响应式
第一个程序
我是利用VsCode编写代码,然后liveServer插件来动态查看代码
这个程序功能,利用vue对象来绑定该div,来改变message的值(这里的message可以换成其他单词,与data处对应即可)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 快速入门1 </title>
</head>
<body>
<!-- 创建一个div块,id=app -->
<div id="app">
{{message}}
</div>
<!-- 创建Vue对象
el表达式 #根据id为app获取Dom
绑定值data
-->
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好Vue"
}
})
</script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
运行结果是
Vue对象结构
从上面程序可以看出Vue对象由两部分组成
下面主要介绍这两部分
el挂载点
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue! 哈哈"
}
})
el
作用就是选择Vue实例挂载的元素
data
指数据对象
如上程序所示,el其实还可以像jQuery选择器一样,通过类名和标签来选择元素
el:"#app"
id选择器 推荐el:"div"
标签选择器el:".appClass"
类选择器
代码中通过var app = new Vue
来创建了一个Vue实例,选择了id=app的div元素,通过data的{{ something }}
来绑定值
Vue会管理el选项命中的元素及其内部的后代元素,也就是说data的{{something}}
若在元素外部会无效
<!-- 测试在标签外部 能否使用 -->
{{message}}
<div id="app" class="appClass">
{{message}}
<!-- 测试在标签内部 能否使用 --><br>
<span>{{message}}</span>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"div",
//el:"div",
//el:".appClass",
data:{
message:"你好Vue"
}
})
</script>
运行结果如下,也就是说作用范围是:命中的div
外部无效,内部有效
data数据对象
除了上面利用{{something}}
字符串类型还可以有arry:[]
数组和obj:{}
键值对
array
类型:用arr[i]
来获取obj{}
键值对类型:用obj.xxx
获取
程序:
<div id="app" >
<h3>{{message}} </h3> <br>
school内容是 {{school}} <br>
schoolname是{{school.name}} <br>
校区是 {{campus}} <br><br>
用无序列表和campus[i]
<ul>
<li> {{campus[0]}} </li>
<li> {{campus[1]}} </li>
<li> {{campus[2]}} </li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"data数据对象学习",
school:{
name:"蓝天学校",
mobile:"000-xxx-1214"
},
campus:["北京校区","上海校区","南京校区"]
}
})
</script>
运行结果