html 标签 标记 浏览器解析标签 渲染网页 网页内容(骨架)
css 级联样式表 只是用来修饰网页外观，不能进行内容的添加，主要将html语言中的内容和表现形式分离 浮动，定位，字体，背景
JavaScript 脚本语言，嵌套在网页中，可以为网页添加动态效果，相当于Java中的事件，为面向对象的语言，无需编译，在浏览器中直接运行，所以无法使用编译软件查看其是否存在语法错误等错误，但是可以在浏览器中的开发者模式中查看出错的地方
1、相应客户端鼠标事件和键盘事件
2、页面表单数据验证
3、改变标签的样式
前端框架：一套完整的解决方案，提供了前端项目整体解决方案
前端组件：针对某个方面进行封装，是对数据和方法的简单封装
Vue.js：一款js框架，对js的语法进行封装简化
特点：体积小，运行效率高，双向数据绑定，生态丰富，学习成本低
ElementUI：是一款UI(用户界面)框架，封装很多常用的前端组件，布局，表单，表格···
MVVM (Model-View-ViewModel)
M:model 数据模型 从后端获取
V:view html
VM:viewModel 指的就是vue框架，可以实现数据与视图的双向绑定，任意一方改变，由vue框架自动进行更新原生的js操作dom对象，只关心数据
注意：vue中的双向绑定不能给body和html标签挂载
vue指令：
插值表达式布盒覆盖标签中的内容，不能解析标签
v-text和v-html会覆盖标签中的内容，v-text不能解析标签，v-html能解析标签
v-on用来实现JavaScript中的事件，调用某个特定和方法
v-show 会更改标签中的display属性，使标签隐藏起来，但不删除标签，执行效率高
v-if 会直接删除标签，如果要使标签重新显示的话，需要重新进行渲染，执行效率低
v-else 是在v-if指令后使用，如果v-if中的条件不满足时，则会执行v-else中的内容，前提是两个指令必须相挨
v-model 设置，获取表单元素的值，也就是表单元素中的value属性
v-bind 绑定其他标签的属性的值 例如：
<img v-bind:src="imgChange"><!-- 相当于图片标签中的src属性和vue中的imgChange元素进行了双向绑定 -->v-for 用来循环的指令
<body>
<div id="app">
<select>
<option v-for="c in city">{{c}}</option>
</select>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
city:["北京","天津","上海"],
users:[{name:"jim1",age:20},{name:"jim2",age:20},{name:"jim3",age:20}]
}
})
</script>
</body>
