一、Vue概述
- Vue:渐进式 javascript 框架
- 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
- 官网:https://cn.vuejs.org/v2/guide/
or https://vuejs.bootcss.com/guide/ - 优点:易用(熟悉HTML、CSS、js知识后,可快速上手)、灵活(库和框架之间自如伸缩)、高效(20kb运行大小)
二、Vue基本使用
1. 基本使用步骤:
a. 提供标签用于填充数据
b. 引入 vue.js 库文件
c. 使用 vue语法做功能
d. 把vue提供的数据填充到标签里面
2. HelloWorld 细节分析
1). 实例参数分析:
- el : 元素的挂载位置(关联),值可以是css或者dom
- data : 模型数据(值是一个对象)
2). 插值表达式用法:
- 将数据填充到HTML标签中,
- 插值表达式支持基本的运算 (加减拼凑···都可以
3). Vue代码运行原理分析
- 编译过程(Vue语法–>原生语法)vue框架来编译
代码部分
<div id="app">
<div>{{msg}}</div>
<div>{{1+2}}</div>
<div>{{msg+'----'+'123'}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app', //告诉vue,你要把这个数据填充到什么位置
//严格的id选择器
data: { //用于提供数据
msg:'hello vue'
}
}); //用于存储vue的实例
</script>