前端框架Vue-Vue核心

目录

第1章 Vue核心

1.1 Vue简介

1.1.2 Vue的特点

1.1.3 与其它 JS 框架的关联

1.1.4 学习Vue之前要掌握的JavaScript基础知识

1.1.5 Vue官网

1.1.6 Vue周边库

1.3 模块语法

1.3.1 模板的理解

1.3.2 插值语法

1.3.3 指令语法

1.4 数据绑定

1.4.1. 单向数据绑定

1.4.2. 双向数据绑定

1.4.3 el与data的两种写法

1.el

2.data

1.5 Vue中的MVVM模型

---

第1章 Vue核心

1.1 Vue简介

Vue是什么？

        一套用于动态构建用户界面的渐进式JavaScript框架

        作者: 尤雨溪

        Vue可以自底向上的应用

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各式各样的Vue插件

1.1.2 Vue的特点

1. 采用组件化模式，提高代码复用率、且让代码更好维护
2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
3. 遵循 MVVM 模式
4. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
5. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.3 与其它 JS 框架的关联

1. 借鉴 Angular 的模板和数据绑定技术

2. 借鉴 React 的组件化和虚拟 DOM 技术

1.1.4 学习Vue之前要掌握的JavaScript基础知识

ES6语法规范、ES6模块化、包管理器、原型、原型链、数组常用方法、axious、promise

1.1.5 Vue官网

        英文官网: Vue.js - The Progressive JavaScript Framework | Vue.js
        中文官网: Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.1.6 Vue周边库

1. vue-cli: vue 脚手架

2. vue-resource

3. axios

4. vue-router: 路由

5. vuex: 状态管理

6. element-ui: 基于 vue 的 UI 组件库(PC 端)

   ……

1.3 模块语法

1.插值语法

2.指令语法

1.3.1 模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）

2. 指令（以 v-开头）

1.3.2 插值语法

1. 功能: 用于解析标签体内容
2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

1.3.3 指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件

2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析

3. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

Vue实例和容器是：一对一的关系

1.4 数据绑定

1.4.1. 单向数据绑定

1. 语法：v-bind:href ="xxx" 或简写为 :href

2. 特点：数据只能从 data 流向页面

1.4.2. 双向数据绑定

1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx"

2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

1.4.3 el与data的两种写法

1.el

2.data

2.1 对象式

2.2 函数式

使用组件的时候,必须使用函数式

1.5 Vue中的MVVM模型

M：模型(Model) ：对应 data 中的数据

V：视图(View) ：模板

VM：视图模型(ViewModel) ： Vue 实例对象