下面是对Vue的介绍和对Vue的基本使用,希望可以帮助到有需要的小伙伴~
VUE介绍
Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。
Vie的核心库只关注视图层,不仅易于上手,而且便于与第三方库或既有项目整合。当Vue与现代化的工具链以及各种支持类库结合使用的时候,Vue完全能够为复杂的单页应用提供驱动。
Vue.js的创建者是 尤雨溪
- 2014年2月,Vue.js正式发布
- 2015年10月27日,正式发布1.0.0
- 2016年4月27日,发布2.0的预览版本
Vue:渐进式JavaScript框架
声明式渲染 → 组件系统→客户端路由→集中式状态管理→项目构建
官网:https://cn.vuejs.org/v2/guide/
- 易用︰熟悉HTML、CSS、JavaScript知识后,可快速上手Vue
- 灵活:在一个库和一套完整框架之间自如伸缩
- 高效:20kB运行大小,超快虚拟DOM
Vue的基本使用
Vue的基本使用步骤
- 需要提供标签用于填充数据
- 引入vue.js库文件
- 可以使用vue的语法做功能
- 把vue提供的数据填充到标签里面
把下载的vue.js文件复制到vue项目中
hello world示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
</head>
<body>
<!-- 1. 提供标签用于存放数据 -->
<div id="app">
<!-- 4. 把vue提供的数据填充到标签里面 -->
<!-- 把msg数据存放到id为app的div中 -->
<div>{{msg}}</div>
</div>
<!-- 2. 引入vue.js库文件 -->
<script src="js/vue.js"></script>
<script>
// 3. 使用vue语法实现功能
var vm = new Vue({
el: "#app",
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>
-
参数分析:
-
el:元素的挂载位置(值可以是CSS选择器、DOM元素。即:告诉vue把数据插入到哪里
-
data:模型数据(值是一个对象)。即:提供数据
-
-
插值表达式{{ }}用法
- 将数据填充到HTML标签里
- 插值表达支持基本的计算操作
-
Vue代码运行原理分析
- 概述编译过程的概念(Vue语法 -> 原生语法)
end~