理论知识
- vue是一个渐进式的js框架。
- 渐近 vue能够提供 1声明式—>2组件系统->3客户端路由->4集中式状态管理->5项目构建 五种渐进(功能逐渐强大)的模式,用户可根据项目大小使用不同的模块。
声明式编程,只需要告诉程序需要什么效果,其他的交给程序完成.基于vue模板语法的网页结构和最终效果基本一致。
- 框架 指能够提供基础服务,强调服务。对于vue有虚拟dom、双向数据绑定的底层服务支撑。
库指提供一些功能接口,强调接口。jquery是一个库,主要包含了一些常用的API等,不是服务。
- vue运行基本原理
- 用户写vue代码,vue框架编译这些代码,生成原生js代码,交给浏览器执行。
- vue三大特点
- 易用:熟悉htmlcssjs知识,即可上手
- 灵活:在库和完整框架之间自如伸缩
- 高效:虚拟DOM,20k运行大小
实践
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="vue.js"></script> <!-- vue.js去官网下载,保存在项目目录下面 -->
</head>
<body>
<div id="app">
{{ msg }} //插值表达式 将数据填充到html标签
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app', //选择要操作的元素对象,确定数据填充目标。
data:{ //要操作的数据,与dom元素进行数据绑定。
msg:'hello world'
}
})
</script>
</body>
</html>
总结
- 创建vue实例时,大括号在小括号内部, var app =New vue({ }),不是在外部。
- {{ data }} 这是一个插值表达式,支持基本计算。只要符合js表达式即可。
- Vue所作的工作本质上是将数据填充到网页中,因此创建vue实例时需要两个属性。
- el 元素的挂载位置,可以式css选择器或dom节点
- data 模型数据,值是一个对象