01-02 VUE概述及基本使用

一、Vue概述

1. Vue：渐进式 javascript 框架
2. 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
3. 官网：https://cn.vuejs.org/v2/guide/
   or https://vuejs.bootcss.com/guide/
4. 优点：易用（熟悉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>

浏览器显示部分