# VueStudy

**Repository Path**: liu-qi2/vue-study

## Basic Information

- **Project Name**: VueStudy
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-10
- **Last Updated**: 2021-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### Vue基础语法
## Vue概述
    Vue.js是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组
件和 Vue 生态系统支持的库开发的复杂单页应用。
渐进式JS框架
    库：提供API为主，比如JQuery 提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求
    框架：提供基础性服务 是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目
渐进式：声明式渲染->组件系统->客户端路由->集中式状态管理(vuex)->项目构建
    可以只使用一部分，也可以全部使用

特点：易用、灵活、高效（框架文件小、运行效率高：底层提供了虚拟DOM）

## Vue使用步骤
1、提供标签填充数据（容器）
2、引入vue.js文件
3、把vue提供的数据填充到标签
    (1)var vm = new Vue({
        el:'#app',  //元素挂载位置
        data:{      //模型数据
             msg:'hello world'
        }
    });
    (2)插值表达式{{}}
    将数据填充到HTML标签中

## Vue模板语法
# Vue指令
    本质是自定义属性，格式以v-开始
1、v-cloak 解决闪动问题 先通过样式隐藏内容，然后在内存中进行值得替换，替换好后再显示
    (1)提供样式
    [v-cloak]{
        display:none;
    }
    (2)在插值表达式所在标签中添加指令
2、数据绑定指令 把数据填充到标签
    *插值表达式 会有闪动
    *v-text 填充纯文本
        1、相比插值表达式，没有闪动问题,推荐使用此指令，不使用插值表达式
        2、会覆盖原text内容
    *v-html 填充html片段
        1、不安全，容易导致xss攻击
        2、原则：本网站内部数据可以使用，来自第三方数据不可以用
    **v-pre 填充原始信息,跳过Vue编译过程
# 数据响应式   数据的变化导致页面的内容的变化
    数据指令及插值表达式会自动响应
    (1)数据绑定 将数据填充到标签中
    (2)v-once 只编译一次 数据将不再响应，可以提高性能

3、双向数据绑定
    <!-- v-bind只能实现数据的单项绑定 从vm->v -->
	<input type="text"  v-bind:value="msg" style="width: 100%;" />
	<!--!!!!! v-model实现表单元素和model数据数据双向绑定 -->
	<!-- 注意：只能用于表单元素 -->
	<input type="text"  v-model:value="msg" style="width: 100%;" />
	<!-- 
	    ！！！双向绑定原理：
		<input type="text"  v-bind:value="msg" v-on:input="msg=$event.target.value" />
		通过v-bind绑定值，再通过事件监听改变进行赋值更新
	 
		 -->
    *v-model
# MVVM设计思想：
    M(model)
    V(view)
    VM(View-model)

    view --> dom listener(事件监听) -->model

    view <-- data bindings <-- model

4、事件绑定
    (1)*v-on指令 简写：@
     // 定义方法
    methods:{
        handle:function(){
            this.num++;
        }
    }
    (2)事件函数调用
        <!-- 直接绑定函数名称 -->
        <button @click='handle'>{{num}}</button>
        <!-- 调用函数 -->
        <button @click='handle()'>{{num}}</button>
    (3)事件函数参数传递
        $event事件对象传递
       **
       1、如果事件直接绑定函数名称，默认会传递事件对象
       2、如果绑定函数调用，事件对象必须作为最后一个参数才会传递，并且名称为$event
        <button @click='handle(arguments,$event)'>{{num}}</button>

    (4)事件修饰符
        1、阻止冒泡.stop
        2、阻止默认行为.prevent
        3、self 和 .stop 区别:
            self 只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
            stop 是从自身开始不向外部发射冒泡信号
        .stop .capture .prevent .self .once 
			<!-- 使用.capture使用捕获模式 -->
			<!-- <div class="inner" @click.capture="divClick"> -->
			<!--使用.self实现只有点击当前元素时才触发事件，阻止当前元素的冒泡行为  -->
			<div class="outer" @click="outerClick">
				<div class="inner" @click.self="divClick"> <!-- .self只阻止自己的冒泡行为 -->
					<!-- 使用.stop阻止冒泡 -->
					<input type="button" :value="msg" @click="btnClick"	/>
					<!-- 事件传参 $event是指当前触发的是什么事件（鼠标事件，键盘事件等）-->
					<input type="button" :value="msg" @click="btnClick2(123,456,$event)"	/>
					<!-- 使用.prevent阻止默认行为,使用.once设置只触发一次 -->
					<a href="https://www.baidu.com" @click.prevent.once="linkClick">有问题先去百度</a>
				</div>
		</div>
    (5)按键修饰符
        1、@keyup.enter
            .enter .delete
        2、自定义按键修饰符 按键keycode
            Vue.config.keyCodes.f1 = 112;
