Vue

构建用户界面的渐进式框架

一套前端框架，简化原生JavaScript 中的DOM操作

基于MVVM思想，实现数据的双向绑定

快速入门

  1. 在HTML页面中引入vue.js

  2. 创建vue对象

    1
    2
    3
    4
    5
    6
    7
    new Vue({
        	// 表示这个vue对象控制的是id为app容器中的内容
           el: "#app",
           data: {
               message: "hello Vue"
           }
       })

  3. 编写视图

    1
    2
    3
    4
    <div id="app">
          <input type="text" v-model="message">
              {{message}}
      </div>

常用指令

  1. =={{}}== 为插值表达式，里面可以是变量、三元运算符、函数调用、算数运算,不能再标签属性中使用

  2. 指令 作用
    v-html innerHTML,动态渲染标签
    v-bind（可以简写为：） 为HTML标签绑定属性值，设置href,css样式
    v-model 在表单元素上创建双向数据绑定
    v-on(可以简写为：+事件类型) 为HTML标签绑定事件
    v-if 条件性的渲染元素，只有为true是才渲染，元素标签才会显示
    v-else-if
    v-else
    v-show 根据条件展示元素，更改的是display的属性值
    v-for 列表渲染，遍历容器的属性值或者对象的属性

  3. 使用细节

    v- for 的使用后面要加key值，便于后面使用id进行删除时有唯一的定位值，一般来说ID值是由后端传递过来的，可以先用Date.now() 时间戳

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <li class="todo" v-for="(item,index) in taskList " :key="item.id">
            <div class="view">
              <span class="index">{{index+1}}</span> <label>{{item.task}}</label>
              <button class="destroy" @click="delById(item.id)"></button>
            </div>
          </li>
     delById(id) {
            this.taskList = this.taskList.filter(item => item.id !== id)
          }

生命周期

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

使用生命周期的细节

初始化渲染请求一般放在create中，只有在mounted阶段才能操作DOM元素

在beforeDerstroy中释放资源，定时器，全局监听器等

常用语法

记住属性内部一定不能使用插值表达式引用值

  1. v-bind 可以简写为:后加属性值，主要是为了增强style本身的属性，使它成为动态的属性

    1
    2
    3
    4
    5
    6
    7
    //:disabled="item.num<=1" 当num<1时该按钮被禁用
    <button :disabled="item.num<=1" class="decrease" @click="cut(item.id)"> - </button>
    //图片的src属性变成动态获取的
    <img :src="item.icon" alt="" />
    //对象形式：适用于基于布尔条件判断的类应用，尤其是当需要同时判断多个条件时。
    //数组形式：适用于需要组合固定类和动态类的情况，或者当类的组合不依赖于条件判断时。
    :class="{active:item.isChecked}"

  2. v-model 双向数据绑定 主要是对表单元素进行绑定，当页面上的元素修改后会直接响应到页面上

  3. v-for 遍历数组中的数据，一般用来渲染列表，记得后面要根:key元素，可以定位到该列

  4. v-on 可以简写为@click @后面加事件类型

  5. v-if 和v-else 要在同一个父元素底下使用

修饰指令符

在常用的指令后面可以加上一些修饰符简化代码的开发

1
2
3
4
v-model.trim //去除首尾空格
v-model.number/尝试将字符串转换为数字，转不了的还是以字符串的形式展示，负数也可以转
@click.provent//阻止默认行为
@keyup.enter//键盘回车事件

计算属性（computed）

作为属性直接调用，会对计算出来的结果缓存，再次读取的时候是直接读缓存中的数据

一个结果依赖多个值的时候推荐使用

computed中计算属性内部的this依然指向的是Vue实例

具体写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//当要修改计算属性时就要使用完整写法
computed:{
          //全选  
          isAll:{
            get(){
              //every方法：数组中每一项都满足条件才返回true
              return this.fruitList.every(item => item.isChecked)
            },
            set(val){
              //设置全选
              this.fruitList.forEach(item => item.isChecked = val)
            }
          },
          //计算总价
              //简化写法，只使用，不会修改
          totalPrice(){
            // 判断是否选中，选中的商品计算总价
              return this.fruitList.reduce((sum, item) => item.isChecked?sum + item.price * item.num:sum, 0)
          
          },
          //计算选中的商品数量
          totalNum(){
            //filter方法：过滤出数组中满足条件的项
            return this.fruitList.filter(item => item.isChecked).length
          }

        },

watch侦听器（监视器）

监听数据变化，执行一些业务逻辑和异步操作 比如在数据变化后将数据保存在本地中

根据具体需要来确定写法，能使用简单写法的尽量用简单写法

实现实时的数据的转换

简单写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

完整写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
watch: {
  obj:{
    // 监听的数据
    deep: true,
    // 该函数会在监听的数据发生变化时自动执行
    immediate: true,
  handler(newVal){
   //防抖
    if(this.timer){
      clearTimeout(this.timer)
    }
    this.timer = setTimeout(() => {
      axios.get('https://applet-base-api-t.itheima.net/api/translate', {
      params: {
        newVal
      }
    }).then(res => {
      this.mela = res.data.data
      console.log(res.data.data)
    })
    }, 300);
  }
  }
 
}

Vue CLI

官方提供的脚手架，用于快速生成Vue项目的模板

基于node.js,可以用nvm来管理不同版本的node.js

提供的功能

  1. 统一的目录结构
  2. 本地调式
  3. 热部署（应用正在运行的时候，自动更新应用，也就是更改了代码但不用重启项目）
  4. 单元测试
  5. 集成打包

使用Vue CLI

  1. 命令行创建vue项目 vue create 项目名称
  2. 图像化界面 vue ui

项目结构

ESlint 代码规范

团队统一的编码风格，安装ESLint插件 会出现高亮错误，在创建项目的时候要将Eslint规范勾选上，同时要注意依赖冲突的问题，在vscode设置中配置如下

vue的基本使用方式

组件文件以vue结尾，每个组件由三部分组成