Vue详解+实战分析

文章目录

        • 备注
  • 一、Vue简介
        • 简介
        • MVVM--双向数据绑定模式
        • 其他MVVM实践者
        • 为什么使用Vue.js
        • 两大核心要素
  • 二、Vue开发
        • 引入Vue
        • 快速体验
          • 注释
    • 1.插值表达式 { {}}
          • 注释
  • 2.分支 v-if
          • 注释
  • 3.分支 v-show
          • 注释
  • 4.循环 v-for
        • 遍历数组
          • 注释
        • 遍历对象
          • 注释
        • 遍历对象数组
          • 注释
  • 5.Vue属性绑定
          • 注释
  • 6.Vue事件绑定
        • v-on
          • 注释
          • 注释
        • 事件修饰符
          • 官方定义
          • 注释
  • 7.计算属性
          • 注释
  • 8.Vue的组件化
          • 什么是组件化
    • 1.组件的全局注册
          • 注释
    • 2.组件本地注册
          • 注释
    • 3.组件的生命周期
          • 理解
          • 注释
  • 9.使用Vue-Cli搭建Vue项目
          • 什么是vue-cli
          • node.js安装
          • 在node.js中安装vue-cli
          • 使用vue-cli下载项目骨架搭建我们的项目
          • 创建项目目录并打开
          • 使用webpack骨架快速创建项目目录
  • 10.webpack项目结构
        • 整体结构
        • src目录
          • components:
          • router目录
          • App.vue
          • main.js
  • 十一、Vue组件间的参数传递
    • 1.如何在父组件App.vue中使用子组件
    • 2.父子组件之间如何传递参数
    • 3.子传父
          • 注释
  • 十二、路由
    • 1.使用场景
    • 2.安装路由模块
    • 3.编写项目
          • 注释
    • 4.路由的参数传递
          • 设参
          • 传参
          • 接参
    • 5.程序式路由的实现
  • 十三、Axios发送异步请求
    • 1.安装Axios
    • 2.使用Axios
  • 十四、Vue实战项目
    • 1.新建项目
    • 2.Vue整合Element UI
  • 十五、Vuex的应用

备注

网上的书籍以及官方文档已经把资料总结的很详细了,这里我不再罗列成体系的理论知识,而是重点记录如何将Vue的各个功能应用到我们所写的的代码上,以及重难点、易错部分的分析。

一、Vue简介

简介

渐进式js框架,只关心视图层,就是MVC中的View视图层,使用Vue需要先熟练掌握HTML/CSS/JavaScript,兼容性强,生态好,性能好

MVVM–双向数据绑定模式

Model:模型层,这里表示JavaScript对象

View:视图层,这里表示DOM,即HTML操作的元素

ViewModel:连接视图和数据的中间件,

Model模型层通过ViewModel这个中间来表现View视图,Vue.js就是ViewModel的实践者

Vue详解+实战分析_第1张图片
通过ViewModel,View可以监听Model,Model绑定到了View上,这样DOM操作的数据可以实时的修改到Model上,
在这里插入图片描述

实时的修改很重要,否则就要通过页面刷新才能看到页面变化,这样浪费资源;js也能实时修改,但是Vue更高效

在上图的文本域中,左侧的框里实时显示右侧的状态(数据绑定),左侧的数据修改又实时影响了右侧的状态(监听),这就是双向绑定

在MVVM架构中,不允许数据和视图直接通信,只能通过ViewModel通信

其他MVVM实践者

AnaularJS ReactJS 微信小程序

为什么使用Vue.js

轻量只有20多kb,适合移动端,易学习,取长补短且有独特功能(计算属性),开源活跃度高,

两大核心要素

数据驱动、
Vue详解+实战分析_第2张图片

组件化

1.页面上的每个独立区域视为一个组件

2.每个组件对应一个工程目录,组件所需各种资源就在这个工程目录下维护

3.页面只是提供组件的容器,组件可以自由嵌套、复用,形成完整页面

二、Vue开发

引入Vue

通过CDN技术,在线引入,找到对应的版本,复制链接地址,引入

你可能感兴趣的:(前端,vue,vue.js,node.js)