5、属性绑定
    1、*v-bind 简写:

    2、样式绑定
        (1)class样式处理
            isActive控制class是否显示
            对象语法<div v-bind:class="{active:isActive}"></div>
            数组语法<div v-bind:class="[activeClass,errorClass]">
        (2)style样式处理
            对象语法<div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>
            数组语法<div v-bind:style="[baseStyles,...]">

6、分支循环结构
    (1)分支结构
        v-if
        v-else
        v-else-if
        v-show
# v-if 和 v-show的区别
    <!-- v-if特点，每次都会删除或创建元素 -->
    <!-- v-show 每次不会重新进行创建或删除，只是切换了元素的display样式 -->
    <!-- v-if有较高的切换性能消耗 -->
    <!-- v-show有较高的初始渲染消耗 -->
    使用场景：
    (1) 涉及到频繁切换  使用v-show
    (2) 如果这个元素可能永远不显示出来 使用v-if 

    (2)循环结构
        1、v-for遍历数组
            <li v-for='(item,index) in list' :key='index'>{{item}} + '------' +{{index}}</li>
            # key的作用，帮助Vue区分不同元素，提高性能
        原则上遍历的时候都要加上key
        2、v-for遍历对象
        3、v-if和v-for结合使用
            <li v-if="val == '男'" v-for='(val,key,index) in obj '>{{index}}={{key}}:{{val}}</li>

# Vue常用特性
1、表单操作 用户交互
    (1)见10.表单操作
    (2)表单域修饰符
        number：转化为数值
        trim:去掉首尾空格
        
        <input v-model.number = "age" type="number">
lazy：将input事件切换为change事件
2、自定义指令
    Vue.directive('focus',{
        <!-- inserted钩子函数 -->
        inserted:function(el){
            // el表示指令所绑定的元素
            el.focus();
        }
    })
    <input type="text" v-focus>    
3、计算属性
    让模板中复杂的计算更加简单
    基于data计算，data中的数据发生变化，计算属性也会变化
    computed:{
        reverseMessage:function(){
            return this.msg.split('').reverse().join('');
        }
    }

    计算属性和方法的区别：
        计算属性是基于他们的依赖(data中的数据)进行缓存的，方法不会缓存，计算一次过后就不会再计算了，
    而方法函数每调用一次就会执行一次，计算属性更节省性能
4、过滤器
    格式化数据，比如将字符串格式为首字母大写，日期的格式化等
    Vue.filter('upper',function(val){
            return val.charAt(0).toUpperCase()+val.slice(1);
    })
    使用场景：数据绑定，属性绑定
        <div>{{msg | upper | lower}}</div>
        <div :abc='msg | upper'>测试</div>
    *过滤器也支持同时使用多个，级联
    *带参数的过滤器
5、监听器
    应用场景：数据变化时执行异步或开销较大的操作
    计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。
    watch:{
        firstName:fuction(val){
            this.fullName = val + this.lastName
        }
    }

6、生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期
(1)挂载(初始化相关属性)
    1、beforeCreate 
    在实例初始化之后，数据观测和事件配置之前被调用
    2、created  
    在实例创建完成后被立即调用
    3、beforeMount
    在挂载开始之前被调用
    4、mounted
    el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
(2)更新(元素或组件的变更操作)
    5、beforeUpdate
    数据更新时调用，发生在虚拟DOM打补丁之前
    6、updated
    由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
(3)销毁(销毁相关属性) 
    
    7、beforeDestory
    实例销毁前调用
    8、destoryed
    实例销毁后调用
    实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

# 修改响应式数据（数组和对象）
    Vue.set(vm.items,indexOfitem,newValue)
    vm.$set(vm.items,indexOfitem,newValue)
    参数一 要处理的数组名称
    参数二 索引
    参数三 要修改的值
    既可以处理数组索引，也可以处理对象属性

## 常用特性应用场景
1、过滤器 ---- 格式化日期
2、自定义指令 ---- 获取表单焦点
3、计算属性 ---- 统计数量
4、侦听器 ---- 验证，监听一些一步的处理
5、生命周期 ---- 数据处理，比如从后台获取数据填充到模板中


### Vue组件化开发
# 组件化规范 Web Components
    创建封装好功能的定制元素    Vue部分实现了上述规范

## 注册组件
    Vue实例对象本身也是个组件
# 全局注册 
    Vue.component('组件名称',{
        data:function(){
            return{

            }
        },
        template:组件模板内容
    })
    注意事项:1、data必须是一个函数
            2、组件模板内容必须是单个根元素
            3、组件模板内容可以是模板字符串
            4、组件的命名方式：
                （1）短横线
                （2）驼峰式 
                如果使用驼峰式命名组件，使用的时候只能在字符串模板中使用驼峰式来使用，普通
            标签模板必须使用短横线！
