一、 Vue介绍1、Vue 简介

（1）官网：

​ 英文官网

​ 中文官网

2、介绍与描述

  • Vue 是一套用来动态构建用户界面的渐进式JavaScript框架
    • 构建用户界面：把数据通过某种办法变成用户界面
    • 渐进式： Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 Vue 插件
    • 作者：尤雨溪

3、特点

  1. 采用组件化模式，提高代码复用率、且让代码更好维护

2.声明式编码，让编码人员无需之间操作DOM，提高开发效率

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

4、与其他 JS 框架的关联

  • 借鉴 angular 的 模板 和 数据绑定 技术
  • 借鉴 react 的 组件化 和 虚拟DOM 技术

5、 Vue 周边库

  • vue-cli：vue 脚手架
  • vue-resource(axios)：ajax 请求
  • vue-router：路由
  • vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
  • vue-lazyload：图片懒加载
  • vue-scroller：页面滑动相关
  • mint-ui：基于 vue 的 UI 组件库（移动端）
  • element-ui：基于 vue 的 UI 组件库（PC 端）

6、初识 Vue

（1）前置工作

  1. 给浏览器安装[Vue Devtools](安装 — Vue.js (vuejs.org))
  2. 标签引入 Vue 包
  3. （可选）阻止 vue 在启动时生成生产提示Vue.config.productionTip = false;
  4. favicon 需要将页签图标放在项目根路径，重新打开就有了（shfit+F5 强制刷新）

（2）初识Vue:

  1. 想让 Vue 工作，就必须创建一个 Vue实例 ，且要传入一个配置对象
  2. root 容器里的代码依然符合 html规范 ，只不过混入了一些特殊的 Vue语法
  3. root 容器里的代码被称为 Vue模板
  4. Vue 实例与容器是一一对应的
  5. 真实开发中只有一个 Vue实例 ，并且会配合着组件一起使用
  6. {{xxx}} 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性

​注意区分：js 表达式 和 js代码（语句）

​ a. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

​ ①a

​ ② a+b

​ ③demo(1)

​ ④x === y ? ‘a’ : ‘b’

​ b. js代码（语句）

​ ①if(){}

​ ② for(){}

​7.. 一旦 data 中的数据发生变化，那么模板中用到该数据的地方也会自动更新

        初始Vue                  
      
Hello,{{name.toUpperCase()}},{{address}}}
              Vue.config.productionTip = false; // 阻止启动vue在启动时生成生产提示      // 创建一个Vue实例       new Vue({        el:'#root' ,//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串        data:{//data用于指储存数据,数据供el所指定的容器使用，值我们暂时先写成一个对象          name:'DFshmily',          address:'China'        }        })

二、模板语法与数据绑定1、模板语法

Vue 模板语法包括两大类

  1. 插值语法

    功能：用于解析标签体内容 写法： {{xxx}} ，xxx 是 js 表达式，可以直接读取到 data 中的所有区域

  2. 指令语法

    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

    举例： 或简写为 ，xxx 同样要写 js 表达式，可以直接读取到 data 中的所有属性

    备注： Vue 中有很多的指令，且形式都是 v-xxx ，此处只是拿 v-bind 举例