Vue基础-01

本文将vue基础分为七个小的章节来介绍vue

Day-01

在正式进入vue框架学习之前 需要先安装如下几个工具 方便开发与调试

必安装:vue-devtools

谷歌浏览器的插件 - 学习, 调试vue必备之利器 - 官方提供的呦

vscode-插件补充

vue文件代码高亮插件-vscode中安装

 

代码提示插件-vscode中安装

 

1.Vue-是什么

概念

==渐进式==javacript==框架==, 一套拥有自己规则的语法

官网地址: Vue.js (作者: 尤雨溪)

渐进式

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

 Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助

库和框架

补充概念:

库: 封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

2.Vue-如何学

 

开发方式

传统开发模式：基于html/css/js文件开发Vue

 

工程化(脚手架)开发方式：在webpack环境中开发Vue，这是最推荐, 企业常用的方式  

3.脚手架-介绍

目标

webpack自己配置环境繁琐

官方提供脚手架, 快速搭建项目基础结构

概念

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

在代码里的体现, 就是一套固定标准的, 文件夹+文件+webpack配置

好处

• 开箱即用

• 0配置webpack

• babel支持

• css, less支持

• 开发服务器支持

4.脚手架-准备

目标

安装@vue/cli全局模块包, 得到Vue命令, 以后创建Vue脚手架项目

步骤

1. 全局安装@vue/cli模块包

2. yarn global add @vue/cli
   # OR
   npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c

• 停止重新来

• 换一个网继续重来

1. 查看Vue命令版本

2. vue -V

5.脚手架-创建项目-启动服务

目标

用Vue命令, 创建一个脚手架项目, 并启动webpack开发服务器

步骤

1. 创建项目

   ==注意: 项目名不能带大写字母, 中文和特殊符号==

2. # vue和create是命令, vuecli-demo是自己的文件夹名
   vue create vuecli-demo

选择模板

==可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来==

选择包管理器

 

等待下载脚手架项目, 需要的依赖包

 

1. 终端切换脚手架项目下, 启动内置的==webpack热更新开发服务器==

cd vuecil-demo
​
yarn serve
# 或 npm run serve

只要看到绿色的 - 啊. 你成功了

浏览器中 - 输入上述地址

 

6.脚手架-目录分析

目标

了解目录作用, 基于它开发自己项目

讲解

 

主要文件及含义

 

7.脚手架-代码和结构分析

 

讲解

如图所示, 一切从main.js开始, 到index.html结束

 

8.脚手架-自定义配置

步骤

配置文件叫vue.config.js

1. src并列处, 新建vue.config.js

 

9.脚手架-eslint了解

解释

eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格

1. 例子: 先在main.js 随便声明个变量, 但是不要使用

2.运行后观察发现, 终端和页面都报错了

==这样的错误, 证明eslint发现你代码不严谨==

 

解决

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

 

10.脚手架-单vue文件

 

1. template里只能有一个根标签

2. vue文件-独立模块-作用域互不影响

3. style配合scoped属性, 保证样式只针对当前template内标签生效

4. vue文件配合webpack, 把他们打包起来插入到index.html

 

11.脚手架-清理欢迎界面

 

步骤

1. src/App.vue默认有很多内容, 可以全部删除留下框

2.assets 和 components 文件夹下的一切删除掉 (不要logo和HelloWorld页面)  

 

 

12.Vue语法-插值表达式

又叫: 声明式渲染/文本插值/大胡子语法

语法: {{ 表达式 }}

13.Vue基础-MVVM设计模式

 

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)

• MVVM，一种软件架构模式，决定了写代码的思想和层次

  • M： model数据模型 (data里定义)

  • V： view视图 （页面标签）

  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V （修改视图） -> M（数据自动同步）

  • M（修改数据） -> V （视图自动同步）

 

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

 

 

14.Vue指令-v-bind动态属性

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

• 语法：v-bind:属性名="vue变量"

• 简写：:属性名="vue变量"

15.Vue指令-v-on事件绑定

• 语法

  • v-on:事件名="methods中的函数"

  • v-on:事件名="methods中的函数(实参)"

• 简写: @事件名="methods中的函数"

16.Vue指令-v-on事件对象

语法:

• 无传参, 通过形参直接接收

• 传参, 通过$event指代事件对象传给事件处理函数

17.Vue指令-v-on修饰符

语法:

• @事件名.修饰符="methods里函数"

  • .stop - 阻止事件冒泡

  • .prevent - 阻止默认行为

18.Vue指令-v-on按键修饰符

语法:

• @keyup.enter - 监测回车按键

• @keyup.esc - 监测返回按键

19.Vue指令-v-model双向绑定1

 

• 语法: v-model="vue数据变量"

• 双向数据绑定

  • 数据变化 -> 视图自动同步

  • 视图变化 -> 数据自动同步

• 最后演示: 用户名绑定 - Vue内部是MVVM设计模式

20.Vue指令-v-model双向绑定2

 

• 在复选框使用(重点: 有区别)

• 在单选框使用

• 在文本域使用

 

21.Vue指令-v-model修饰符

v-model.修饰符="vue数据变量"

• .number 以parseFloat转成数字类型

• .trim 去除首尾空白字符

• .lazy 在change时触发而非inupt时

22.Vue指令-v-html

• 语法:

  • v-html="vue数据变量"

• 注意: 会覆盖插值表达式

23.Vue指令-v-show和v-if

• 语法:

  • v-show="vue变量"

  • v-if="vue变量"

• 原理

  • v-show 用的display:none隐藏 (频繁切换使用)

  • v-if 直接从DOM树上移除

• 高级

  • v-else使用

24.Vue指令-v-for

• 语法

  • v-for="(值变量, 索引变量) in 目标结构"

  • v-for="值变量 in 目标结构"

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串

• 注意:

  v-for的临时变量名不能用到v-for范围外

  同级标签的key值不能重复

 

 

总结: 

 

1. Vue的最大优势是什么?

简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离,

Vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单.

相比传统网页, Vue是单页面可以只刷新某一部分

2. Vue和jQuery区别是什么?

jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签

Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视频关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能

3. MVVM和MVC区别是什么?

MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联

MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定

4. Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

5. Vue2.x兼容IE哪个版本以上

不支持ie8及以下，部分兼容ie9 ，完全兼容10以上， 因为Vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。

6. 对Vue渐进式的理解

渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用

7. v-show和v-if的区别

v-show和v-if的区别? 分别说明其使用场景?

v-show 和v-if都是true的时候显示，false的时候隐藏

但是：false的情况下，

v-show是采用的display:none

v-if采用惰性加载

如果需要频繁切换显示隐藏需要使用v-show

8. 说出至少4个Vue指令及作用

v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

v-show 显示内容

v-if 显示与隐藏

v-else 必须和v-if连用 不能单独使用 否则报错

v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号

v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

v-text 解析文本

v-html 解析html标签

9. 为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.