1.Vue简介
1.JavaScript框架
2.简化DOM操作
3.响应式数据驱动
通俗点来说就是页面是由数据生成的,数据改变以后,页面会同步更新。
2.第一个Vue程序
- 导入开发版本的Vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用简介的模板语法把数据渲染到页面上
3.el:挂载点
通过CSS选择器管理Vue选择的元素,el命中元素的内部使用两个大括号的部分被data中同名的数据替换,在上面的例子中message的数据就被Hello Vue!所替换。
几个问题?
Vue实例的作用范围是什么呢?
验证方法:在div内部和外部都设置{{message}}
Vue会管理el选项命中的元素及其内部的后代元素。
是否可以选择其他的选择器?
验证方法:给div也设置一个app类名 el挂载使用的是类选择器
可以选择其他选择器,但在实际开发中建议使用ID选择器,因为ID选择器在开发中约定是唯一的,使用其他选择器会使得语义不清晰。
是否可以置其他的DOM元素?
验证方法:将div标签该为p标签
可以设置其他DOM元素,但是只限于双标签(body除外)
4.data:数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可