Vue基础(笔记)

一.Vue基础

1. 概念

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

   渐进式步骤:声明式渲染→组件系统→客户端路由→大规模状态管理→构建工具

   框架: 拥有自己的规则和元素, 比库强大

   库: 封装属性和方法

2. 作用

   提升开发效率

3. MVVM设计模式

   设计模式:一类问题的通用解决方案

   MVVM: 数据(模型)视口 视口模型

二. Vue-脚手架

1. vue/cli脚手架

   概念: Vue官方提供的一个全局模块板, 此包用于创建脚手架项目

   好处: 开箱即用,0配置webpack, 支持babel, css, less, 开发服务器支持

2. 搭建

   • 脚手架安装

     安装命令: 全局安装@vue/cli模块包

     ​ npm i - g @vue/cli

     检查是否安装成功, 命令: (-V是大写)

     ​ vue -V

     输出@vue/cli +版本号即为安装成功

   • 项目搭建

     搭建命令:

     vue create vuecli-demo

     ​ 注: vuecli-demo为项目名称, 项目名命名时不能有大写字母, 中文和特殊符号

     运行项目命令:(运行路径要在项目文件根目录)

     ​ npm run serve

   • 项目文件夹和文件含义

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sr57u5iY-1652105769980)(D:\md图片存放文件夹\文件夹和文件含义.jpg)]

   • 修改端口号, 配置vue.config.js文件

     在项目根目录创建vue.config.js文件, 配置端口号

     module.exports = {
     devServer: {
      port: 3000,
      open: true
     }
     }
     

     配置完成后要重启项目

     配置eslint检查, eslint是代码检查工具

     module.exports = {
     // ...其他配置
     lintOnSave: false, // 关闭elint检查
     }
     

   • 运行流程

   main.js→App.vue→index.html

三. Vue指令

• 插值表达式: 把表达式插入到标签内指定位置,

  语法: {{ 表达式}}

  表达式:

  变量

  对象属性

  三元运算符

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XyvMXk9O-1652105769981)(D:\md图片存放文件夹\插值表达式.jpg)]

  • v-bind:绑定标签属性设置Vue变量的值

    ​ 语法: v-bind:属性名=“vue变量”

    ​ 简写方式: :属性名=“vue变量”

• v-on和修饰符

  ​ 作用: 给标签绑定事件

  ​ 语法:

  ​ v-on:事件名=“执行的少量代码”

  ​ v-on:事件名=“methods中的函数名”

  ​ v-on:事件名=“methods中的函数名(实参)”

  ​ methods:是vue提供给开发者声明函数的对象

  ​ 简写形式: @事件名=“methods里的函数名(实参)”

  ​ v-on的修饰符

  事件修饰符的语法: @事件名.修饰符=“方法”

  .prevent修饰符: 阻止默认行为

  .stop修饰符是阻止事件冒泡的

  .once修饰符: 方法只使用一次

  按键修饰符

  .enter用户按下回车才会触发

  .esc用户按esc会触发

  按键&鼠标修饰符:keydown, mouse

• v-model和修饰符

  v-model作用: 表单内容到变量的双向绑定, 用来收集表单数据并返回,

  v-mode=“变量”, 变量需要声明, 声明在data方法的返回对象里

  v-model在checkbox里, 会绑定checked属性

  v-model和checkbox如何绑定多个选项, 把v-model的变量声明为数组就可以了

  v-model的修饰符

  语法: v-model.修饰符=“变量”

  v-model修饰符用法: v-model.修饰符=“变量”

  .number: 把数据转换为数字类型并赋值给变量

  .trim修饰符: 去掉字符串首位空格

  .lazy会等表单失去焦点, 才把值赋予给Vue数据变量

• v-text和v-html

  v-text, 语法v-text=“变量”, 它更新的是textContent属性

  v-html语法, v-html=“变量”, 它设置innerHTML属性

  优先级:v-html和v-text都会覆盖标签内的插值表达式

• v-show和v-if以及v-else

  v-show控制显示, 通过display: none控制显示

  语法: v-show=“变量或者表达式”, 如果变量或者表达式为true, 会显示标签, 否则隐藏

  v-if可以控制标签显示,

  语法: v-if=“变量或者表达式”

  v-if通过控制标签是否删除显示 , v-if有性能优势

  v-if可以和v-else搭配, 来条件控制显示

  v-show是不可以和v-else搭配使用

  v-if和v-else一定要是相邻元素

• v-for

  作用: 遍历所在标签的值, 目前配合插值表达式使用

  v-for的用法: v-for=“变量名 in 数据”

  数据包括:

  数组---- v-for"(item,index) in array"

  对象

  字符串— v-for=“str in string”, 那str就是每个字符

  数字— v-for=“num in 10”,那就是1到10

  注:v-for遍历的是它所在的标签

​ key(面试题)

作用: 提升列表渲染性能

key要求是: 唯一的标识, 通常不会变化

可以的作用: 在列表顺序变化的时候, 标记上一次渲染结果的元素, 避免错位对比, 结合虚拟DOM提升渲染性能

数组变化v-for有key和无key是如何更新DOM呢?

​ 无key, 就地更新

​ 有key, 按照key比较

key值要求是?

​ 唯一不重复的字符串或者数值

key应该怎么用?

​ 有id用id, 无id用索引

key的好处?

​ 可以配合虚拟DOM提高更新的性能

• 动态设置class

  class=“{类名: 布尔值}”, 可以设置多个类名, 类名之间用空格隔开

  作用: 动态设置class

• 动态设置style

  语法: :style=“{ 样式属性: 样式的值}”

  样式属性如果有-连字符, 可以用驼峰命名方式, 也可以加引号

  ‘font-size’:‘20px’

  fontSize: ‘20px’