vue基础 基本概念及hello world
Posted guojuboke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础 基本概念及hello world相关的知识，希望对你有一定的参考价值。
理论知识
- vue是一个渐进式的js框架。
- 渐近 vue能够提供 1声明式—>2组件系统->3客户端路由->4集中式状态管理->5项目构建 五种渐进（功能逐渐强大）的模式，用户可根据项目大小使用不同的模块。
框架 指能够提供基础服务，强调服务。对于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 模型数据，值是一个对象
以上是关于vue基础 基本概念及hello world的主要内容，如果未能解决你的问题，请参考以下文章