VUE的第一天

铺垫(自学)

需要预习时自己提前安装好

必安装:vue-devtools

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

安装过程

vscode-插件补充

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

代码提示插件-vscode中安装

1.Vue-为何学

目标

学习vue, 用更少的时间干更多的活

注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js

开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

市场欢迎度

现在很多项目都是用vue开发的

市场上90%工作都要求会vue, 会vue拿高薪, 甚至java或测试都要学点vue

2.Vue-是什么

概念

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

官网地址: https://cn.vuejs.org/ (作者: 尤雨溪

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

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

库 小而巧.只提供了特定的API,是属性和方法的集合

封装的属性或方法 (例jquery.js) 方法的集合,一般是个js文件

框架: 大而全,提供了一整套的问题解决方案,拥有自己的规则和元素, 比库强大的多 (例vue.js) 框架是拥有自己一套规则和语法(Framework)

3.Vue-如何学

目标 :了解Vue的学习方式和开发方式

学习方法

1. 熟练使用Vue语法, 陌生地方可以多敲几遍

2. 在课上例子, 练习, 案例, 作业, 项目中, 反复磨炼使用 多练, 多用, 多总结

3. 多练多查多总结（xmind 或 写博客），及时输出

总结: Vue是渐进式框架, 有自己的规则, 我们要记住语法, 特点和作用, 反复磨炼使用, 多总结

开发方式

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

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

  

优点:

1.使用模块化开发(export/import)

2.使用npm下包,集成更多的功能

3.使用webpack对项目（实时）打包,提高开发体验

4.脚手架-介绍

目标:webpack自己配置环境繁琐

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

概念

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

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

好处

• 开箱即用

• 0配置webpack

• babel支持(降级ES5)

• css, less,图片,字体图片支持

• 开发服务器支持(实时打包,快速高效)

5.脚手架-准备

目标

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

步骤

全局安装 @vue/cli模块包

结果 :终端里的命令, 例如Vue命令, 以后创建脚手架项目

# 1. 安装
# win
npm i @vue/cli -g
yarn global add @vue/cli

# mac
sudo npm i @vue/cli -g

# 2. 检测，能看到版本号即可
vue -V(大写的V)
vue --version
//总结: 如果出现版本号就安装成功, 否则失败

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

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

步骤

1. 创建项目 vue create vuecli-demo(项目名)

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

2.选择模板和包管理器, 等待脚手架项目创建完毕

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

3. cd进入项目下, 启动内置的webpack本地热更新开发服务器 –

注意  :  如何（在网页上浏览）这个项目 

执行 yarn serve       启动本地热更新开发服务器

4.启动成功

手架-目录分析

讲解

vuecil-demo # 项目目录

├── node_modules # 项目依赖的第三方包

├── public # 静态文件目录

├── favicon.ico# 浏览器小图标

└── index.html # 单页面的html文件(网页浏览的是它)浏览器入口网页

├── src # 业务文件夹 源代码 打包前的代码

├── assets # 静态资源

└── logo.png # vue的logo图片

├── components # 组件目录----------重要,一个组件就是一个vue文件

└── HelloWorld.vue # 欢迎页面vue代码文件

├── App.vue # 整个应用的根组件-----------vue页面主入口

└── main.js # 入口js文件----------------项目打包的主入口-vue初始化

├── .gitignore # git提交忽略配置

├── babel.config.js # babel配置

├── package.json # 依赖包列表

├── README.md # 项目说明

└── yarn.lock # 项目包版本锁定和缓存地址

主要文件及含义

node_modules – 第三方依赖包

public/index.html – 浏览器运行的网页

src/main.js – webpack打包的入口文件

src/App.vue – Vue入口页面

package.json – 依赖包列表文件和自定义命令

node_modules - 都是下载的包

public/index.html - 浏览器运行的网页

src/App.vue - Vue页面入口

src/main.js - webpack打包的入口

package.json - 项目描述信息

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

main.js - 项目打包入口 ------------- Vue初始化

App.vue - -------------------------------Vue页面入口

index.html ------------------------------ 浏览器运行的文件

App.vue => main.js => index.html

9.脚手架-自定义配置

目标 : 脚手架内置的webpack, 如何修改配置

vue.config.js  :  脚手架配置文件

步骤

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

/* 覆盖webpack的配置 */
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000
}
}

10.脚手架-eslint了解

概念:

1.脚手架内置代码检查工具

2.eslint是代码检查工具，违反规定就报错

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

解决

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

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

11.脚手架-单vue文件

目标 : 掌握vue文件, 使用规则和特点

讲解

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

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

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

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

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
<div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>作用域
</style>

1. 单vue文件的好处？ 独立作用域，不再担心变量重名问题
2. 单vue文件使用注意事项？ emplate里只能有一个根标签
3. 单vue文件里标签和样式最后怎么显示到页面? webpack打包后, 插入到index.html显示

12.阶段小结-脚手架环境

1. @vue/cli是什么?

   答 : 全局模块包, 安装后得到Vue命令

