一、Vue概述
- Vue：渐进式 javascript 框架
- 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
- 官网：cn.vuejs.org/v2/guide/
or 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>
/*
VUE基本使用步骤
a. 提供标签用于填充数据
b. 引入vue.js库文件
c.使用vue语法做功能
d. 把vue提供的数据填充到标签里面
*/
<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>