# 局部组件注册
    new Vue({
        components:{
            'component-a':ComponentA,
            'component-b':ComponentB
        }
    })
    局部组件只能在注册它的父组件当中使用

## Vue调试工具安装Devtools
    1、克隆仓库
    2、安装依赖包
    3、构建
    4、打开Chrome扩展页面
    5、选中开发者模式
    6、加载已解压的扩展，选择shells/chrome

## 组件间数据交互

# 父组件向组件传值
    1、父组件向子组件传值
        (1)子组件通过props接收传递过来的值,具体通过属性名来接收
        Vue.component('menu-item',{
            props:['title'],
            template:'<div>{{ title }}</div>'
        })
        注意：1、props属性名规则：在html标签中需要使用短横线，不能使用驼峰
             2、props属性值类型：所有类型都可以，但对于布尔和数字，如果不进行v-bind绑定，得到的数据
                都是字符串类型的数据
            

    2、父组件通过属性将值传递给子组件，动态绑定或者写死
        <menu-item :title = 'title'></menu-item>

# 子组件向父组件传值
    1、子组件通过自定义事件向父组件传递信息
        子组件内部通过`this.$emit('方法名', 要传递的数据)`方式，来调用父组件中的方法，
	同时把数据传递给父组件使用
      template:' <input type="button" value="向父组件传值" @click="sendMsg" />',
						methods:{
							sendMsg(){
								this.$emit('func', 'OK'); 
							}
						}
    2、父组件监听子组件事件
    <son @func= "getMsg(val)"></son>

# 兄弟组件传值
    1、单独的事件中心管理组件间的通信
        var eventHub = new Vue()
    2、监听事件与销毁事件
        eventHub.$on('add-todo',addTodo)
        eventHub.$off('add-todo)
    3、触发事件
        eventHub.$emit('add-todo',id)

## 组件插槽
    1、插槽位置
        template:`<slot></slot>`
    2、插槽内容
        <alert-box>插槽内容</alert-box>
# 具名插槽
    可以定义多个插槽，同时可以给插槽命名
    <slot name='header'></slot>

    <alert-box><h1 slot='header'>具名插槽</h1></alert-box>

# 作用域插槽
    应用场景：父组件对子组件内容进行加工处理


## 基于组件案例
1、根据业务功能进行组件化划分
    (1)标题组件(展示文本)
    (2)列表组件(列表展示、商品数量变更、商品删除)
    (3)结算组件(计算商品总额)
2、功能实现步骤：
    ·实现整体布局和样式效果
    ·划分独立的功能组件
    ·组合所有的子组件形成整体结构
    ·逐个实现各个组件功能：标题、列表、结算组件



### 前后端交互

## 前后端交互模式

# 接口调用方式
1、原生ajax
2、基于jquery的ajax
3、fetch
4、axios

#  URL地址格式
1、传统形式URL schema://host:port/path?query#fragment
    schema：协议
    host:域名
    port:端口
    path:路径
    query:查询参数
    fragment:锚点（哈希），定位页面中某个位置
2、Restful形式的URL
    ①GET 查询
    ②POST 添加
    ③PUT 修改
    ④DELETE 删除
    例：http://www.xxxx/books/123
    /123传参 与请求方式密切相关

## Promise用法

# 异步调用
1、定时任务
2、Ajax
3、事件函数
为什么要用Promise?
1、多次异步调用的结果顺序不确定
2、异步调用结果存在依赖需要嵌套

# Promise概述
Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象(函数)，从它可以获取异步操作的消息
好处：
1、解决回调地狱（多次嵌套）
2、提供的简结的API,操作更加容易两种情况

# Promise基本用法
1、实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务
2、resolve和reject两个参数用于处理成功和失败，并通过p.then获取处理结果
p.then()成功
p.catch()失败
p.finally()无论成功失败
Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果
Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果

# then参数中的函数返回值
1、返回Promise实例对象
    返回的实例对象会调用下一个then
2、返回普通值
    返回的普通值会传递给下一个then，通过then参数中函数的参数接收该值

## fetch用法
# fetch概述
1、基本特性：
*更加简单的数据获取方式
*基于Promise实现
fetch(url).then().then().catch()
fetch('http://localhost/data'，{
    method:'get'
}).then(function(data){
            // text()方法返回一个Promise实例对象，用于获取后台数据
            return data.text()
        }).then(function(data){
            console.log(data)
        })
2、fetch请求参数
常用配置选项：method、body请求参数、headers请求头