vue基础(1) 基本概念及hello world

理论知识

  • 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 模型数据,值是一个对象
原文地址:https://www.cnblogs.com/guojuboke/p/12293517.html