Vue基本概念与指令

施锋

2023-12-01

为什么要学vue

开发快速,效率更高
企业开发都在使用,使用范围广大
前端工程师必会的技能

vue是什么

vue是一个渐进式的JavaScript框架
渐进式: 逐渐增强,通过逐步学习,集成更多的功能

库和框架

库: 一些方法和属性的集合,每次调用方法,实现一个特定的功能

例如: moment  axios

框架: 一套完整的项目解决方案,框架实现了大部分功能,需要安照框架规则写代码

 例如: vue  react  angular

vue是MVVM的框架

MVVM：一种软件架构模式
- M：model数据模型(ajax获取到的数据)
- V : view视图（页面）
- VM：ViewModel 视图模型
MVVM通过数据双向绑定让数据自动地双向同步,不在需要操作DOM
- V : 修改视图 -> M 数据自动同步
- M : 修改数据 -> V 视图自动同步

vue组件化思想

组件化: 一个组件会包含(HTML+CSS+js),完整的页面可以拆分多个组件

组件化的优点: 容易维护, 便于复用

脚手架的基本使用

全局安装命令

npm install -g @vue/cli
yarn global add @vue/cli

查看版本号
```
#二选一
vue --version
vue --V
```

初始化一个项目

vue create vue-coed//vue-coed名字没有固定的
# 项目名不能有大写,中文和特殊符号

选择模板和包管理器

#选择vue2
Default ([Vue2] babel, eslint)

项目命令
```
#二选一
Use Yarn
Use npm
```
进入目录
```
....路径\cd 项目名
```
启动项目
```
yarn serve 或 npm run serve
```
打包项目
```
yarn build 或 npm run build
```

覆盖webpack配置

