vue 基础

 1.vue 介绍

1.1 什么是vue

vue是一个渐进式的javascript框架
    渐进式
    框架(拥有自己的规则和元素)和库(封装的属性或方法)

1.2 Vue学习的方式

传统的开发  通过html页面引入vue
 webpack工程化下开发 

2.@ vue-cli脚手架

2.1  配置环境

    安装               sudo  yarn global add @vue/cli   

                        或:  npm install -g @vue/cli
    创建项目         vue create 项目名字(禁止中文)

    选择模板:         (第一次需要设置)
    启动项目         vue  serve 

                           (打开目录下终端  command + .  打开浏览器地址 ,,可以自定义配置:  /* 覆                                 盖 webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
})
    目录结构：      src文件夹下App.vue

2.2  eslint 

在 vue.config.js 文件夹 设置

3. 项目入口, 以及代码执行顺序和引入关系

4. vue文件

template
        必须，提供组件的结构 html
        注意：必须要一个根元素 div
 script
        书写js代码 逻辑
  style
        处理样式，默认支持css
        通过lang="less|scss" 可以使用less或者sass
            需要安装依赖包

5. vue 指令

5.1 插值表达式  又叫: (声明式渲染/文本插值)

    语法: {{ 表达式 }}

5.2  MVVM设计模式  

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

• M： model数据模型 (data里定义)

• V： view视图 （html页面）

• VM： ViewModel视图模型 (vue.js源码)

      5.3    v-bind 

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

      5.4 v-on   <标签绑定事件 >

语法:
* * v-on:事件名="要执行的==少量代码=="
  * v-on:事件名="methods中的函数"
  * v-on:事件名="methods中的函数(实参)" 
* 简写: @事件名="methods中的函数"

            v-on 事件对象 

语法:

* 无传参, 通过形参直接接收
* 传参, 通过$event指代事件对象传给事件处理函数

            v-on修饰符

语法:

* @事件名.修饰符="methods里函数"
  * .stop - 阻止事件冒泡
  * .prevent - 阻止默认行为
  * .once - 程序运行期间, 只触发一次事件处理函数

           v-on按键修饰符

语法:

* @keyup.enter  -  监测回车按键
* @keyup.esc     -   监测返回按键

    5.5  v-model 指令

* 语法: v-model="vue数据变量"
* 双向数据绑定
  * 数据变化 -> 视图自动同步
  * 视图变化 -> 数据自动同步

遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性

           v-model修饰符

语法:

* v-model.修饰符="vue数据变量"
  * .number   以parseFloat转成数字类型
  * .trim          去除首尾空白字符
  * .lazy           在change时触发而非inupt时

安装包:  

less语法:      yarn add less@3.0.4 less-loader@5.0.0 -D   

1.  v-text和v-html 

• 语法:

  • v-text="vue数据变量" 把值当成普通字符串显示

  • v-html="vue数据变量" 把值当成标签进行解析显示 (可以识别标签 插值表达式)

2. v-show和v-if

• 语法:

  • v-show="vue变量"

  • v-if="vue变量"

    • v-show 用的display:none隐藏 (频繁切换使用)

    • v-if 直接从DOM树上移

    • v-else使用

3.  v-for   

• 语法

  • v-for="(值, 索引) in 目标结构"

  • v-for="值 in 目标结构"

• 目标结构:(可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

<template>
  <div>
    <ul>
      <li v-for="(val, index) in arr" :key="index">
        {{ val }}
      </li>
    </ul>
    <button @click="revBtn">数组翻转</button>
   
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: [5, 3, 9, 2, 1]
    }
  },
  methods: {
    revBtn(){
      // 1. 数组翻转可以让v-for更新
      this.arr.reverse()
    },
    sliceBtn(){
   
  }
}
</script>

全选 小选 案例

1. v-for 渲染页面数据

           使用v-for的时候，需要提供一个key属性，且保证key唯一不可变
虚拟DOM概念
               本质就是JS对象,存在内存的js对象
如何工作
                    模板生成虚拟DOM
                    虚拟DOM生成真实的DOM
                    数据发生改变
                    生成新的虚拟DOM
                    对比新旧虚拟DOM

                        diff
                    根据新旧虚拟DOM的不同去更新真实的DOM
                        重绘
                        回流
diff算法

     如果根元素变了
                    直接删了重建
                如果根元素没变但是属性变化
                    元素复用，修改属性
                父元素不变，子元素发生变化
                    无 key
                        就地更新
                        根据下标，一个一个对比子元素的虚拟DOM
                        问题：如果子元素的顺序发生改变，性能不高
                    有key
                        根据key进行复用
                        子元素的顺序就算发生了改变，也没影响
 

动态class   动态style

• :class="{类名: 布尔值}"

• :style="{css属性: 值}"

 v-bind对于样式增强
        对于style和class,v-bind进行的增强，值不仅仅可以是字符串，还可以是对象和数组
    品牌管理半成品——列表渲染功能 

案例 品牌管理
1. 拿到数据 v-for 渲染出页面数据

2.添加功能:
v-model 绑定表单  
给数据list  push进去所填能容 (id值 :长度-1,id+1) 
price >100 标记红色
刷新网页数据又回去了 使用  .prevent
判断填写内容 是否为空 

3. 删除功能:

绑定删除事件 带id值

通过id 找到这条数据在数组中下标

splice 方法 删除原数组里对应元素


4.时间格式化:

下载 :  yarn add moment  引入

 <!-- 1.定义过滤器: 
filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
 <!-- 2. 过滤器使用
      语法: {{ 值 | 过滤器名字 }}
     -->

过滤器    

作用：对数据进行格式化
        使用
            <p>{{msg | filterA}}</p>
            <P :title="title | filterB">
        定义过滤器
            局部的
                filters: {  过滤器名字(input) { return ... }  }
            全局的
                Vue.filter(‘过滤器的名字’,  function(input) { return ...})
        使用多个过滤器
            {{ msg | filterA | filterB }}
        过滤传参数
            {{ msg | filterA(arg1) }}
            filters: {  filterA(input, arg1 = 0) {} }
 

组件4个步骤:

1  创建组件 ( components/ 文件名.vue(新创建的文件) 封装要复用的标签,样式 js代码

2  引入组件

      全局注册 -main.js 

  语法:import Vue from ‘vue’

import 组件对象(跟文件名一样可随意起的) from  ‘vue文件路径’(component/… ‘)

3 注册组件 

Vue.component(‘组件名’,组件对象)        

1. app.vue     

4  组件名使用

<Pan> </Pan>

vue组件通信_父向子-props

步骤:

1. 创建组件components/MyProduct.vue - 复制下面标签

2. 组件内在props定义变量, 用于接收外部传入的值

3. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

components/MyProduct.vue - 准备标签

props定义变量 -> 父在使用组件用属性给props变量传值

vue组件通信_子向父

语法:

• 父: @自定义事件名="父methods函数"

• 子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码

$emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)

vue组件通信-EventBus

Vue生命周期

勾子函数:

4大阶段8个方法

阶段:   初始化  挂载  更新 销毁

8个方法: 

初始化: beforeCreate   created

8个方法:

初始化 beforeCreate    created

挂载 beforeMount     mounted

更新 beforeUpdate   updated

销毁 beforeDestroy   destroyed

初始化  beforCreate   —>vue 实例开始挂载一些实例  method和data

             created   ——可以获取data和调用methods

挂载      编译模板生成dom,只能有虚拟dom

             beforMount ,拿不到真实dom--->根据虚拟的dom生成真实dom

             mounted————>获取真实dom

更新       beforUpdate(拿不到数据)———数据发生改变,将虚拟的dom更新到真实dom           

               Update(拿到数据)——更新后真实的dom

销毁       beforeDestroy— 移除一些监听的事件——销毁定时器

              destroyed