Vue学习第一天

KKfans
97 阅读6分钟

1.Vue-为何学

问题

  1. 我们为什么学习Vue？
    1. 开发更快速，更高效
    2. 企业开发都在使用
    3. 前端工程师必备技能，高薪

2.Vue-是什么

  1. Vue是什么？
    1. Vue是一个JavaScript渐进式框架
  2. 什么是渐进式？
    1. 渐进式就是按需逐渐集成功能
  3. 什么是库和框架？
    1. 库是方法的集合，而框架是一套拥有自己规则的语法

3.Vue-如何学

  1. 我们在哪里书写Vue的代码？
    1. 在工程化环境下用Vue开发项目
  2. 我们如何才能学好Vue？
    1. 多练多用多总结

4.脚手架-介绍

  1. 用Vue开发项目，需要自己配置webpack？
    1. Vue官方提供了脚手架, 一套标准的文件夹+文件结构+webpack配置，快速搭建项目基本环境
  2. 使用脚手架的好处是什么？
    1. 零配置，开箱即用，基于它快速搭建项目基本开发环境

5.脚手架-准备

  1. 如何安装全局包？
    1. yarn global add 包名
    2. 或 npm i -g 包名
  2. 我们会得到什么？
    1. 终端里命令, 例如Vue命令, 以后创建脚手架项目

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

  1. 如何创建一个开箱即用的脚手架项目？
    1. vue create 项目名
  2. 如何在网页上浏览这个项目？
    1. yarn serve 启动本地热更新开发服务器

7.脚手架-目录分析

  1. 脚手架里主要文件和作用？
    1. node_modules - 都是下载的包
    2. public/index.html - 浏览器运行的网页
    3. src/main.js - webpack打包的入口
    4. src/App.vue - Vue页面入口
    5. package.json - 项目配置信息

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

  1. main.js和App.vue以及index.html作用和关系？
    1. main.js - 项目打包入口 - Vue初始化
    2. App.vue - Vue页面入口
    3. index.html - 浏览器运行的文件
    4. App.vue => main.js => index.html

9.脚手架-自定义配置

  1. 脚手架项目webpack配置文件是什么？
    1. 项目根目录下的vue.config.js配置文件

10.脚手架-eslint了解

  1. eslint是什么？
    1. eslint是代码检查工具，违反规定就报错
  2. 如何暂时关闭？
    1. 在vue.config.js中设置lintOnSave为false重启服务器即可

11.脚手架-单vue文件

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

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

  1. 欢迎界面是哪些？如何清除？
    1. assets下图片和components下的文件,删除
    2. App.vue文件里代码只留个框即可

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

  1. @vue/cli是什么?

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

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

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

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

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

  4. 脚手架项目好处?

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

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

    1. main.js - webpack打包入口
    2. App.vue - Vue页面入口
    3. index.html - 网页入口

  6. 单Vue文件的好处?

    1. 独立作用域,作用域互不影响
    2. style配合scoped, 样式针对当前页面标签生效, 互不影响

14.Vue语法-插值表达式

  1. 什么是插值表达式？
    1. 双大括号，可以把Vue变量直接显示在标签内
  2. Vue中变量声明在哪里？
    1. data函数内, return的对象, 对象内的key就是变量名

15.Vue基础-MVVM设计模式

  1. 什么是设计模式？
    1. 设计模式是对代码分层，引入一种架构的概念
  2. MVVM是什么？
    1. MVVM（模型，视图，视图模型双向关联的一种设计模式）
  3. MVVM好处？
    1. 减少DOM操作，提高开发效率

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

  1. 如何给dom标签的属性设置Vue变量？
    1. :属性名="Vue变量"

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

  1. 如何给dom标签绑定事件？
    1. @事件名="methods里的函数名"
  2. 如何给事件传值？
    1. @事件名="methods里的函数名(实参)"

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

  1. Vue事件处理函数，如何拿到事件对象？
    1. 无实参，直接用第一个形参接收
    2. 有实参，手动传入$event

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

  1. Vue有哪些主要修饰符，都有什么功能？
    1. .stop - 阻止事件冒泡
    2. .prevent - 阻止默认行为

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

  1. 按键修饰符如何使用？
    1. @键盘事件.按键修饰符="methods里的函数名"
  2. 有哪些主要按键修饰符？
    1. .enter - 匹配回车键
    2. .esc - 匹配取消键

23.Vue指令-v-model双向绑定1问题

  1. v-model用在哪里？
    1. 暂时只能用在表单标签上
  2. v-model有什么作用？
    1. 把Vue的数据变量和表单的value属性双向绑定在一起

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

  1. 下拉菜单v-model写在哪里？
    1. v-model写在select上，value写在option上, Vue变量关联value属性的值
  2. v-model用在复选框时，需要注意什么？
    1. v-model的vue变量是：
      1. 非数组 - 关联的是checked属性
      2. 数组 - 关联的是value属性
  3. Vue变量初始值会不会影响表单的默认状态？
    1. 会影响，因为双向数据绑定 - 互相影响

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

  1. Vue针对v-model有哪些修饰符来提高我们编程效率？
    1. .number - 转成数值类型后再赋予给Vue数据变量
    2. .trim - 去除两边空格后把值赋予给Vue数据变量
    3. .lazy - 等表单失去焦点，才把值赋予给Vue数据变量

26.Vue指令-v-html

  1. v-html有什么作用？
    1. 可以设置标签显示的内容
  2. 和插值表达式区别是什么？
    1. 插值表达式把值当成普通字符串显示
    2. v-html把值当成标签进行解析显示

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

  1. vue如何控制标签显示/隐藏？
    1. v-show或v-if，给变量赋予true/false，显示/隐藏
  2. 区别是什么？
    1. v-show是用css方式显示/隐藏标签
    2. v-if直接从DOM树上添加/移除
    3. v-if可以配合v-else

28.Vue指令-v-for

  1. v-for如何循环列表？
    1. 先准备目标数据结构
    2. 可以遍历数组/对象/固定数字/字符串格
    3. 谁想循环就把v-for写谁身上
  2. v-for注意事项？
    1. 值变量和索引变量不能用到v-for范围以外
    2. v-for="(值变量, 索引变量) in Vue变量" - 一定要注意in两边必须有空
avatar
文章
阅读
粉丝