# 在vue.consfig.js文件夹里面添加,要添加逗号
,devServer: {
    port:3000,  // 设置端口号,
    open:true,  // 自动打开浏览器
    host:'127.0.0.1' / 'localhost'  // 设置IP地址
    #配置号新的端口号要重新启动项目

vue项目各个文件作用

vue-code	项目名称(不固定)
node_modules	项目依赖的第三方包
public	静态文件目录
favicon.ico	浏览器小图标
index.html	单页面html文件(网页浏览的)
src	业务文件夹
assets	静态资源
logo.png	vue的logo
components	组件目录
App.vue	整个应用的根组件
main.js	vue页面入口
.gttignore	git提交的忽略配置
babel.config.js	babel配置,兼容低版本,降级
package.json	依赖包列表文件
README.md	项目说明
yarn.lock	项目包版本和缓存地址

.vue 文件是什么文件

单文件组件: 一个 .vue文件就是一个组件
一个单文件组件由三部分组成
- template: 结构(HTML,且只能有一个根元素)
- script: js逻辑(js部分)
- style: 样式(CSS样式)
让组件支持less
- style标签, lang=“less”,开启less功能
- 下包: yarn add less less-loager -D

vue如何提供数据 (插值表达式)

通过data属性提供数据,data必须是一个函数
data函数需要一个返回一个对象,这个对象就代表vue提供的数据

在使用插值表达式,在模板中渲染数据

<template>
  <div>
    <!-- 插值表达式 -->
    <p>{{msg}}</p>
  </div>
</template>
<script>
export default {
data(){
  return{
    msg:'你好欢迎来到武汉	',
    }
  }
}
</script>
<style>
</style>

注意点:

支持基本语法,支持三元运算符
使用数据在data中必须存在
能使用表达式,不能使用语法例如: if for
不能在标签属性中使用{{}}插值

vue指令

特殊的html标签属性, 特点: v - 开头

每个 v - 开头的指令都有着自己的独立功能,vue解析时,根据不同的指令提供不同的功能

vue指令-v-bind

作用: 动态的设置html的标签属性

语法: v-bind: 属性名=“值”

简写: :属性名=“值”

//完整写法
<a v-bind:href="url"></a>
//简写
<a :href="url"></a>

vue指令-v-on

作用: 注册事件

语法:

v-on:事件名=“要执行的少量代码”
v-on:事件名=“methods中的函数名”
v-on:事件名=“methods中的函数名(参数)”
简写: v-on 可以简写成 @

注意: 事件处理函数在methods中提供

<button v-on:click="money = money + 10">加十</button>
<button @click="addMony">加一</button>
<button @click="sellh(20)">加二十</button>
methods:{
    addMony(){
        this.money++
    } ,
        sellh(num){
           this.money += num 
        }    
}

vue中获取事件对象

没有传参,通过形参接收e
传参了,通过$event指代事件对象e

<template>
  <div>
    <a @click="fn" href="https://www.baidu.com">去百度</a><br>
    <a @click="fn2(100, $event)" href="https://www.baidu.com">去百度</a>
  </div>
</template>
methods: {
    fn(e) {
      // 获取事件对象
      // 无传参: 默认有一个参数 e
      console.log('做一些事情, 不要去百度了')
      e.preventDefault()
    },
    fn2(num, e) {
      // 有传参: e 就会被顶掉, 没有 e 了, 需要手动传入 $event 实参
      console.log(num)
      e.preventDefault()
    }

事件修饰符

vue提供事件修饰符,可以快速阻止默认行为或阻止冒泡

.prevent 阻止默认行为
.stop 阻止冒泡
修饰符是可以串联的, .prevent.stop 表示既阻止默认行为也阻止冒泡

按键修饰符

@keyup.enter 监听回车键
keyup.esc 监听返回键

vue指令-v-show和v-if

作用: 控制盒子显示隐藏

v-show

语法: v-show=“布尔值”(true显示, false隐藏)

原理: 实际就是控制元素css样式: “display: none”
v-if

语法: v-if=“布尔值”(true显示, false隐藏)

原理: 实际就是在动态的创建或删除元素节点

应用场景

如果是频繁的切换显示隐藏, 用 v-show
- (v-show, 只是控制css样式，而v-if, 频繁切换会大量的创建和删除元素, 消耗性能)
如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
- (v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销)
如果放在自定义组件上,v-if会控制组件的创建和销毁,让组件重新创建或销毁,执行created, destroyed等钩子函数,但v-shoe不会

vue指令-v-else和v-else-if

<template>
  <div>
    <h1 v-if='isShow'>123</h1>
    <h1 v-else>456</h1>
    <br>
    <h1 v-if='age >= 60'>广场舞</h1>
    <h1 v-else-if='age >= 50'>打麻将</h1>
    <h1 v-else-if='age >= 40'>蹦迪</h1>
    <h1 v-else-if='age >= 18'>唱跳rap</h1>
  </div>
</template>
<script>
export default {
data(){
  return{
    isShow: true,
    age:58
  }
}
}

vue指令-v-model

作用: 给表单元素使用,双向数据绑定

双向数据绑定

数据变化, 视图会跟着变
视图变化, 数据要跟着边

语法: v-model=“值”

vue指令-v-model处理其他表单元素

textarea,

select,

在 select 上使用时, 将 option 的 value 属性设置在 select 绑定的数据上了, 可以获取到用户选择的选项

注意事项: 使用 v-model 的时候, 需要给每一个 option 设置 value 属性, v-model 其实就是将用户选择的 option 的value 绑定给了变量

checkbox

在 checkbox 上使用时, 分两种情况

绑定的数据是数组类型, 将 value 属性的值加到数组中
绑定的数据是非数组类型 (其他类型全部都会隐式转换成 boolean 类型), 将 checked 设置给变量 isAll

vue指令-v-model修饰符

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

.number 转数字，以parseFloat转成数字类型
.trim 去除首尾空白字符

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

change 触发条件: 当用户修改内容并失去焦点才会触发
input 触发条件: 当用户修改内容会触发

vue指令-v-text和v-html

作用：更新元素的innerText/innerHTML

语法:

v-text=“值”
v-html=“值”

区别：

v-text 不解析标签
v-html 解析标签

vue指令-v-for

作用: 可以遍历数组或对象,用于渲染结构

遍历数组语法:

v-for="item in数组名"   item:每一项
v-for="(item.index) in 数组名"  index下标

遍历对象语法:

v-for="(value, key) in 对象名"

遍历数字:

作用：遍历具体的次数 item从1开始 index下标从0开始的

v-for="item in 数字"

vue的就地复用策略

就地复用:vue会尽可能的就地同级别,同位置对比虚拟dom,复用旧的dom结构,进行差异更新

就地复用好处:可以复用旧的dom结构,更新更高效

虚拟dom: 本质就是保存一个个节点信息, 属性和内容的描述真实dom的 JS 对象

diff算法

策略1:
- 先同层级根元素比较,如果根元素变化,那就不考虑复用,整个dom树删掉重建
- 先同层级根元素比较,如果根元素不变,对比属性的变化更新,考虑往下递归复用
策略2:
- 对比同级兄弟元素时,默认按照下标进行对比复用
- 对比同级兄弟元素时,如有指定的key,就按照相同key元素进行对比

v-for的key的说明

设置key 和不设置key 的区别
- 不设置key, 默认同级兄弟元素按照下标进行比较(不跳过新增的)
- 设置了key,按照相同的key新旧元素比较(跳过新增)
key值得要求是
- 字符串或数字,要保证唯一性
- 有 id 用 id ,有唯一值用唯一值,没有再用索引
key的作用
- 提高虚拟BOM的对比复用性能

动态设置class和style

用v-bind动态设置标签的class类名

语法: :class=“数组/对象”

对象: 如果键值对的值为true,那么就有这个类,否则没有这个类
数组: 数组中所有的类,都会添加到盒子上
class不会影响到原来的class属性

// :class="{ 类名: 布尔值 }" 动态判断是否要应用对应的类名
// :class="['类名1', '类名2' ...]" 同时添加多个类名
<p :class="{ yellow: age >= 18 }">我是一个开心的 p</p>
 <p :class="arr">我是一个开心的 p</p>
data() {
    return {
      age: 18,  //判断大于18变黄
      arr: ['yellow', 'red', 'green'],
    }
  }
<style>
.yellow {
  color: yellow
}
</style>

用v-bind动态设置标签的style行内样式

语法: :style=“对象/数组”

:style="{ css样式名: css样式值 }" 添加 css 样式
<ul>
<li :style="{ fontSize: size + 'px' }">我是一个可爱的 li</li> 
</ul>\
 data() {
    return {
      size: 36
    }
  }