2. 如何创建脚手架项目?

   答 : vue create 项目名, 得到一套标准文件夹+文件+webpack环境

3. 脚手架项目如何启动?

   答 : yarn server启动, 内置了webpack-dev-server, 得到一个地址和端口浏览器webpack打包后网页

4. 脚手架项目好处?

   答 : 开箱即用, 配置好的一套环境, 快速开发自己项目

5. 脚手架项目入口有哪些?

   答 : main.js - --------webpack打包入口

   App.vue - ------------Vue页面入口

   index.html - ---------网页入口

6. 单Vue文件的好处?

   1..独立作用域,作用域互不影响

           2.style配合scoped, 样式针对当前页面标签生效, 互不影响

13.Vue语法-插值表达式

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

语法: {{ 表达式 }} 双大括号，可以把Vue变量直接显示在标签内

注意:插值只能用在双标签

表达式：由运算符连接变量或者直接量构成的结构(凡是有结果的东西都是表达式)

例如：             1. 变量 或 常量        

                        2. 对象.属性名             

                        3. 算术运算 或 三元运算             

                        4. 函数的调用

                        注意: 表达式不是语句

<template>
<div>
//声明一个被vue控制的DOM区域 --------->view视图
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
</div>
</template>

<script>
export default {
//msg和obj是vue数据变量
//要在js中data函数里声明, 返回一个数据对象
data() { // 格式固定, 定义vue数据之处
return { // key相当于变量名
msg: "hello, vue",
obj: {
name: "小vue",
age: 5
}
}
}
}
//Vue中变量声明在哪里？ : data函数内, return的对象, 对象内的key就是变量名
//1. 什么是插值表达式?  : 双大括号{{ 数据变量 }}, 可以把vue数据变量直接 显示在双标签内
    
     
         
</script>

14.Vue基础-MVVM设计模式

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

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

M： model数据模型 (data里定义) ---------------------页面渲染时依赖的事件源

V： view视图 （页面标签）---------------------------- 当前页面所渲染的DOM结构

VM： ViewModel视图模型 (vue.js源码) --------------VUE实例 MVVM的核心

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

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

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

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

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

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

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

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

  <template>
    <div id="yyds">
      <a v-bind:href="url">百度一下</a>
      <a :href="url">百度一下</a>
      <img :src="imgUrl" alt="" />
      <!-- <a href="url">百度一下</a> -->
    </div>
  </template>
  
  <script>
  export default {
    // data中声明的是需要在模板中用到的变量
    data() {
      return {
        url: "https://www.baidu.com",
        imgUrl: "https://cn.vuejs.org/images/logo.svg",
      };
    },
  };
  </script>

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

• 语法 提前在method中声明一个函数
• v-on:事件名="methods中的函数"
• v-on:事件名="methods中的函数(实参)"
• v-on:事件名="要执行的少量代码"
• 简写: @事件名="methods中的函数"

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

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

有参数, 手动传入 $event 指代事件对象

18.Vue指令-v-on事件修饰符

事件修饰符 - 给事件带来更强大的功能

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

修饰符列表

1.stop    - 阻止事件冒泡

2.prevent - 阻止默认行为

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

概念 : 给键盘事件, 添加修饰符, 增强能力

语法:

@keyup.enter - 监测回车按键

@keyup.esc    - 监测返回按键

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

作用 : v-model, 把表单值和Vue变量双向绑定

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

双向数据绑定

变量变化 ------> 视图自动同步

视图变化 ------> 变量自动同步

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

v-model：
把元素的value属性 与 Vue数据变量 双向关联
数据 <-> 视图
场景：收集表单元素的值

v-model用在下拉列表上：
1. v-model写在select上
2.关联的值option的value

v-model用在单选框上：
1. 不需要name属性
2.需要手动的给单选框添加value属性（因为它默认没有value属性）

v-model用在复选框上：(重点)
1. 决定是否勾选：v-model绑定的变量是布尔类型，此时v-model关联的是复选框的checked属性

2. 多选：
1. v-model绑定的变量是数组类型 -> 此时v-model关联的是复选框的value属性
2.需要手动的给复选框添加value属性（因为它默认没有value属性）

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

语法: v-model.修饰符="Vue数据变量"

.number  尝试以parseFloat转成数字类型

.trim        去除首尾空白字符

.lazy        在change时触发而非input时触发

23.Vue指令-v-html

1.v-text="vue数据变量"                覆盖元素内默认

2.v-html="vue数据变量                 

3.{{}}                                           开发最常用 插值表达式   Mustache

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

目标:控制标签显示或隐藏

语法:

1.v-show="vue变量"     v-show 用的display:none隐藏 (频繁切换使用)

2.v-if="vue变量"           v-if 直接从DOM树上移除

29.Vue指令-v-for

目标 : v-for, 用数据循环生成标签

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 item in items 形式的特殊语法，其中：
⚫ items 是待循环的数组
⚫ item 是被循环的每一项

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

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