1.什么是Vue
1.遵守JavaScript框架
2.简化Dom操作
3.响应式数据驱动
https://cn.vuejs.org/ Vue官网
2.第一个Vue程序
引入Vue
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
前者适合学习时使用
- 导入开发版本的Vue.js
- 创建Vue实例对象,设置el属性和data属性
- 用间接的模板语法将数据渲染到页面上
{{}}为插值表达式:插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}
3.el属性:挂载点
- 获取Vue实例关联的DOM元素 。
- el命中的元素内部可以任意嵌套。
- 可以使用其他选择器,但建议使用id选择器,其他选择器可能不好控制
- 支持双标签,不支持单标签。(不支持HTML和BODY)
4.data属性:数据对象
- Vue中所需的数据定义在data属性中
- data中可以写复杂数据类型
- 渲染复杂数据类型时,遵守js的语法即可
data:{
message:"Hello Vue!",
person:{
name:"hyh",
school:"jnu",
habits:["lol","rap music","Variety Show"]
}
}
<div id="app">
{{message}}
<h1>{{person}}</h1>
<h2>{{person.name}}</h2><h2>{{person.school}}</h2>
<ul>
<li>{{person.habits[0]}}</li>
<li>{{person.habits[1]}}</li>
<li>{{person.habits[2]}}</li>
</ul>
</div>
效果: