Vue基础知识（为了不重复）

迷南。 2022-12-25 03:52 103阅读 0赞

# VUE #

官网下载，只用到vue.js这个文件

## 什么是vue ##

是MVVM js 渐进式 视图层框架

> mvvm:
> 
> m:model 数据
> 
> v:视图
> 
> mv vm :数据改变，视图跟着刷新（vm:vue实例驱动刷新）

命令式：

将程序的每一个运行步骤写出来 ，然后再程序运行

声明式：

告诉计算机我要干什么（其他的什么都不管）

一切以数据为中心，尽量不要操作dom

> 渐进式：
> 
> vue.js是核心库，里面只有核心语法

利用视图构建用户界面

## vue雏形 ##

html部分
    <input type="text" id="app">
        {
        {
        msg}}
    js部分
    const vm =new Vue({
        
        el:"#app",//挂载vue,#app内部会被vue控制
        data:{
        
            //存放数据，会挂载到实例上
            msg:123
        },
        methods:{
        
            //存放方法，会挂载到实例上，返回的是数据
            act(){
        
    			return "这是一个方法";
            }
        }
        
    })

## 模板 ##

将实例vm上面的数据**渲染**到模板上

pay attation：

1.模板是用于渲染数据，不管是属性或者·方法，最终结果必须是一个值
    2.{
       {}}模板内是js语法，
    3.{
       {}}可以直接写表达式和计算，但是切记只能是表达式

大部分的原生js全局方法或者属性是不识别（但是设置了一个白名单，其中的全局属性和方法可以使用）

'Infinity,undefined,NaN,isFinite,isNaN,' +
        'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
        'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
        'require'

挂载点：vue仅处理挂载点下面的内容（dom节点），挂载点内部的为模板

*  直接放在挂载点内部

*  实例内的template属性

</div>
        <script>
        new Vue({
            el: "#app",
            template: "<li>这是个待办项</li>"
            data() {},
        });
    </script>

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        {
       { msg }}
        {
       { "a" }}
        {
       { 1+2*5+9-10 }}
        {
       { isLike?'喜欢你':'讨厌你'  }}
        
        {
       { parseInt('1.345') }}
      </div>
      <script src="./vue.js"></script>
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            msg:123,
            isLike: false
          },
          methods:{
          
          }
        })
      </script>
    </body>

## 外部挂载 ##

const vm = new Vue({
      data:{},
      methods:{}
    }) 
    vm.$mount(document.querySelector("#app"))

> 当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。  
> 换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

## 指令： ##

**扩展了标签的属性的功能**

组件：包括html标签

用法：

<组件 v-指令名=‘’值‘’/>

常见指令：

1.  v-model

将表单的值和实例的数据进行双向绑定

注意：是input事件，不是change事件

1.  v-text:将vue数据和元素的文本内容进行绑定。（不重要）
2.  v-hmtl渲染富文本
3.  v-show:布尔值；表示是否显示

<body>
        <div id="app">
            <input type="text" v-model="inputTxt">
            {
        {
        inputTxt}}
            <input type="checkbox" name="" id="" v-model="isChecked">
            {
        {
        isChecked}}
        
            
               //复选框出现一次v-model就是布尔值，出现多个就是数组
            <input type="checkbox" id="jack" value="jack" v-model="checkedName">
            <label for="jack">jack</label>
            <input type="checkbox" id="rose" value="rose" v-model="checkedName">
            <label for="rose">rose</label>
            <input type="checkbox" id="tom" value="tom" v-model="checkedName">
            <label for="tom">tom</label>
            {
        {
        checkedName}}
    
            
            <input type="radio" id="one" value="one" v-model="picked">
            <input type="radio" id="two"  value="tow" v-model="picked">
            <input type="radio" id="three" value="three" v-model="picked">
            {
        {
        picked}}
            
            <div v-text="body" v-html="html"> </div>
            <div v-html="'<p>沙雕</p>'"></div>
        </div>
    </body>
    <script src="./vue.js"></script>
    <script>
    const vm =new Vue({
        
        data:{
        
            body:"body",
            msg:"msg",
            inputTxt:"值",
            isChecked:true,
            giao:true,
            html:"<h2>你就是个大沙雕</h2>",
            checkedName:[],
            picked:""
        },
        methods:{
        
            act(){
        
                return "方法"
            }
        },
        el:"#app"
    })
    </script>

**指令的值也需要写在引号中**：

1.  也是js环境
2.  里面可以写表达式，不能写语句。
3.  全局的函数，只能使用白名单

相当于模板中的语法。

1.  v-bind:属性
    
    > 将普通的任意标签的属性（可以是自定义属性）的值，与vue一个数据进行绑定，变成动态的

css部分：
    .box{
        
        width:200px;
        height:200px;
        background-color:red;
    }
    html部分
    <div id="app">
    		<div v-bind:class="cls"></div>
    </div>
    js部分
    const vm = new Vue({
        
        el:"#app",
        data:{
        
            cls:"box"
        }
    })

v-bind的简写:将v-bind省略掉，只写个冒号

:class="cls"

## 绑定事件 ##

1.  v-on事件：将vue元素的事件与vue的方法进行绑定

<div id="app">
        <button v-on:click="fn">按钮</button>
        <button @click="fn">简写</button>//这种是事件函数
        <button @click="fn($event,n)"> 按钮二</button>//这种写法
    </div>
    
    //js部分
    const vm = new Vue({
    	el:"#app",
    	data:{
    
    	},
    	methods:{
    		fn($seven,2){
    			alert(1);
    		}
    	}
    })
    
    
    @click ="fn"方式绑定第一个参数默认就是事件对象，没有兼容性问题；
    
    第二种的事件对象是：@click =fn($event);
    $event是写在Vue原型上的属性

绑定方式：

1.第一种：
    <button @click="fn">按钮</button>
    new Vue({
    	methods:{
    		fn(e){
    		//这种绑定方式,fn就是事件函数，第一个参数就是事件对象
    		}
    	}
    })
    
    
    2.第二种
    <button @click="fn()">按钮</button>
    
    //需要传参的时候使用
    new Vue({
    	emthods:{
    		fn(e){
    		//这种绑定方式,fn普通调用，不再是事件函数，需要得到事件对象需要手动传入一个$event
    		//$event是挂载到Vue.prototype上的
    		}
    	}
    })

改变：

<div	id="#app">
    <button @click="fn">{
       {isShow?‘隐藏’:'显示'}}<button>
    <div class="box"  v-show="isShow"></div>
    </div>
    
    
    <script src="./vue.js"></script>
    <script>
    	const vm = new Vue({
    		el:"#app",
    		data:{
    			isShow:true
    		},
    		methods:{
    			fn(){
    				console.log(this);
    				this.isShow =!this.isShow; 	
    			}
    		}
    	})
    </script>

## 事件修饰符 ##

事件修饰符：为了解决上面的繁琐

vue.js为v-on提供的

修饰符是由点开头的指令后缀来表示的。赋予了事件一些特殊的功能 addEventListener("事件名",函数,true/false)
        .stop  阻止事件冒泡
        .prevent  阻止默认事件
        .capture    在捕获阶段触发
        .self   只能通过元素本身触发，后代元素无法触发（不想被事件冒泡影响）
        .once  只触发一次

## 条件渲染 ##

### v-show 和v-if ###

<body>
        <div id="app">
            <button @click='change'>{
       {isShow?'消失':"显示"}}</button>
            <div class="box1" v-if="isShow"></div>
            <div class="box" v-show="isShow"></div>
        </div>
    </body>
    <script src="./day2/vue.js"></script>
    <script>
    //条件渲染
     var vm  =new Vue({
         el:'#app',
         data:{
             isShow:true
         },
         methods:{
             change(){
                return   this.isShow = !this.isShow;
             }
         }
     })

相同点：v-show和v-if都可以实现元素的消失和显示状态

不同点：v-show控制元素的·display属性，v-if就是移出元素.

使用场景：

1. 代码块需要频繁的切换状态，此时应该使用v-show（性能消耗更小）
    2. 代码块初始化不显示且不频繁切换， v-if（v-if是惰性，初始情况是false的情况下代码不加载）

### 页面渲染机制 ###

浏览器下载html,解析出来DOM树（包含dom树）和CSS树，然后结合形成render树（渲染树），绘制成一张图片，最终显示在页面上。
        
        只是改变样式属于重绘，只是修改render节点上的样式
        
        
        回流需要重新构建DOM树（元素的显示消失，动态生成插入元素（最耗性能的），改变元素）

https://www.bilibili.com/video/BV1Ct411q7MH?from=search&seid=10043608126804678080

### else ###

<body>
        <div id="app">
            <button @click='change'>{
        {
        isShow?'消失':"显示"}}</button>
            <div class="box1" v-if="isShow"></div>
            <div class="box" v-else></div>
        </div>
    </body>
    <script src="./day2/vue.js"></script>
    <script>
    //条件渲染
     var vm  =new Vue({
        
         el:'#app',
         data:{
        
             isShow:true
         },
         methods:{
        
             change(){
        
                return   this.isShow = !this.isShow;
             }
         }
     })

**注意必须是相邻的兄弟节点（除了空格不能有其他节点在中间）**

### else if ###

<div id="app">
            <button @click="change">{
        {
        num}}</button>
            <div class="box1" v-if="num%3==0">{
        {
        "red"}}</div>
            <div class="box2" v-else-if="num%3==1">{
        {
        "green"}}</div>
            <div class="box3" v-else>{
        {
        "yellow"}}</div>
        </div>
    </body>
    <script src="./day2/vue.js"></script>
    <script>
    const vm = new Vue({
        
        el:"#app",
        data:{
        
            num:3
        },
        methods:{
        
            change(){
        
            return   this.num +=1;
            }
        }
    })

注意：必须是连续兄弟，不能有其他兄弟在中间

## 循环列表 ##

el的作用域是li的内部

<div id="app">
            <ul>
                <li v-for="i in arr">
                    {
        {
        i}}
                </li>
            </ul>
            <hr>
            <li v-for="(i,index) in arr">{
        {
        i+"===>"+index}}</li>
            <hr>
            <li v-for="(v,key,index) in json">
                {
        {
        v+"===>"+key+"====>"+index}}
            </li>
            <li v-for="i in items">
                <h2>商品名称：{
        {
        i.itemName}}</h2>
                <p>商品价格：{
        {
        i.itemPrice}}</p>
                <div>商品数目：{
        {
        i.itemNum}}</div>
            </li>
        </div>
    </body>
    <script src="./day2/vue.js"></script>
    <script>
        const vm = new Vue({
        
            el: "#app",
            data: {
        
                arr: [
                    1, 2, 3, 4
                ],
                json: {
        
                    a: 10,
                    b: 20,
                    c: 30
                },
                items: [{
        
                        itemName: "商品一",
                        itemPrice: 20,
                        itemNum: 2
                    },
                    {
        
                        itemName: "商品二",
                        itemPrice: 30,
                        itemNum: 3
                    },
                    {
        
                        itemName: "商品三",
                        itemPrice: 40,
                        itemNum: 4
                    }
                ]
            },
    
            methods: {
        
    
            }
        })

## 复杂循环 ##

<div id="app">
        <ul>
            <li v-for="(floor,index) in floors">
                <h3>{
        {
        floor.title}}</h3>
                <ul>
                    <li v-for="(f,i) in floor.items">
                        <div>商品名称:{
        {
        f.itemName}}</div>
                        <div>商品价格:{
        {
        f.itemPeice}}</div>
                        <div>商品特点:{
        {
        f.itemDesc}}</div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    <script src="./day2/vue.js"></script>
    <script>
    var vm = new Vue({
        
            el:"#app",
            data:{
        
                floors:[
                    {
        
                        title:"手机",
                        items:[
                            {
        
                                itemName:"散心note7",
                                itemPrice:299,
                                itemDesc:"促销价299元"
                            },{
        
                                itmeName:"华为note7",
                                itemPeice:399,
                                itemDesc:"原价"
                            },{
        
                                itemName:"小米note7",
                                itemPrice:499,
                                itemDesc:"涨价"
                            }
                        ]
                    },
                    {
        
                        title:"羽绒服",
                        items:[
                            {
        
                                itemName:"波司登",
                                itemPrice:488,
                                itemDesc:"波司登羽绒服"
                            },
                            {
        
                                itemName:"米奇妙妙屋",
                                itemPrice:899,
                                itemDesc:"密斯卡，吴思卡"
                            },
                            {
        
                                itemName:"汪汪队立大功",
                                itemPrice:988,
                                itemDesc:"旺旺大礼包"
                            }
                        ]
                    }
                ]
            },
            methods:{
        
    
            }
    })

## vue中的class style ##

### class部分 ###

.box {
            height: 100px;
            width: 100px;
            background-color:red;
        }
        .box2 {
            height: 200px;
            width: 200px;
            background-color: green;
        }
        .box3 {
            height:300px;
            width: 300px;
            background-color: yellow;
        }
    </style>
    <body>
        <div id="app">
            <div :class="a"></div>
            <div :class="b"></div>
            <div :class="{box3:c}"></div>
            <div :class="{box3:d}"></div>
        </div>
    </body>
    <script src="./vue.js"></script>
    <script>
    //vue中的class
    var vm = new Vue({
        el:"#app",
        data:{
            a:"box",
            b:"box2",
            c:true,
            d:false
        }
    })
    </script>

> 解析格式：
> 
> div :class =“a” ---->解析 div class=‘box’
> 
> div :class =’\[a,b\]’----->解析：div class=“box box2”
> 
> div :class="\{box3:c\}" ----->解析div class =“box3”
> 
> div :class="\{box3:d\}"------->解析div class=""
> 
> div :class="\[‘box3’,‘box2’,cls1,\{active:true\}\]"解析成 class=“box3 box2 box active”

### style部分 ###

<div id="app">
            <div :style="a">{
       {a}}</div>
            <div :style="wh">{
       {wh}}</div>
            <div :style="{width:100+200+'px',height:'300px',backgroundColor:'red'}"></div>
        </div>
    </body>
    <script src="./vue.js"></script>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            a:{
                height:"100px",
                width:'200px',
                background:"red"
            },
            wh:"100px"
        }
    })

> 解析
> 
> div :style:“a”
> 
> div :style:"\{width:wh\}"

# DAY03 #

## defineProperty属性 ##

defineProperty：

es5中：Object.defineProperty()

作用：给一个对象定义属性(可以定义没有属性或者存在属性)

是vue mvvm底层内部的API

**注意：Object.defineProperty不兼容IE8及其以下的版本，所以vue不兼容vueIE8及其以下的浏览器**

基本语法：
    
    Object.defineProperty(obj,"属性",{
    
    set:function(){console.log("a属性获取了")},
    
    get:function(){console.log("a属性设置了")}
    
    })

get：名叫getter,获取拦截器，没有return就没有值

set：全名setter，称为设置拦截器

下面是案例：

## MVVM原理 ##

> 当我们创建一个实例（new Vue、组件），vue就会去遍历，new Vue传入的对象中的data属性（也是对象），将data这个对象中的所有的属性 通过 Object.defineProperty()转换成getter/setter,每个实例都有一个watcher(观察者)，观察这些getter/setter是否触发，触发之后，在观察者的回调中，去调用render（re-render）函数,生成虚拟dom

### 什么是虚拟dom? ###

> 就是利用 js对象的结构 描述一段dom结构

<div id="box" class="cls">
    <p id ="p">aa</p>
    <span>dwdw</span>
    我是文本内容
    </div>
    
    
    
    下面是虚拟dom的样式：
    {
    	tag:"div',
    	props:{
    		id:"box",
    		className:"cls"
    	},
    	children:[
                {
                    tag:"p",
                    props:{
                    id:"p"
                    },
                    children:['aa']
                },
                {
                    tag:"span",
                    props:{},
                    children:["dwdw"];
                },
    	"我是文本内容"
    	]
    }

### 为什么用虚拟dom? ###

> 页面首次渲染，渲染成功后，会生成一段初始虚拟dom存在内存中，当数据更新时，立即重新生成新的虚拟dom，新的虚拟dom会和上一次内存中保存虚拟dom（数据未改变前真实dom结构映射）进行比较（diff算法），得到最少dom操作，更新真实dom,同时会更新内存中的虚拟dom

## 循环中为什么要加key ##

相当于电影院中座位表
      diff算法 在逐层比较时，会按照 相同key进行比较，加key之后，就相当于给这一行的 某个元素 加了一个独一无二的标识 方便进行比较

<div v-for=""      :key="cls"></div>(变动态是为了变成独一无二的key)

## vue中的选项卡 ##

**注意：**

**1. 只要是一一对应关系都可以用选项卡**

**2.vue是数据驱动的，尽量不要操作dom**

下面是选项卡的写法

## todolist布局以及渲染 ##

### 布局以及渲染 ###

### 交互 ###

<div id="app">
            <div class="input-group" style="margin:20px auto;width:600px">
                <input 
                type="text"
                v-model.trim="inputTxt"
                class="form-control" placeholder="输入内容" aria-describedby="basic-addon1">
                <button 
                type="button" 
                @click="addTodo()"
                class="btn btn-success">增加事项</button>
            </div>
            <div class="center-block " style="width:600px;margin-top:30px">
                <ul class="list-group">
                    <li 
                    v-if="!todos.length"
                    class="list-group-item clearfix">
                        没事可干，请添加
                    </li>
                    <li
                    v-for="(todo,index) in todos" 
                    :key="index"
                    class="list-group-item clearfix" >
                        <span class="pull-left">{
        {
        todo.content}}</span>
                        <div class="pull-right">
                            <button 
                            :disabled="todo.isComputed"
                            class="btn btn-primary btn-xs"
                            @click="setState(index)"
                            >{
        {
        todo.isComputed?"已完成":"点击完成"}}</button>
                        <button 
                        @click="delTodo(index)"
                        class="btn btn-danger bnt-xs">删除</button>
                        </div>
                    </li>
                </ul>
            </div>
    
        </div>
    </body>
    <script src="./vue.js"></script>
    <script>
    const vm  = new Vue({
        
        el:"#app",
        data:{
        
            inputTxt:"",
            todos:[]
        },
        methods:{
        
            addTodo(){
        
                if(!this.inputTxt){
        
                    alert("请输入待办事项");
                    return;
                }
                this.todos.unshift({
        
                    content:this.inputTxt,
                    isComputed:false
                })
                this.inputTxt="";
            },
            delTodo(index){
        
                if(confirm("你确定要删除吗？")){
        
                    this.todos.splice(index,1);
                }
            },
            setState(index){
        
                this.todos[index].isComputed =true
            }
        }
    })

## 解决页面刷新刚打开时闪烁 ##

> 产生原因：
> 
> 代码执行顺序是从上往下，在vue实例还没有作用到HTML上的时候，此刻我们的模板，只是单纯的字符串
> 
> 实例作用到HTML上，模板开始解析

> 解决方法：给闪烁的部分加上v-cloak(作为属性)，写上
> 
> \[v-cloak\]\{display:none\};

[v-cloak]{
            display:none;
        }
    </style>
    <body>
        <div id="app">
            <div class="input-group" style="margin:20px auto;width:600px">
                <input 
                type="text"
                v-model.trim="inputTxt"
                class="form-control" placeholder="输入内容" aria-describedby="basic-addon1">
                <button 
                type="button" 
                @click="addTodo()"
                class="btn btn-success">增加事项</button>
            </div>
            <div class="center-block " style="width:600px;margin-top:30px">
                <ul class="list-group">
                    <li 
                    v-if="!todos.length"
                    class="list-group-item clearfix">
                        没事可干，请添加
                    </li>
                    <li
                    v-for="(todo,index) in todos" 
                    :key="index"
                    class="list-group-item clearfix"
                    v-cloak >
                        <span class="pull-left">{
       {todo.content}}</span>
                        <div class="pull-right">
                            <button 
                            :disabled="todo.isComputed"
                            class="btn btn-primary btn-xs"
                            @click="setState(index)"
                            >{
       {todo.isComputed?"已完成":"点击完成"}}</button>
                        <button 
                        @click="delTodo(index)"
                        class="btn btn-danger bnt-xs">删除</button>
                        </div>
                    </li>
                </ul>
            </div>

> 在vue没作用到HTML上，让其隐藏；当vue作用到HTML上之后，vue移除v-cloak属性，再次显现

## 表单修饰符 ##

结合v-model使用

> .lazy:将v-model由input事件触发改为change事件触发
> 
> .trim:去除开头和结尾空格
> 
> .number:将输入的值过滤成数字（按照parseInt的规则来，前面的空格不算；如果无法过滤就原样输出）

## 购物车 ##

简单初步代码

**注意事项：CheckBox事件用change，不然落后一步**

下面增加了增加功能：

**注意：因为引用类型地址指向，会出现修改时增加的跟着修改的bug，需要浅克隆或者深克隆**

希望引用类型值传递的时候重新开辟内存空间

浅克隆：只是克隆对象的第一层，对象里面的对象拿到的是地址，改变对象内对象也会改变原来对象内对象；一般扩展运算符解析

let obj ={
        
        a:10,
        b:20
    }
    let obj2 ={
        
        ...obj
    }

深克隆：

//什么是值传递：var obj = obj2;
    //var obj={}叫重新开辟空间
    var obj2 ={
        
        a:10,
        b:20,
        c:{
        
            x:"锤子"
        }
    }
    var obj =JSON.parse(JSON.stringify(obj2));//这就是一个深克隆

合并对象：

let obj3 = Object.assign(obj,obj2)//浅克隆

# DAY04 #

## mvvm操作过程中的一些bug ##

vue某些情况，会导致数据刷新·，视图不更新

**问题一：new一个实例时，初始并没有在data中定义，而是在后面动态添加的属性，vue检测不到他的变化，会导致数据更新视图不刷新**

<div id="app">
        <button @click="addData()">增加一个data</button>
        <button @click="add()"> 增加</button>
        <ul v-if="arr">
          <li v-for="item in arr" :key="item">{
        {
        item}}</li>
        </ul>
      </div> 
    
    const vm = new Vue({
        
        el: "#app",
        data: {
        
    		obj{
        
            	a:10;
        	}
        },
        methods: {
        
          addData() {
        
            this.arr = [];
          },
          add() {
        
            console.log(this.arr);
            this.arr.push(1);
          }
        }
      })
      
      //这个例子只能先addDate再add

> 这就涉及到了MVVM的原理：初始化的时候data内部为空，没有getter和setter，观察者也就监视不到.
> 
> 注意是不能添加根级别的，像obj就是根级别的，obj.a就不是根级别的

**解决方案：**

> 所有数据都在data中先定义好（给定初始值）

**问题二：**

defineProperty的bug：

<div id="app">
        <ul>
          <li
          v-for="(item,index) in arr"
          :key="index"
          @click="change(index)"
          >
          {
        {
        item}}
        </li>
        </ul>
      </div>
    </body>
    <script src="./vue.js"></script>
    <script>
    const vm = new Vue({
        
      el:"#app",
      data:{
        
        arr:[1,2,3,4,5]
      },
      methods:{
        
        change(index){
        
          this.arr[index] = 0; 
            console.log(this.arr);//数据发生了变化，但视图没变
            Vue.set(this.arr,index,0);//解决方法
        }
      }
    })

**产生原因一：**

> Object.defineProperty无法追中到数组\[下标\]=值

之前的是数组\[下标\].属性= 值，是可以追踪到的

**解决方法:**

> set：
> 
> 调用·这个方法有两种方式：Vue.set或者this.$vue
> 
> 语法格式：Vue.set(对象，属性，值)；//相当于手动调用render刷新

**产生原因二：**

> 数组.length = 值；

**解决方法**

> 使用arr.splice()取代arr.length操作

## vue3 mvvm的原理 ##

在vue3里面解决上面defineProperty的bug

es6 proxy代理：

代理和defineProperty不同的地方在于：你所有的操作都要操作那个代理，defineProperty不需要操作直接拦截

## 获取dom ##

<div id="app">
        <div ref="c" id="box"></div>
        <button
        ref="a"
        >按钮</button>
        <div 
        style="width:100px;height: 100px;" 
        ref="b"
        ></div>
      </div>
    </body>
    <script src="./vue.js"></script>
    <script>
    const vm  =new Vue({
        
      el:"#app",
      mounted(){
            //vue实例创建全部完毕后自动执行
        console.log(document.querySelector("#box"));//节点
        console.log(this.$refs);//输出对象：键为ref值，值为写了ref值对应的标签
        this.$refs["b"].style.background="red";//获取box
      }
    })

### 动态生成元素的获取 ###

<body>
      <div id="app">
        <button @click="add">增加arr</button>
        <ul ref="oul">
          <li 
          @click="add()"
          v-for="item in arr">
            {
        {
        item}}
          </li>
        </ul>
      </div>
    </body>
    <script src="./vue.js"></script>
    <script>
      var vm = new Vue({
        
            el: "#app",
            data: {
        
              arr: [1, 2, 3, 4]
            },
            methods: {
        
              add() {
        
                this.arr.push(this.arr.length + 1);
                this.$refs["oul"].lastChild.style.background="blue"
              }
            }
      })

> 当数据改变时（改变数据时同步） 视图刷新（更新dom，异步，中间要通知观察者，调用render生成虚拟dom，比较两个虚拟dom,用diff算法，在更新）

所以我们无法立即获取数据改变后生成的最新的dom

vue提供了一个watcher(观察每一次的dom更新操作，更新完成后回调触发，在回调中获取最新的dom)

语法：
    this.$nextTick(()=>{
        
        //这里获取最新的dom
    })
    Vue.nextTick

相关推荐文章链接：https://www.jianshu.com/p/a7550c0e164f

## 侦听器 ##

作用：监听实例上某个属性值的变化

<div id="app">
        <input 
        v-model="msg"
        type="text"
        placeholder="不是对象">{
       {msg}}
        <input 
        v-model="obj.a"
        type="text"
        placeholder="是对象"
        >{
       {obj.a}}
      </div>
    </body>
    <script src="./vue.js"></script>
    <script>
      const vm =new Vue({
        el:"#app",
        data:{
          msg:"",
          obj:{
            a:"",
            b:""
          }
        },
        watch:{
          msg(newVal,oldVal){
            console.log("值变化了，新值是："+newVal+"旧值是："+oldVal)
          },
          // obj(newVal,oldVal){
          //   //引用类型比较的是地址，即使里面的属性值变了，但是地址不变，那么这个函数就不会执行
          //   console.log("值变化了，新值是："+newVal+"旧值是："+oldVal)
          // }
    
    
          "obj.a"(newVal,oldVal){
            console.log(`值变化了，新值是${newVal},旧值是${oldVal}`)
          },
          obj:{
            handler(newVal,oldVal){
              console.log(`值变化了，新值是${newVal},旧值是${oldVal}`)
            },
            deep:true
          }
        }
      })
    </script>

> 监听对象：直接新增同名方法是无法监听的
> 
> 方法一：直接监听该对象的属性
> 
> 新增 “对象.属性”()\{\}这样的方法
> 
> 方法二：监听对象（深度监听）
> 
> obj:\{
> 
> handler(newVal,oldVal)\{\}.
> 
> deep:true;
> 
> \}

实际案例：

<body>
      <div id="app">
          <input
          v-model="firstName"
          type="text">
          <input
          v-model="lastName"
          type="text">
          {
        {
        fullName}}
      </div>
    </body>
    <script src="./vue.js"></script>
    <script>
        var vm  =new Vue({
        
          el:"#app",
          data:{
        
            firstName:"",
            lastName:"",
            fullName:""
          },
          watch:{
        
            firstName(newVal){
        
              this.fullName =newVal+"."+this.lastName;
            },
            lastName(newVal){
        
              this.fullName=this.firstName+"."+newVal;
            }
          }
        })

## 计算属性 ##

vue不希望的写法：\{ \{msg.split("").reverse().join("")\}\}

\{ \{\}\}初衷只是渲染数据的

computed:在实例上新增一个值，这个值是依赖属性上已经存在的另外一个值的

依赖的好处是：我依赖的值变了，他会自动变了

写法是函数，编译到实例上是属性

使用场景：

> 使用一个数据时，并不是原样的使用，需要处理后再使用，此时可以新建一个计算属性依赖原数据

新增computed属性，在这个属性中，新增一个方法，在这个方法中return值
    
    重点是：计算属性写法是一个函数，但是编译到实例上的是一个值

**计算属性和平常方法的区别**

<div id="app">
       <input v-model="data" type="text" />
      {
       {reverseMsg}}
      {
       {reverseMsg}}
      {
       {reverseMsg}}
      {
       {reverseMsg}}
      <hr>
      {
       {reverseMsg2()}}
      {
       {reverseMsg2()}}
      {
       {reverseMsg2()}}
      {
       {reverseMsg2()}}
      </div>
    </body>
    <script src="./vue.js"></script>
    <script>
        var vm  =new Vue({
          el:"#app",
          data:{
            msg:"hello vue"
          },
          methods:{
            reverseMsg2(){
              console.log("方法调用了");//输出了四次
              return this.msg.split("").reverse().join("")
            }
          },
          computed:{
            reverseMsg(){
              console.log("计算属性调用了");//输出了一次
              return this.msg.split("").reverse().join("")
            }
          }
        })
    </script>

### 计算属性的优势 ###

1.  计算属性在首次计算后，会基于依赖（可以依赖多个值）进行缓存，首次计算后的值
    
    > 在多次使用计算属性时，如果依赖的值没有变化，不会重新调用，而会使用缓存的值

**注意：**

> 1.  新增一个计算属性时，不要和·data中已经存在的或者实例上已经存在的其他属性重名
> 2.  默认计算属性是不能被修改的，因为会破坏他和他的依赖之间的关系（计算属性的值就是上面的reverseMsg，不能直接给reverseMsg赋值）
> 
> 如果要修改，应该去修改依赖（不能直接修改，但是还是可以修改的）

下面是计算属性完整的写法：

computed:{
        reverseMsg:{
    		get(){
    			return this.msg.split("").reverse().join("")
    		},
    		set(val){
    			console.log("设置值了"+val)
    		}
        }
    }

[计算属性推荐链接][Link 1]

## 组件 ##

mvvm  
vue特点：一、数据驱动；二：组件化

**组件的定义：**

网页上的组成部分

**组件分成预定义的组件和自定义的组件**

网页上预定义组件就是标签

组件分为全局组件和局部组件

1.  全局组件：挂载到Vue上，可以在任意组件以及实例的模板上使用
2.  局部组件：挂载到其他的组件或者实例上，只能在挂载的实例上使用

*  **组件语法**：

//组件也是Vue的实例(new Vue有的属性，组件也有)
    
    
    
    
    html部分
    <div id="#app">
        <common-head></common-head>
        
    </div>
    
    
    js部分
    
    //局部组件
    const subTitle = {
        
        template:`
            <div>我是一个局部组件</div>
            {
         {title}}
        `,
        data(){
        
            return {
        
                title:"我是局部组件的数据"
            }
        }
        
    }
    
    //全局组件
    const CommonHead={
        
        template:`
            <div>
                <h1>我是公共的头部</h1>
                {
         {msg}}
                <button @click="changeMsg">按钮</button>
                <h2>嘿嘿嘿</h2>
                <sub-title></sub-title>//局部组件使用范围
            </div>
        `,
        data:{
        //data在这里形成了一种闭包
            return {
        
                msg:"我是组件的数据"
            }
        },
        methods:{
        
            changeMessage(){
        
                this.msg = "我改变了"
            }
        }，
        components:{
         //放当前组件的子组件
            subTitle
        }
    }
    Vue.component("CommonHead",CommenHead);
    const vm = new Vue({
        
        el:"#app
    ")

全局组件注意点：

1.  template必须有且只有一个根组件（除非使用v-if或者v-else-if才能出现多个）
2.  data属性必须是一个方法，返回这个对象；组件会被复用（闭包形成了自己的作用域，每次都会开辟自己的空间，多次使用不会互相影响）
3.  组件有自己的作用域，属性方法等只能在自己内部使用
4.  命名推荐大驼峰,或者加中划线的形式

局部组件的注意点：

1.  局部组件是在其他组件的components属性中注册  
    注意只能在注册的组件的template使用，无法在外部使用

在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。

# 组件关系 #

由于组件的嵌套使用，形成了父子，兄弟关系

## 父向子通信 ##

const SubTitle = {
        
        template: `
            <div>
              我是一个局部组件 
              {
         { title }} 
              {
         { title2 }}
              {
         { title3 }}
            </div>
          `,
        props: ['title', 'title2'], // properties ，  
        //接收属性，挂载到子组件上，注意不要和子组件重名 
        data() {
        
          return {
        
            title3: '自己内部的数据'
          }
        },
      
    
      }
    
    
      const Home = {
        
        tmeplate: `
        <div>
              <h3>home</h3>
              //放在这里传输
              <sub-title title="我是home传的标题" :title2="msg"></sub-title>
            </div
        `,
        data(){
        
          return {
        
            msg: '我是home组件的数据'
          }
        },
        methods: {
        
          changeMsg() {
        
            this.msg = "数据改变了"
          }
        },
        components: {
        
          SubTitle
        }
      }
      Vue.component("Home", Home);
      const vm = new Vue({
        
        el: "#app",
      })

prop验证

对于数据类型的严格验证

const SubTitle = {
        
        template: `
            <div>
              我是一个局部组件 
              {
         { title }} 
              {
         { num*100 }}
              <div v-for="i in arr">
                <button>{
         {i}}</button>
              </div>
            </div>
          `,
        props: {
        
          title:{
        
            type:[String,Number],
            require:true
          },
          num:{
        
            type:Number,
            default:1,
          },
          arr:{
        
            type:Array,
            default:()=>[1,2,3,4]//对象和数组需要这么传
          }
        }
      }
    
    
      const Home = {
        
        template: `
        <div>
              <h3>home</h3>
              <sub-title :title="title" :num="num"></sub-title>
        </div>
        `,
        data(){
        
          return {
        
            msg: '我是home组件的数据',
            title:1,
            num:undefined
          }
        },
        methods: {
        
          changeMsg() {
        
            this.msg = "数据改变了"
          }
        },
        components: {
        
          SubTitle
        }
      }
      Vue.component("Home", Home);
      const vm = new Vue({
        
        el: "#app",
      })

### 下面是小总结： ###

父向子通信：props通信

> 通过props

下面是格式

=====》子组件中：
    
    
    定义props属性；props是一个数组，数组中定义待接收的属性列表
    
    props接收列表会渲染到组件实例的实例上，跟data中的数据是同一级别的
    
    注意props的key不要和实例中已存在的实例重名（比如data中的属性以及计算属性）
    
    
    使用：
    const Child = {
        template:`
            <div>
            {
       {title}}
            {
       {title2}}
            </div>
        `,
        props:['title','title2']
    }
    
    const Father = {
        template:`
            <div>
            <child title="父组件的静态数据"
            :title2="msg"
            ></child>
            </div>
        `,
        data(){
            return {
                msg:"父组件中动态数据"
            }
        }
    }

props验证

{
        
        props:{
        
            a:String,//只验证类型，可以简写，直接写类型的值
            b:[String,Number]//只验证类型，类型有多个就放到数组中
            c:{
        
                type:String,
                require:true
            },
            d:{
        
                type:Number,
                default:10
            },
            e:{
        
                type:Array,
                default:()=>[1,2,3,4]
                //类型是数组或者对象，默认值应该是函数返回默认值
            }
        }
    }

> props设计的目的就是为了接收外面的数据，最好不要修改props（双向绑定修改会警告你，所以最好别修改）

## 子向父通信 ##

> 当你封装一个组件的时候，不要让组件做业务相关的东西（处理业务逻辑）

> 比如说，子组件里面有表单模块，不要将提交给子组件吗，而是让父组件去完成业务逻辑

> 原因：封装组件的目的是复用，把逻辑写到子组件无法复用（两个子组件的逻辑不能一模一样，最起码提交地址和传参是不一致的）

子向父通信：自定义事件emit  
$emit和jquery；里面的trigger相似

> 作用：自动触发自定义事件，并将第二个参数传过去

const subTitle = {
        
        template: `
        <div>
          这是儿子
          <button @click="shijian()">按钮</button>
        </div>
      `,
        methods: {
        
          shijian() {
        
            this.$emit("shijianer", this.msg);
          }
        },
        data() {
        
          return {
        
            msg: "这是子组件的数据"
          }
        }
      }
    
    
      const Home = {
        
        template: `
      <div>
        <h3>home</h3>
        {
         {msg}}
        <sub-title title="1" @shijianer="fn"></sub-title>
      </div>
      `,
        //fn这段代码在home里面，所以写在home的methods里面
        //fn不能传参，不然就是home里面msg的参数
        data() {
        
          return {
        
            msg: "我是home组件的信息"
          }
        },
        methods: {
        
          fn(msg) {
        //msg接收传过来的参数
            this.msg = msg;
          }
        },
        components: {
        
          subTitle
        }
    
      }
    
      Vue.component("Home", Home)
      var vm = new Vue({
        
        el: "#app"
      })

## 兄弟组件之间的通信 ##

1.利用一个第三方的实例bus(event bus)

1.  bus触发监听事件
2.  由bus触发自定义事件
3.  实例.$on(事件，回调)

注意：函数.bind(this指向的对象\[需要传入的参数\])

## 剩下的通信方式 ##

以下三种不太重要

### ref通信组件(记住) ###

如何在父组件中直接调用子组件的方法：
    
    ref,$emit不算是直接调用
    
    this.$refs.child获取子组件的实例
    this.$refs.child.xx   直接获取子组件的的data中的数据
    this.$refs.child.xx()直接调用子组件中的方法

###  p a r e n t 和 parent和 parent和children ###

$parent直接拿到父组件的实例
    $children直接拿到子组件的内容

### provide inject ###

# Week2 #

## 插槽 ##

> 意义：子组件在不同的父组件中使用时，内部结构可以实现不一样

//子组件中，定义一个插槽(占位符):<slot/>
    //在父组件的template中插入的子组件标签内写：需要替换到<slot/>处的内容（最好套个根标签）
    
    const Child = {
        
        template:`
           <div>
                <h2>我是子标签头</h2>
                    <slot/>
                <h2>我是子标签尾</h2>
           </div> 
        `
    }
    const Father = {
        
        template:`
            <div>
                <h2>我是根标签</h2>
                <child>
                    <div>
                        <button>按钮</button> 
                    </div>
                </child>
            </div>
        `,
        components:{
        
            Child
        }
    }
    const vm = new Vue({
        
        el:"#app"
    })

## 具名插槽 ##

> 可以在子组件内部定义多个插槽（加上name）,可以实现组件在不同组件中，多个内容不一样.

//子组件tenplate:
      <div>
                    <h3>我是子组件头</h3>
                    <slot name="a" />
                    <h3>我是子组件尾</h3>
                    <slot name="b"/>
                </div>
    //父组件template:
     <div>
        <h2>我是home页</h2>
        <child>
            <button slot="b">按钮</button> 
             <ul 
                slot="a"
                v-for="el in arr"
                :key="el"
                >{
        {
        el}}
            </ul>
        </child>
             
            </div>`

> solt加上name标签，追加部分加上slot标签

### 动态组件component is属性（很不常用） ###

两个子组件名字是

*  Child1,Child2
 *  父组件中： (前提是父组件中注册child1和child2)

推荐链接(想要深入了解看看)：https://blog.csdn.net/qq\_41617089/article/details/101108843

## 组件template的其他定义方式（写在外面） ##

### 方式一 ###

### 方式二:使用template标签作为根目录 ###

将前面后加上的的script改为template，将type去掉即可

## 组件的生命周期(重点) ##

组件从初始化到销毁的过程

1.初始化实例

> 初始化实例上面的属性和方法  
> 挂入数据以及进行数据的追踪（其实就是之前的数据的劫持，实现数据响应变化，详情见之前的defineProperty）

2.DOM的挂载（也称为模板的挂载，将组件的template编译成虚拟的dom再编译成真实的dom，挂载到页面上）

> 判断有没有el属性，没有就判断有没有外部挂载;

> 然后再判断有没有template；有的话将你的template挂载到render函数上面（生成了虚拟DOM），

> 然后再挂载成真实的DOM

3.数据更新（数据更新导致模板的更新）

4.组件卸载

## 生命周期常见钩子函数 ##

**运行时打印哪些**

> 前四个：初始化和生成DOM树挂载  
> 没有数据更新，第一次都是直接加载的，不是更新

hooks(生命周期钩子函数)：在组件不同生命周期阶段中，自动运行的函数

一定要背下来，还要知道干什么用的
    
    
    初始化阶段：
        beforeCreate：刚刚调用new Vue还没有去劫持data中的数据（不能操作数据）.
        created:实例创建完成、数据已经灌入、已经劫持data，data中数据已经是响应式的（可以操作数据了）.
    
    
    
    
    DOM挂载:模板渲染（将组件的template编译成虚拟DOM，然后再变成真实的DOM挂载在页面上）
        beforeMounte：组件首次加载，在模板渲染之前触发
        mounted：组件首次加载，模板渲染完毕后出发，在这里可以获取真实DOM
    
    
    数据更新阶段：
        beforeUpdate：数据更新，模板重新渲染挂载之前，在这里获取不到更新后的DOM
        updated:数据更新，视图已经渲染完成了，在这里可以获取更新后最新的 DOM
        
    组件卸载：
        beforeDestroy：组件卸载之前（实例的方法还可以调用）
        destoryed:组件卸载完成了（实例没了）

比较重要的是created，mounted,updated,beforeDestroy

1. 场景一：页面打开，初始的数据请求应该在那个钩子函数中

> 范围肯定是初始化和挂载这两个部分；数据请求成功之后需要渲染，最好在created里面调用（页面初次的ajax请求，函数调用最好在在created里面调用，在mounted里面也行）

场景二：update和beforeUpdate

> 动态增加时获取dom元素的数量不一致（beforeUpdate获取不到最新的DOM）

场景三：组件内部的定时器和window对象方法写在全局，销毁组件也无法销毁

> 在组件内部的beforeDestroy内部销毁事件和定时器

## 另外两个钩子函数（项目里面再说，这里不说多） ##

*  activated :组件再一次被激活时使用
 *  deactivated：组件隐藏时触发

组件在隐藏(v-if的时候，可以缓存起来，不销毁 )

<div id="app">
        <button @click="changeState">{
        {
        isShow?'隐藏':'显示'}}</button>
        <keep-alive>
          <home v-if="isShow"></home>
        </keep-alive>
      </div>
      <template id="tpl">
        <div>
          <h1>我是home页</h1>
          <input type="text" v-model="msg">
        </div>
      </template>
      <script src="./vue.js"></script>
      <script>
       
        const Home = {
        
          template:"#tpl",
          data(){
        
            return {
        
             msg:""
            }
          },
          methods:{
        
          },
          beforeCreate(){
        
            console.log('beforeCreate')
          },
          created(){
        
            console.log("created")
          },
          beforeMount(){
        
            console.log('beforeMount')
           
          },
          mounted(){
        
            console.log('mounted')
           
          },
          beforeUpdate(){
        
            console.log('beforeUpdate')
            
          },
          updated(){
        
            console.log('updated')
           
          },
          beforeDestroy(){
        
            console.log('组件卸载之前');
          
          },
          destroyed(){
        
            console.log("组件已经卸载")
          },
          activated(){
        
            console.log("组件再一次被激活的时候调用")
            // 被keep-alive 缓存组件 在 再一次被激活（显示出来）时触发,在这里做 缓存组件 数据 局部刷新
          },
          deactivated(){
        
            console.log('组件再一次隐藏了')
            // 被 keep-alive 缓存组件 在再一次隐藏时触发，可以在这里 清除定时器、注销全局事件
          }
        }
        
        Vue.component('Home',Home)
        const vm = new Vue({
        
          el:"#app",
          data:{
        
            isShow:true
          },
          methods:{
        
            changeState(){
        
              this.isShow = !this.isShow
            }
          }
        })
      </script>
      
      
     //初始化加载beforeCreate,created,beforeMount,mounted,activated

> 自己的小测试：vm.isShow可以让组件获取到vm实例上的值

# DAY7 #

### 过渡transition ###

> 作用：控制单组件（标签的切换状态）

> 虽然说是只能控制单个标签，但是可以通过v-if v-else-if v-else来控制（注意·要加上key区分，不然没效果）  
> 前提：永远不可能同时出现两个  
> 如果想要控制列表动画（同时控制多个元素），使用transition-group组件，用法相同

css部分
              .box {
         
                width: 200px;
                height: 200px;
                background-color: rgb(33, 43, 172)
            }
            .lisa-enter {
        
                transform:translateX(-500px) rotate(360deg);
                opacity: 0;
            }
            .lisa-enter-active,.lisa-leave-active {
        
                transition:all 1000ms;
            }
            .lisa-leave-to {
        
                transform:translateY(500px) rotateX(-720deg);
                opacity: 0;
            }
        html部分：
             <div id="app">
                <button @click="fn">{
        {
        isShow?'隐藏':"显示"}}</button>
                <transition name="lisa">
                    <div class="box" v-show="isShow"></div>
                </transition>
            </div>
        javascript部分
            const vm = new Vue({
        
                el: "#app",
                data: {
        
                    isShow: true
                },
                methods: {
        
                    fn() {
        
                        this.isShow = !this.isShow;
                    }
                }
            })

入场动画：

入场动画：
        .ani-enter:定义入场初始动画
        .ani-enter-active:定义初始状态到最终显示状态中间的过渡效果
    出场动画：
        .ani-leave-to:定义 出场的最终的状态
        .ani-leave-active:定义出场的初始状态----->最终状态中间的过渡效果

![image][]

transition组件通过条件渲染包裹多个元素

<transition name="ani">
        <组件 v-if="xxx"/>
        <组件 v-else=>
    </transition>
    
    
    
    //此时应该使用mode属性（解决出场和入场同时进行的问题），写在transition上面
    默认是同时进行
    可选值：
    out-in:先出去再进来(推荐使用)
    in-out：先进来再出去

## transition结合动画 ##

只需要记住v-enter-active和v-leave-active即可  
定义动画  
@keyframes 动画名称\{  
0%\{\}  
25%\{\}  
50%\{\}  
75%\{\}  
100%\{\}  
\}

**示例**

animation动画库:  
swiper上面的animation.css

## vue组件的混入（mixins） ##

当多个组件都有相同的部分时使用

> 当多个组件都有相同的部分（可以是属性、数据、方法…只要组件有api都可以）

<body>
        <div id="app">
            <home></home>
            <hr>
            <news></news>
        </div>
    </body>
    <template id="tpl">
        <div>
            <h1>我是home组件</h1>
            {
        {
        isShow?'傻狗':"土狗"}}
            <button
            @click="change"
            >按钮</button>
        </div>
    </template>
    <template id="tpl1">
        <div>
            <h1>我是news组件</h1>
            {
        {
        isShow?'傻狗':"土狗"}}
        </div>
    </template>
    <script src="./vue.js"></script>
    <script>
        //定义一个混入
        const mixin= {
        
            data(){
        
                return {
        
                     isShow:true
                }
            },
            methods:{
        
                change(){
        
                    this.isShow = !this.isShow;
                }
            }
        }
        const Home = {
        
            template:"#tpl",
            data(){
        
                return {
        
                    isShow:false//这里·data优先级是高于外面的mixin里面的
                }
            },
            mixins:[mixin]//这里是引入方式
        }  
        const News = {
        
            template:"#tpl1",
            mixins:[mixin]
        }  
        Vue.component("Home",Home);
        Vue.component("News",News);
        const vm =new Vue({
        
            el:"#app"
        })

## 过滤器 ##

\{ \{\}\}是渲染数据的，过滤器在渲染数据的时候，可以过滤(加工一下输出)

> 使用过滤器\{ \{num|过滤器名称\}\}

//全局过滤器
        Vue.filter("fil",(v)=>{
        
            return "￥"+v
        })
        
        
        const vm = new Vue({
        
            el:"#app",
            data:{
        
                num:100
            },
            //下面是局部的写法
            filters：{
        
                fil(v){
        
                    return "$"+v
                }
            }
        })

> 使用过滤器并传参\{ \{num|过滤器名称(\[…params\])\}\}

<div id="app">
            {
        {
        num|fil("$")}}
        </div>
        Vue.filter("fil",(v,sign="￥")=>{
        
            return sign+v
        })
        const vm = new Vue({
        
            el:"#app",
            data:{
        
                num:100
            }
        })

> 过滤器串联\{ \{num|过滤器1|过滤器2|过滤器3\}\}

## 自定义指令 ##

全局指令

Vue.directive("指令名",{
        
            钩子函数:函数
    })

钩子函数有哪些

bind：元素第一次绑定到元素上使用(只执行一次)  
unbind:只调用一次，元素解绑时使用

<div id="app">
            <input type="text" v-focus>
        </div>
    </body>
    <script src="./vue.js"></script>
    <script>  
    Vue.directive("focus",{
        
        bind(){
        
            //指令绑定到元素上时触发只触发一次
            console.log("我执行了");
        }
    })  
    const vm  =new Vue({
        
        el:"#app",
        data:{
        
            num:100
        }
    })
    //加载是就是第一次绑定到元素上

inserted:被绑定元素插入到父节点时使用

update:组件所在的虚拟DOM更新时调用(可能在子组件更新之前刷新)

componentUpdated:指令所在组件及其子组件全部更新完后调用

> inserted钩子，子组件刷新才触发;而update钩子函数则是父组件刷新立即触发，不会等待子组件刷新

父子组件生命周期执行顺序

> 父组件beforeCreate–>父组件created–>父组件 beforeMounted–>子组件beforeCreate–>子组件created—>子组件beforeMounte–>子组件mounted—>父组件mounted

小总结：

Vue.directive("指令名",{
        
        isnerted:{
        //初始化
            
        },
        update(){
        //页面更新
            
        },
        unbind(){
        //指令解绑的时候+
            
        }
    })

自动获取焦点：

Vue.directive（"focus",isnerted(el,binding){
        
        console.log(el)
        el.focus()
    })

局部指令

const vm =enw Vue({
        
        el："#app"，
        data:{
        
            num:100
        },
        directives:{
        
            focus:{
        
                inserted(el,binding){
        
                    el.focus()
    //binding:对象，关于当前指令的一些基本信息
                }
            }
        }
    })

> 回到顶部

<div id="#app">
        <button v-scroll="500">回到顶部</button>
    </div>
    
    Vuel.directive("scroll",{
        
        inserted(el,binding,vnode){
        
            let {
        value} = binding
        }
        window.onscroll=function(){
        
            let sTop = document.documentElement.scrollTop||document.body.scrollTop;
            if(sTop>value){
        
                el.style.display ="block"
            }else{
        
                el.style.display="none"
            }
        }
        el.onclick =function(){
        
            window.scrollTo(0,0)
        }
        ,unbind(){
        
            window.onscroll =null;
        }
    })

## 组件中的ajax ##

fetch，没看，后面很少用

# DAY08 #

## axios ##

专门处理ajax的

在github上查看

*  下载插件：

> npm i axios  
> 只使用到了axios.js这个文件

*  下面是get请求的写法

<div id="app">
        <ul>
          <li v-for="film in films" :key="film.filmId">
            <img :src="film.poster" alt="">
            <h2>{
        {
        film.name}}</h2>
          </li>
        </ul>
      </div>
    
      <script src="./vue.js"></script>
      <script src="./node_modules/axios/dist/axios.js"></script>//要放在VUE引入之后
      <script>
        const vm = new Vue({
        
          el: "#app",
          data: {
        
            films:[]//存储传过来的值
          },
          created(){
        //在创建完实例之后ajax请求
            this.fetchFilmData()
          },
          methods:{
        
            fetchFilmData(){
        
              // 封装了 请求 数据函数
              axios.get('https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2183988',{
        
                headers:{
        //请求头
                  "X-Client-Info":'{"a":"3000","ch":"1002","v":"5.0.4","e":"1597720815568988677439489","bc":"110100"}',
                  "X-Host":"mall.film-ticket.film.list"
                },
                data:{
        }
              }).then(res=>{
        //回调成功，catch回调失败，再加then就是完成(无论成功失败)
                console.log(res);
                if(res.data.status===0){
        
                    this.films =res.data.data.films
                }
              })
            }
          }
        })
        
        
        get请求可以将地址后面的search里面的query放到单独的对象里面。和headers同级
        
        
        
        
         params: {
         //get请求需要携带数据，在真实请求时，会自动放到地址栏的后面去 
                  cityId: 110100,
                  pageNum: 1,
                  pageSize: 10,
                  type: 1,
                  k: 2183988
                }

*  post请求方式

const vm = new Vue({
        
          el: "#app",
          data: {
        
            films:[]
          },
          created(){
        
            this.fetchFilmData()
          },
          methods:{
        
            fetchFilmData(){
        
              // 封装了 请求 数据函数
              axios.post('https://api.it120.cc/conner/shop/goods/list',{
        //这个对象就是请求携带的数据，会自动挂载到请求体上
                   a:10
              }).then(res=>{
        
                console.log(res);
                if(res.data.status===0){
        
                    this.films =res.data.data.films
                }
              })
            }
          }
        })
      </script>

*  axios综合请求

axios({
        
        url:"xxx",
        params:{
        },//get请求携带的参数
        data:{
        }//post请求参数
        ，headers{
        }
    })

*  创建一个axios的实例

const request = axios.create({
        
        baseURL:"基础的url"，
        timeout:5000//请求超时时间
        headers：{
        }
    })
    
    //定义baseURL好处是：使用request其他的方法来请求一个接口，此时请求的真正的url是baseURL+请求时的URL
    
    //创建实例时传的参数，可以作用在所有使用实例的请求中
    
    
    request.get();//get请求
    request.post();//post请求
    request();//直接请求
    
    
    axios有那些请求方法，实例就有哪些，用法一模一样

## axios拦截器 ##

## vue路由(重点) ##

vueRouter是基于vue前端路由库(设计成vue的插件)  
让前端实现SPA（signal page application）**单页面应用**

spa优点:切换速度快（加载速度快）

缺点：前端渲染（nuxt解决SEO问题）  
不利于（搜索引擎优化）SEO，因为页面内容少，搜索引擎SEO和爬虫很相似，**不利于爬虫抓取信息**

需要下载vue-router插件(引入在vue.js之后)

//定义路由组件
    const Home ={
        
        template:`
            <div>
                <h1>home页</h1>
            </div>
        `
    }
    const News ={
        
        template:`
            <div>
                <h1>news页</h1>
            </div>
        `
    }
    const About ={
        
        template:`
            <div>
                <h1>about页</h1>
            </div>
        `
    }
    
    
    //路由规则
    const routes = [
        {
        
            path："/home",
            component:Home
        },
        ...
    ]
    
    
    //创建路由对象
    const router = new VueRouter({
        
        routes//这里将路由对象写在外面（ES6语法）
    })
    const vm =new Vue({
        
        el:"xxx",
        router//引入路由对象
    })

在html模板上使用来占位，路由组件内的template内容将加载到那里

router-link写在router-view里面，实现路由之间的跳转  
router-link属性：to="/home(地址)" tag=“button(跳转以按钮的形式)”

<router-view>
        <router-link to="/home"  tag="button"></router-link>
    </router-view>

解决 / 路由需要默认显示某个组件的问题

*  方案一：新增路由规则  
    \{  
    path:"/",  
    component:Home  
    \}  
    这个方案是会丢失router-link标签上面用router-link-active(类)创建的样式
 *  方案二；重定向：推荐使用  
    \{  
    path："/",  
    redirect:"/home"重定向，将指向Home组件  
    \}

# Day8 #

## 动态路由 ##

就是path后面跟上参数

当vue-router引入时，如果是直接script，src引入的话，自动往构造函数的原型中添加一个属性$route保存当前路由的基本信息  
组件也是实例

> 所有的组件可以通过this.$route获取路由的基础信息  
> 动态路由就是在路由规则内加上变量

{
        
        path:"/home/:id",
        component:Home
    }
    
    router-link="/news/2"   id的值就是二
    这里的id就是变量
    
    
    获取：
    this.$route.params.xxx
    
    
    
    
    
    //path:
    {
        
        path:"/a/:b/c/:d"
    }
    跳转路径；/a/b/c/d
    结果是：
    this.$route.params
    {
        
        b:"b",
        d:"d"
    }

代码：

## 监听动态路由参数变化 ##

就是监听动态路由那个变量的变化

## 嵌套路由 ##

还是以news组件为例

{
        path:"/news",
        component:News,
        children:[                  //这里加上二级组件的规则
            {
                path:"/news/nactive",
                component:NactiveNews
            },{
                path:"/news/abroad",
                component:AbroadNews
            }
        ]
    }
    
    
    const News ={
        template;`
            <div>
                <h1>新闻页</h1>
                <router-link to="/news/nactive">国内新闻</router-link>
                <router-link to="/news/nactive">国外新闻</router-link>
                <router-view></router-view>
            </div>
        `
    }
    
    
    
    二级路由前面的/news可以去除，但是以及路由的高亮(就是背景样式)消失
    
    二级路由的path最好加上一级路由的path作为前缀
    .router-link-active是模糊匹配，只要包含news路径就可以了
    router-link-exact-active是精准匹配，需要到具体的路由

## 命名路由 ##

给每个路由规则新增name，相当于给每个路由起个名字

routes=[
    {
        
        path:"/home",
        name:"首页",
        component:xxx
    }
    ]

Invalid shorthand property initializer：键值对之间的连接错误

## 命名视图（不重要） ##

一个路由对应一个组件，如何实现一个路由对应多个组件

<div id="app">
            <router-view name="a"></router-view>
            <router-view name="b"></router-view>
            <router-view name="c"></router-view>
        </div>
        
        
        
        const Home = {
        
            template: `
            <div>
                <h2>这是home页</h2>
            </div>
        `
        }
        const Home2 = {
        
            template: `
            <div>
                <h2>这是home2页</h2>
            </div>
        `
        }
        const Home3 = {
        
            template: `
            <div>
                <h2>这是home3页</h2>
            </div>
        `
        }
    
    
    
        const routes = [
            {
        
                path:"/home",//一个路由
                components:{
        //多个组件
                    a:Home,
                    b:Home2,
                    c:Home3
                }
            }
        ];
        const router = new VueRouter({
        
            routes
        })
        const vm = new Vue({
        
            el: "#app",
            router,
        })

可以只有一个不写名字，规则写上default代替即可

components:{//多个组件
                    default:Home,
                    b:Home2,
                    c:Home3
                }

## 编程式导航 ##

声明式导航：利用组件跳转路由（router-link）  
编程式：js内部通过方法来控制路由

当引入vue-router后，构造函数中还灌入一个对象$router  
就是路由对象实例 （new VueRouter()）

this.$router.push()//跳转路由的，参数同router-link的to属性
    this.$router.replace()//跳转路由的，参数同router-link的to属性

栈结构解释上面两个的区别：

> push退后相当于退栈，前进相当于进栈  
> replace前进就是将之前的第二个出栈，前进页面进栈，退后就是第一个进栈的页面  
> this.$router.go(n) 0刷新，-1回退一步，正数为前进

<div id="app">
            <div id="navs">
                <router-link to="/home" tag="button">
                    home页
                </router-link>
                <button @click="enterNews">到news</button>
                <router-link to="/about" tag="button">
                    关于我们页
                </router-link>
            </div>
            <router-view></router-view>
        </div>
    </body>
    <script src="./vue.js"></script>
    <script src="../test/node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
        
            template:`
                <div>
                  <h2>我是home页面</h2>  
                </div>
            `
        }
        const News = {
        
            template:`
                <div>
                  <h2>news</h2>  
                </div>
            `
        }
        const About = {
        
            template:`
                <div>
                  <h2>about</h2>  
                </div>
            `
        }
        const routes = [
            {
        
                path:"/home",
                component:Home
            },
            {
        
                path:"/news",
                alias:"/a",                             //起别名
                component:News
            },
            {
        
                path:"/about",
                component:About
            },
            {
        
               path:"/",
               redirect:"/home" 
            }
        ]
        const router = new VueRouter({
        
            routes
        })
        const vm = new Vue({
        
            el: "#app",
            router,
            methods:{
        
                enterNews(){
        
                    this.$router.push("/news")
                }
            }
        })

## 路由组件传参（特别重要） ##

*  动态路由传参

{
        
        path:"/news/:id",
        component:News
    }
    //跳转时
    <router-link to="/news/2"></router-link>
    
    
    //获取时
    this.$router.params.id
    
    
    //命名路由
    //每个路由规则内name命名后，跳转路由的to属性可以变成一个对象
    <router-link :to="{name:'news',params:{a:10,b:20}}"></router-link>     //转成js环境,里面存放对象

*  params传参

不管是router-link的to属性，还是push方法的参数，他俩是一样的  
可写的值是

1.  直接写字符串，这种情况必须写path，router-link to="/news" this.$router.push("/news")
2.  参数可以是对象，route-link :to="\{name=‘home’\}" ,好处是可以以名字跳转

params传参：  
1.声明式导航  
  
2. 编程式导航：  
this.$router.push(\{name:‘news’,params:\{a:10,b:20\})

获取：  
this.$route.params.xxx

注意：

params传参必须结合命令路由一起使用，跳转时，必须要通过name跳转，否则传不过去（不要结合path）  
params传参的优点：隐式传参，地址栏看不见，缺点刷新后数据丢失

*  query传参

router-link :to="{path:'/news',query:{a:10,b:20}}"
    
    this.$router.push({
        path:"/news",
        query:{
            a:10,
            b:20
        }
    })
    获取：
    this.$route.query.xxx
    
    注意：
    优势：刷新后数据不丢失
    缺点:参数是放在地址栏上的
    query最好结合path，最好不结合name

<div id="app">
            <div id="navs">
                <router-link to="/home" tag="button">
                    home页
                </router-link>
                <router-link to="/news" tag="button">新闻页</router-link>
                <router-link :to="{path:'/about',query:{a:10,b:20}}" tag="button">
                    关于我们页
                </router-link>
            </div>
            <router-view></router-view>
        </div>
    </body>
    <script src="./vue.js"></script>
    <script src="../test/node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const Home = {
        
            template:`
                <div>
                  <h2>我是home页面</h2>  
                </div>
            `
        }
        const News = {
        
            template:`
                <div>
                  <h2>news</h2>  
                </div>
            `
        }
        const About = {
        
            template:`
                <div>
                  <h2>about</h2>  
                </div>
            `,
            mounted(){
        
                console.log(this.$route);
            }
        }
        const routes = [
            {
        
                path:"/home",
                name:"home",
                component:Home
            },
            {
        
                path:"/news",
                name:"news",
                component:News
            },
            {
        
                path:"/about",
                name:"about",
                component:About
            },
            {
        
               path:"/",
               redirect:"/home" 
            }
        ]
        const router = new VueRouter({
        
            routes
        })
        const vm = new Vue({
        
            el: "#app",
            router
        })

## 路由模式 ##

const router = new VueRouter({
        
            mode:"hash",//默认模式
            routes
        })

1.hash模式

> 原理：利用浏览器的url的hash值的变化（url上面加hash值 \#/home）  
> 利用window.onhashchange当地址栏的hash值改变时触发

*  优势：地址栏的路径只想不会改变
 *  缺点：丑  
    2.history模式  
    \#/home \#/news 变成xxx/home xxx/news

原理：H5新增的API（给history新增的API，pushState和replaceState方法）  
优点：好看  
缺点：/写在最前面，代表根路径

## 导航守卫（又称导航钩子函数） ##

监听甚至拦截路由变化(切换)：/home变/about

*  全局守卫（拦截所有的路由）

//全局前置守卫
    router.beforeEach((to,from,next)=>{
        
          //to：route即将进入的路由对象
          //from:route当前正要离开的路由对象
          next();//不加上这个无法通过，参数是false中断导航，./xzxx中断当前路由，并跳转至设置好的路由
    })
    
    //全局后置守卫
    router.afterEach((to,from)=>{
        
    
    })

## 实践：登录鉴权（就是验证用户是否有权利访问系统） ##

上网自己找,需要知道next里面的参数到底是什么作用
    next(path:"./login",{
        a:10,b:29})

[好评博文，值得一看][Link 2]

路由元信息

const routes =[
        {
        
            path:"/home",
            component:Home,
            meta: {
        needLogin:true}              //元信息，this.$route里面得到属性，功能就是可以携带数据
        }
    ]

元信息放在this.$route里面，可以作为参数传递，用处见项目内需求

### 路由独享的（只能拦截所在路由，写在规则里面） ###

const routes = [
      {
        path:"/news",
        beforeEnter(to,from,next){
        next();
        },
        component:News
      }
    ]

### 组件内部(用的不多，但是问面试题) ###

const 组件名 ={
        template:`
            ....
        `,
        beforeRouteEnter(to,from,next){
            //路由已经变化了，渲染组件之前（渲染组件的对应路由被confirm前使用）
            //不能获取组件实例this(只是路由变了，组件还没渲染，还不是一个组件（组件还没被创建），此时获取不到)
        }
        beforeRouteUpdate(to,from,next){
            //当前路由改变，但是该组件被复用时调用（使用场景只有多个路由使用一个组件）
            //举例，对于一个带有动态参数的路径/foo/:id,在/foo/1和/foo/2之间跳转
            //由于会渲染同样的Foo组件，因此组件实例会被复用。而这钩子函数在这种情况下被调用
            //可以访问组件实例this
        }
        beforeRouteLeave(to,from,next){
            //导航离开改组件的对应路由时使用
            //可以访问该组件实例'this'
        }
        
    }

面试题：如何监听动态路由参数的变化

第一个：
    watch:{
        '$route'(to,from){
            
        }
    }
    第二个：
    beforeRouteUpdate(to,from,next){
        
    }

## 过渡动效 ##

就是transition里面加上

## 滚动位置 ##

const router =new VueRouter({
        
         mode,
         routes,
        //下面这段直接API内复制粘贴
        
        //savedPosition切换路由时切出的路由的滚动条位置{x:number,y:number}
         scrollBehavior(to,from,savedPosition){
        
             if(savedPosiiton){
        
                 return savedPosition
             }else{
        
                 return {
        x:0|y:0}
             }
         }
     })

# vuecil脚手架 #

利用webpack搭建了vue自动化开发环境

脚手架官网：https://cli.vuejs.org/guide/installation.html

cnpm(上网查找安装方法)：

> cnpm i @vue/cli -g  
> 测试：  
> vue --version

## 脚手架启动项目 ##

项目文件夹下DOs窗口运行vue create    项目名(注意文件夹内不要有vue.js，项目名不要驼峰vueDemo改写成vue-demo)
    
    
    
    打开之后有窗口，选择 Manually select features
    
    
    然后选择choose a version 
    babel
    Vuex
    Router
    CSS pre-processors
    Linter/Fomatter
    
    回车选择2.x
    
    
    然后问你路由用不用history模
    
    然后选sass(with node sass)
    
    ESlint代码格式，选择 标准配置
    
    
    我什么时候格式化代码：Lint on save
    
    babel配置文件，单独放到文件中，还是放到package.json上：都可以
    
    刚刚的选项要不要保存一个预设：yes,然后预设名字（我没得这步）
    
    
    
    好了后进入vue-demo（你创建的项目，运行npm run serve,启动服务器）

## 脚手架生成项目目录结构 ##

也可以在你要创建的文件夹下cmd输入vue ui ,进入浏览器创建脚手架（我不用这个，太复杂）

> 运行npm run lint;格式化代码，代码写错自动帮你修改

> 代码写完之后npm run build

下面分析vue-demo（项目）里面文件夹的作用

1.node_modules:项目依赖·存放目录
    2.public：存放静态资源的目录(里面资源可以通过根路径访问)
         2.1public里面的favicon.ico(网页图标，名字必须是这个)  
         2.2index.html是项目里面唯一的html
    3.src   //原码目录 
        3.1assets存放静态资源的目录（项目中的静态资源：css,js，字体图标，图片等等都最好在这），webpack优先处理这个文件夹里面的静态资源，public里面的静态资源webpack不做任何处理，run build之后，public中的静态资源回原样输出，assets中的静态资源路径写相对路径，public中的写绝对路径
        3.2components//存放公共组件的目录
        3.3router//vue路由的配置目录（里面index.js就是路由的配置）
        3.4store  vuex目录  
        3.5views//存放路由组件的目录
        3.6App.vue//根组件，整个项目只有这个组件是直接显示的(永远展示的)，剩下组件都是通过路由显示出来的，里面放了路由出口router-view
        3.7main.js//入口函数，webpack会自动将入口函数引入到index.html上（vue必须挂载到HTML页面上才会起效果）
        3.8.editorconfig:配置：如缩进方式空格，缩进间距两行等
        3.9babel.config.js：babel的配置文件
        3.10package.json：项目的配置文件
        3.11package-lock.json:锁定安装的资源的版本  
    
    
    vue实例（vm）也可以有template,不过叫做render
    只关注src就行

main.js里面的一段代码

new Vue({
        
        router,
        store,
        render:h=>h(App)//实例默认渲染了一个组件，叫做APP组件(app.vue,app组件是放入router-view的,其他根据路由配置在app.vue里面的ruter-view展示的)，相当于template
    }).$mount("#app")

## 项目启动过程 ##

src下面router文件夹的index.js

import Vue from 'Vue'//引入vue，es6语法
    import VueRouter from 'vue-router'//引入vue-router
    Vue.use(VueRouter)//工程化环境下需要这么使用
    //创建路由规则
    const routes = []
    //创建路由
    const router =new VueRouter({
        
        routes
    })
    //路由是要放在实例上的，实例在main.js里面 ，mian.js是将实例挂载到index.html上的
    export default  router //导出默认，导出一个文件，一个接口

然后在main.js里面

import router from './router'//webpack处理，只要进入某个目录，自动找以index开头的文件的js或vue文件

在views里面创建Home文件夹，写index.vue（单文件组件）

### 单文件组件 ###

webpack vue-loader解析 .vue结尾的文件，将.vue结尾的文件解析成 vue的组件

在views->Home->index.vue里面（事先装好vue VScode Snippets,输入vbase）,得到下面的组件对象（会被解析成我们平时的组件格式）

<template>
        <div class="box">
            {
        {
        msg}}
        </div> 
    </template>
    
    <script>
        export default {
        
            data(){
        
                return :"我是home页"
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .box {
        
            color:red
        }
        //当前组件中的样式
        //scope定义当前组件中style的样式只针对当前组件,一般需要加
    </style>

写好之后在router文件夹下的index.js内引入home组件（将写好的组件引入到配置文件中）

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'//引入home路由
    
    Vue.use(VueRouter)
    //配置路由
    const routes =[
        {
        
            path:'/home',
            component:Home
        }
    ]
    
    const router =new VueRouter({
        
        routes
    })
    export default router

app.vue只保留

## ES6模块化 ##

基于webpack万物皆可模块化（不止是js还包括css/字体图标/图片xxx）,可以在任意的js文件中引入

1.一个文件中如果没有提供接口，那么整个文件就是一个接口，可以直接引入，在引入的文件中运行该文件
    2,提供接口
        (1):一个文件提供多个接口
        a.js
            export const a =10;
            export const b =()=>{xxx}
            export const c ={}
            或者
            const a =10;
            const b =()=>{}
            const c={}
            
            
            export {//注意，不是简写，语法规定，不能写a:a形式
                a,
                b,
                c
            }
            
            
            引入接口：
            b.js
            注意：导出多个接口，对应解析解析成 导出一个对象{a，b，c}
            import {a,b,c} from "./a"
            import * as obj from "./a";//此时的obj就是{a,b,c} 
            
            要是想引入到index.vue里面，需要在script标签里面引入
            
            模块文件写在nodules文件夹里面
            
            一个文件默认导出一个接口
            
            
            当模板内有export default,那么export const 无效，只有export default有效
            
            
            注释需要斜杆后保留一个空格
            
            
            
            
            引入import 变量  from "路径"
            
            
            模块化只能在js里面引入

## 脚手架使用过程 ##

在views文件夹内，用文件夹（如home）包裹路由，可以在home下定义components文件,存放只在home里面用的公共部分
    
    
    导入home组件内还可以这么写：
    import Home from "@/views/Home";// @自动代表src目录
    
    
    
    
    
    src下面的components文件夹定义公共组件：CommonHead.vue,引入这个文件需要放到组件的script标签内部
    CommonHead组件属性
    <template>
        <div>
            <h2>我是公共组件</h2>
            <h2>{
       {title}}</h2>
        </div>
    </template>
    
    <script>
        export default {
           props:{
              title: {
                  type:String,
                  require:true
              }
        }
        }
    </script>
    之后在
    index.vue里面
    <template>
        <div>
            <common-head title="首页标题"/>
        </div>
    </template>
    import CommonHead from "@/components/CommonHead"
    export default {
        components:{
            CommonHead
        }
    }
    
    
    
    
    
    
    
    在router
        index.js中定义路由规则
        在views目录中定义路由组件
        在conponents目录中定义公共组件
        
        
        在组件中
            style标签中定义当前组件的样式
            style标签要加上scoped属性，当前样式只针对当前的组件有效，不会影响到其他组件和后代组件
            想要穿透scopeed限制
                /deep/ 选择器{}

公共样式：在assets里面的css文件夹内写  
写好之后在main.js里面引入

import “…/xx.css”（直接引用整个文件，写在html上就能布置到全局（通过main.js引入））

只要影响到全局就写在main.js里面

## 自定义配置（不想用他的默认配置） ##

当前项目的根目录下面  
vue.config.js:配置文件

module.export={
        
        devServer:{
        //定义当前项目 服务器的配置
            port:8080,
            open:true//自动打开浏览器
        }，
        
        //关闭eslint提醒
        lintOnSave:false            //eslint插件，项目报错但是给你有下划线提醒，右键fix all problem帮你改格式
    }

注，改变配置之后必须重启才生效

## 路由懒加载 ##

在项目加载的时候，router文件夹里面的index.js文件  
作用：将路由组件的代码不提前引入，提高首屏打开的速度

import Home from './views/Home'
    import News from "./views/News"
    ...
    多个路由这么写会降低网页加载速度
    
    
    
    
    下面是懒加载方式(以news组件为例)
    const routes =[
        {
        
            path:"/home",
            component:Home
        },
        {
        
            path:"/news",
            component:()=>import("@/views/News")
        }
    ]

# vuex #

\#\#vuex基础  
可以去vuex官网查看  
存储共享数据

> vuex是专门为vue设计的（vue的插件），一个集中式的，应用状态（数据）管理工具，可以让我们的状态的变化是可预测的

安装：

npm i vuex -S

> vue使用插件:Vue.use(插件)

src目录下创建store文件夹，专门写vuex代码，写个index.js

//index.js
    import Vue from 'vue'
    import Vuex from "vuex"
    
    Vue.use(VueX)
    //创建store仓库
    const store =new Vuex.store({
        
        state:{
        //存放公共数据的
            num:10
        }，
        mutations:{
        //修改state的方法
            addNum(state,num){
        
                state.num++
            }
        }
    })
    exoprt default store
    
    
    //main.js
    import store from "./store"
    new Vue({
        
        router,
        store
    })
    
    //home的index.vue里面测试
    export default {
        
        mounted (){
        
            console.log(this);
            console.log(this.$store.state.num)//获取数据
        }
    }

打印出来vue实例上面多了个$store,也就是说store挂载到vue实例上、

组件中如何修改数据?  
以home中某个按钮为例

下面是这个按钮的click事件
    export default{
        
        methods:{
        
            add(){
        
                //this.$store.commit("你要运行的mutations函数名",调用这个mutations传递的参数)
                this.$store.commit("addNum",5)；commit的作用就是调用某个mutations函数
            }
        }
    }
    
    
    
    //可以加上计算属性
    {
        {
        num}}
    computed:{
        
        num(){
        
            return this.$store.state.num;
        }
    }

如何传多个参数呢？

this.$store.commit("addNum",{
        a:10,b:20});//调用函数
    //传递参数
    mutations:{
        
        addNum(state,{
        a,b}){
        //解构赋值
            state.num =state.num +a+b;
        }
    }

## vue 进阶 ##

vuex上面的参数

Store构造方法，创建vuex实例用的，还有mapState方法

mapState:辅助获取多个state的值(遍历state)

将mapState引入到home的index.vue中（放在js内）

> import \{mapState\} from 'vuex

computed:{...mapState(['num'])}
    
    
    //目的是简化，不想每次都this.$store.state.num
    
    mapState(['num'])相当于(对象)
    {
    num(){
        return store.state.num
    }
    }

mapMutation  
简化mutation  
先导入到组件里面

> import \{mapState,mapMutations\} from ‘vuex’  
> 打印查看

mounted(){
       console.log( mapMutation(['addNum','reduceNum']));
    }
    相当于
    {
        addNum(params){
            store.commit("addNum",params)
        },
        reduceNum(params){
            store.commit("addNum",params)
        }
    }

于是产生简化写法

methods:{
        add(n){
            this.addNum(n)
        },
        reduce(){
            this.reduceNum(5)
        },
        ...mapMutation(['addNum','reduceNum']);
    }

\#\#actions使用场景  
store里面state和mutation多的话需要单独拿出去  
state.js

export default {
        num:10
    }

mutations.js

export default {
        addNum(state,n){
            state.num +=n;
        },
        reduceNum(state,num){
            state.num -=num
        }
    }

在store的index.js里面引入即可

### action ###

是vue中的方法，不能直接修改state，提交mutation，让·mutation修改  
为什么用action，不直接使用mutation？

原因：

*  mutation中不可以包含异步操作
 *  action可以包含异步操作

什么时候用：  
公共的数据需要请求接口（ajax）得到,mutation不能有异步操作，所以应该在action中发送ajax请求，请求成功后提交mutation，把请求的值传过去

index.js

import actions from './actions' 
    const store =new Vuex.Store({
        state,
        mutations,
        actions
    })

action.js

export default {
    //参数是对象，只要commit可以结构赋值出来{commit}
          addNumAsync(context){//参数context就是store这个对象（new Vuex.Store({})）
              console.log(context,11111);
              //模拟异步
              setTimeout(()=>{
                   context.commit("addNum",100)
              },3000)
            } 
    }

组件内触发：

import {mapState,mapMutations,mapActions} from 'vuex'
    methods:{
        addAsync(){//绑在一个点击事件上
            //console.log(this.$store)
            //this.$store.dispatch("addNumAsync")
            this.addNumAsync();
        }
        
        //下面是简化版本
        ...mapActions(['addNumAsync'])
    }

### getters ###

相当于vuex里面的计算属性  
index.js

const store =new Vuex.Store({
       state,
       mutations,
       actions,
       getter:{
           mun2(state){
               return state.num*2 
           } 
       }
       )}

index.vue

{
       {$store.getters.num2}}
    
    
    import {mapGetter} from 'vuex'
    
    
    computed:{
        ...mapGetter(['num2'])
    }

## store中的modules ##

store中新建文件夹（模块），然后里面写上index.js  
如store里面创建todoList文件夹，里面有index.js  
index.js

export default {
        state:{
            num:10,
            username;"小明"
        }
        mutations:{
            addNum(state,n){
                state.num  +=n
            }
        }
    }

再创建一个user模块，将这两个文件引入router儿子级别的index.js内

//store下index.js文件夹
    import todoList from "todoList"
    import user  from "./user"
    
    
    const store =new Vuex.Store({
        modules:{
            todo,
            user
        }
    })

组件内如何使用

{
       {$store.state.todo.num}}
    
    methods:{
        //注意，上面的modules只将state模块化了，mutation还是大mutation（输出发现state被分层了（在模块名下，但是mutation并没有）），下面的调用会让所用同名mutation方法执行
        
        
        
        
        //解决方法：在模块的index.js文件内，加上namespaced：true(定义命名空间，每个模块都有自己的mutations)
        add(){
            //this.$store.commit('addNum',10)//所有同名addNum被触发
            this.$store.commit("todo/addNum",10);   //自动加上模块名/
        }
    }
    computed:{
        //...mapState(['num'])这样写识别不出来是哪个模块里面的num
        
        ...mapState({
            num:state=>state.todo.num,
            num2:state=>state.user.num
        })
    }

模块化后state:

store 
    {
        state:{
            a:{
                num:10
            },
            b:{
                num:10
            }
        }
    }

注意：默认模块化只是将state分成不同的模块，mutations没有，所以，在组件中提交一个mutation，如果store不同模块中，同名的mutations会触发

怎么解决：加上namespaced

const moduleA ={
        namespaced:true,
        state:()=>({...}),//好处，闭包形成自己作用域
        mutations:{...},
        actions:{...},
        getters:{...}
    }

调用的时候

methods:{
        add(){
            //this['todo/addNum'](20);看上去怪异
            this.addNum(50)
        }
    -    ...mapMutations(['todo/addNum'])
        
        //为了改变怪'addNum异
    ...mapMutations("todo",['addNum'])
    }

### 常量保存mutations名字 ###

写一遍名字没问题，写多了容易出错  
在store里面新增types.js

//定义常量保存两个mutations
    export const  ADDNMUM ='addnum'
    export  const REDUCENUM ="reducenum"

在mutations.js里面

import {ADDNUM, REDUCENUM} from "./types"
    export default {
        [ADDNUM](state,n){
            state.num +=n
        },
        [REDUCENUM](state,num){
            state.num -=num
        }
    }

举例:actions.js里面的变化

import {ADDNUM} from "./types"
    export default {
        addNumAsync({commit}){
            setTimeout(()=>{
                const value=100;
                commit(ADDNUM,value)
            },2000)
        }
    }

[Link 1]: https://blog.csdn.net/jdrunk/article/details/102670513?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160611277419725266933257%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160611277419725266933257&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v28-1-102670513.pc_search_result_cache&utm_term=%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7&spm=1018.2118.3001.4449
[image]: /images/20221120/af1cbaa52d904ea383be54f2a52c1429.png
[Link 2]: https://blog.csdn.net/jiang7701037/article/details/97571064?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~top_click~default-1-97571064.nonecase&utm_term=%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB&spm=1000.2123.3001.4430