Bmx1111

Vue知识总结

与三阶段无关

渐进增强和优雅降级

渐进增强就是先兼容低版本在逐渐地向高版本提高

优雅降级就是先完成高版本浏览器的编写在向低版本兼容

disabled 标签禁用的属性

加上这个属性标签就不能使用了

请你说一下常见的js dom操作有哪些？

dom查找

dom新增创建

dom克隆删除属性操作

app分类

移动webapp 运行在移动端浏览器上的app

原生app ：就是从移动端应用商店下载的app

混合式app：就是我们前端写好的页面（vue react html+css+js）把我i们写的页面内嵌到原生项目中

es6解构赋值

就是把数组或者对象快速赋值的一个语法

原型图设计

墨刀墨客蓝湖

Vue

vue的基本概念

vue就是当下最流行的前端js框架(数据处理和数据绑定的一个工具)

作者 :尤雨溪

是一个华人

前google员工

是什么

vue是一款用于构建用户界面的渐进式的自底向上增量开发的MVVM框架

渐进式：就是不做职责以外的事情.(就是vue可以在一个项目中的局部使用他不会影响没有使用的位置也可以整个项目都是用)

自底向上增量开发：先写好一个基础的页面在去添加各个复杂的功能,简单到繁琐的过程

MVVM是一个框架的模式：

什么是框架

用来封装一些与业务（就是你写的项目的功能）无关的代码块我们使用他进行拼装即可完成指定项目功能

框架的优势

大大提高了开发效率（但是要学习新的语法对初学者来说比较麻烦）

MVC

是昨早的一种框架模式------》mvvm是mvc的变种

就是把一个项目一个功能抽象成了不同的模块每个模块来管理自己的事情让开发变得更加的简单

M （model）模型（今后只要说到模型大家自动转换成数据）管理数据的

V （view）视图（就是用户可以看见的地方）

C （controller）控制器用来对数据接收和展示的中间商

MVVM

是vue中使用的一种模式

M （model）模型（今后只要说到模型大家自动转换成数据）管理数据的

V （view）视图（就是用户可以看见的地方）

VM (ViewModel)视图模型模型数据与视图中的一个数据桥梁（这个桥梁更加智能他能发现模型或者是视图中的数据改变当一方发生了改变就会立即通知另外一方进行改变）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OjdKnjRD-1624408588808)(.\img\2.bmp)]

vue的开发目的

1.解决了数据绑定问题

2.可以开发大型单页面SPA应用

3.支持组件化

HelloWord

1.我们要使用先下载 :npm install -save vue

2.开始编写页面代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    

        
        <div id="demoDiv">
            {{text}}------{{num}}
        div>
     
        <script>
            // 3.新建vm层 (就是vue实例)
            new Vue({
                // 4.关联模型与视图层
                el:"#demoDiv",
                data:{ //5模型层
                    text:"你好么么大",
                    num:18
                }  
            })
        script>


body>
html>

vue的渲染方式

{{}}-----》模板语法模板表达式双花括号赋值法

作用：

用于在vue中解析表达式（表达式通过某种计算可以返回结果的一个公式）虽然在{{}}中可以来处理一些数据

但是在vue中不推荐在{{}}中写入太符复杂的逻辑（因为视图层就是显示的你在里面处理太复杂的逻辑不合适）


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
        <div id="demoDiv">
            <h1>模板语法h1>
            
            <h1>{{text}}h1>
            <h1>{{num}}h1>
            <h1>{{bool}}h1>
            <h1>{{arr[2]}}h1>
            <h1>{{obj.age}}h1>

            <hr>
            <h1>{{updata.toUpperCase()}}h1>
            <h1>{{updata.substr(1,3)}}h1>
            <h1>{{arr.length}}h1>
        div>
        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    text:"我是字符串",
                    num:666,
                    bool:true,
                    arr:[111,2222,3333,4444],
                    obj:{
                        name:"xixi",
                        age:18
                    },
                    updata:"abcdefg"
                }
            })
        script>
body>
html>

声明式渲染与数据驱动

vue中核心是允许我们使用简洁的模板语法进行声明式的数据渲染

声明式渲染：我们告诉程序我想干什么程序就会自动完成

命令式渲染：原生的都是命令时我们需要告诉程序一步一步应该怎么走他才会按照我们的指令前进

数据驱动

vue会时时刻刻的监控着模型和视图当一方发生了改变另外一方也会随之发生改变

总结：

vue的双大括号中不要加双引号

指令

什么式HTML的属性?

就是用来扩展HTML标签的功能

属性的语法？

写在HTML的开标签中并且属性=“属性值”

vue的指令

指令是带有 v- 前缀的特殊属性（就是在vue中带有v-前缀的扩展HTML标签功能的一个技术）

vue指令的语法

写在HTML的开标签中并且指令=“指令值” 注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔

v-model

v-model 指令

作用：主要是用于表单上数据的双向绑定
语法：v-model = 变量
注：v-model 指令必须绑定在表单元素上

Vue框架核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的
使用 v-model 指令来实现双向数据绑定把视图数据与模型数据相互绑定


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
        <div id="demoDiv">
            <h1>v-model指令h1>
            
            
            <input type="text" v-model="inputval"/>
            <h1>{{inputval}}h1>

            <hr>
            
            <input type="checkbox" v-model="bool"/>
            <h1>{{bool?"你勾选了":"你没有勾选"}}h1>
        div>
        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                  inputval:"",
                  bool:true
                }
            })
        script>
body>
html>

双向绑定的原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

数据劫持：数据拦截当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

发布者-订阅者模式：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

v-show

v-show 指令
作用：控制切换一个元素的显示和隐藏
语法：v-show = 表达式
根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素；false(默认)表示隐藏该元素
元素一直存在只是被动态设置了display：none


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
        <div id="demoDiv">
            <h1>v-showh1>
            <input type="checkbox" v-model="bool"/>{{bool?"显示":"取消"}}

            <p v-show="bool">我要显示和隐藏p>
            
        
        div>
        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    bool:true
                }
            })
        script>
body>
html>

v-on

v-on 指令
作用：为 HTML 元素绑定事件监听
语法：v-on：事件名称=‘函数名称()’
简写语法：@事件名称=‘函数名称()’
注：函数定义在 methods 配置项中


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
        <div id="demoDiv">
            <h1>v-onh1>
            <button v-on:click="fun()">点我打印内容button>
            <button @click="fun()">点我简写打印内容button>
        div>
        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                  
                },
                // 函数写在与data el同及位置使用methods包裹
                methods:{
                    fun(){
                        console.warn("你好么么哒")
                    } 
                }
            })
        script>
body>
html>

v-for

v-for 指令
作用：遍历 data 中的数据，并在页面进行数据展示
语法：v-for = ‘(item, index) in arr’
item 表示每次遍历得到的元素
index 表示item的索引，可选参数


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
        <div id="demoDiv">
            <h1>v-forh1>
            <ul>
                <li v-for="(v,i) in arr">{{v.name}}------{{v.age}}li>
            ul>


            <table border="1">
                
                <tr v-for="(xiaoming,xiaohong) in arr">
                    <td>{{xiaohong}}td>
                    <td>{{xiaoming.name}}td>
                    <td>{{xiaoming.age}}td>
                tr>
            table>
        div>
        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                  arr:[
                      {name:"xixi1",age:118},
                      {name:"xixi2",age:218},
                      {name:"xixi3",age:183},
                      {name:"xixi4",age:184},
                      {name:"xixi5",age:185},
                      {name:"xixi6",age:186}
                  ]
                }
            })
        script>
body>
html>

v-bind

v-bind 指令
作用：给html的属性绑定变量
语法：v-bind:属性名 = ‘表达式’/ 简写：属性名=‘表达式’
绑定一个属性：
绑定多个属性(不能使用简写)：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
        <div id="demoDiv">
            <h1>v-bindh1>
            <a v-bind:href="ahref">{{text}}a>
            <a :href="ahref">11{{text}}11a>
        div>
        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    text:"点我去百度",
                    ahref:"http://www.baidu.com"
                }
            })
        script>
body>
html>

v-if 全家桶

v-if v-else v-esle-if

v-if指令
作用：判断是否加载固定的内容
语法：v-if = 表达式
根据表达式结果的真假，确定是否显示当前元素
true表示加载该元素；false表示不加载该元素
元素的显示和隐藏是对Dom元素进行添加和删除


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <h1>v-ifh1>
        <input type="checkbox" v-model="bool"/>
        <p v-show="bool">我是v-show的元素p>
        <p v-if="bool">我是v-if的元素p>
    div>

    <script>
        new Vue({
            el:"#demodiv",
            data:{
                bool:true
            }
        })
    script>
body>
html>

v-if与v-show的区别

首先两者在用户的角度效果一样都是对元素在页面进行显示和隐藏的接收数据布尔值 true显示 false隐藏
但是 v-if 是对DOM元素进行添加和删除已达到显示和隐藏 v-show是使用css进行的

应用场景：

v-show 在初始化的时候对电脑的资源消耗比较到（对安全性相对较低的内容进行显示和隐藏）

v-if 是在切换的时候对电脑的资源消耗比较到（对安全相对较高的内容进行显示和隐藏）

v-else

作用：必须配合v-if使用否则无效。当v-if条件不成立的时候执行


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <h1>v-elseh1>


        <h1 v-if="bool">我是if的内容h1>
        <p>v-if与v-else之间不能有第三者p>
        <h1 v-else>我是else的内容h1>
    div>

    <script>
        new Vue({
            el:"#demodiv",
            data:{
                bool:false
            }
        })

       
    script>
body>
html>+

v-else-if


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <h1>v-else-ifh1>

        <select v-model="text">
            <option value="吃饭">吃饭option>
            <option value="睡觉">睡觉option>
            <option value="在吃">在吃option>
            <option value="在睡">在睡option>
            <option value="上厕所">上厕所option>
        select>
        <p v-if="text=='吃饭'">用户选择了吃饭饭p>
        <p v-else-if="text=='睡觉'">用户选择了睡觉觉p>
        <p v-else-if="text=='在吃'">用户选择了在吃饭饭p>
        <p v-else-if="text=='在睡'">用户选择了在睡觉觉p>
        <p v-else-if="text=='上厕所'">用户选择了上厕所p>
        <p v-else>用户什么都没有选择p>
     
    div>

    <script>
        new Vue({
            el:"#demodiv",
            data:{
               text:""
            }
        })

       
    script>
body>
html>

v-text

v-text 指令
作用：操作网页元素中的纯文本内容。{{}}是他的另外一种写法就是向网页中插入纯文本

v-text与{{}}等价，{{}}叫模板插值，v-text叫指令。

有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动

屏幕闪动

①使用v-text渲染数据
②使用{{}}语法渲染数据，但是同时使用v-cloak指令（用来保持在元素上直到关联实例结束时候进行编译），v-cloak要放在什么位置呢，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以

v-html与v-once

v-html 指令
作用：双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令
语法：

v-once 指令
作用：当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)
语法：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <h1>v-htmlh1>
        {{newhtml}}
        <div v-html="newhtml">div>
        <h1>v-once 一次性插值h1>

        <input type="text" v-model="text">
        <p>{{text}}p>
        <p v-once>{{text}}p>
        <p>{{text}}p>
        <p>{{text}}p>
    div>

    <script>
        new Vue({
            el:"#demodiv",
            data:{
                newhtml:"我是字符串标签
",
                text:"我是默认值"
            }
        })

       
    script>
body>
html>

侦听/监听 watch

watch是用来监听data模型数据中的内容当数据发生改变的时候 watch就会触发


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <input type="text" v-model="text">
    div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"我是默认值"
            },
            // 监听
            watch:{
                // 你要监听的数据:function(新值,旧值){
                //     你要完成的逻辑
                // }
                text(newval,oldval){
                    console.log(`${newval}-----${oldval}`)
                }
            }
        })
    script>
body>
html>

计算属性

概念：顾名思义，首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。同时只要在它的当中里引用了 data 中的某个属性，当这个属性发生变化时，计算属性仿佛可以嗅探到这个变化，并自动重新执行。

计算属性(computed) 是一个属性所以与el methods等同级位置编写它的主要作用是计算(计算data的数据当data属性发生改变的时候他会知道并且重新计算返回我们想要的结果一条数据在不同位置展示出不同形态的时候)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <h1>为什么用计算属性 在模板中写太多的逻辑 会导致后期无法维护h1>
        <p>{{text}}p>
        <p>{{text.toUpperCase()}}p>
        <p>{{text.toUpperCase().substr(1,3)}}p>

        <h1>计算属性h1>
        <p>{{newatext}}p>
        <p>{{newbtext}}p>
    div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefghijk"
            },
       
            watch:{
              
            },
            // 计算属性
            computed:{
                // 需要返回的数据: function () {
                //     return 处理操作
                // }
                newatext(){
                    // 必须return
                    return this.text.toUpperCase()
                },
                newbtext(){
                    return this.text.toUpperCase().substr(1,4)
                }
             
            }
        })
    script>
body>
html>

计算属性(computed)与methods（方法）的区别

为什么会造成这个想法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <p>{{newtext}}p>
        <p>{{showtext()}}p>
        大家会发现两个的结果没有区别
        
    div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefg"
            },
          
            watch:{
             
            },
            methods:{
                showtext(){
                    return this.text.toUpperCase()
                }
            },
            computed:{
                newtext(){
                    return this.text.toUpperCase()
                }
            }
        })
    script>
body>
html>

如果我们把计算属性调用多次他只执行了一次

但是我们把方法调用多次调用几次执行几次有很大的资源浪费

区别：

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
方法绑定数据只要被调用，方法将总会再次执行函数。
计算属性相对于方法在处理特定场合下节省资源性能

计算属性与侦听器的区别：
当watch监听的值发生改变就会被调用，watch可以在数据变化时做一些异步处理或者开销大的操作
计算属性是计算依赖的值，当依赖的值发生改变才会触发。

事件对象

事件对象就是用于描述触发这个事件的元素信息

$event

修饰符

v-on指令提供了事件修饰符来处理DOM事件细节

按键修饰符

按键修饰符： .up, .down, .ctrl, .enter, .space等等


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        
       <input type="text" @keydown.ctrl="fun()">
    div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
              
            },
           methods:{
               fun(){
                   console.log("aaaaaaaaaa")
               }

                    
           },
            watch:{
             
            }
        })
    script>
body>
html>

事件修饰符

【扩展】事件修饰符
prevent修饰符：阻止事件的默认行为(submit提交表单)
stop修饰符：阻止事件冒泡
capture修饰符：与事件冒泡的方向相反，事件捕获由外到内
self：只会触发自己范围内的事件，不包含子元素
once：只会触发一次
注意：修饰符可以串联使用

交互

vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件，axios是第三方插件，fetch es6原生

Vue-resource在vue2.0的时候已经停止更新了

axios是对XHR对象使用promise进行了二次封装简化了语法

fetch是es原生（react中会带大家写）

axios

初体验

axios 是一个第三方的数据请求库使用promise对XHR对象进行了封装是现今最主流的一种数据请求方式

使用先下载

npm install --save axios

axios封装

生命周期与钩子函数

生命周期就是vue实例从创建到销毁的过程

钩子函数：本质是一个函数但是他是一个会被自动调用的函数

生命周期的钩子函数：就是vue从创建到销毁的过程中被自动调用的函数（可以帮助我们在vue中完成一些特定条件下的自动执行的业务）

生命周期的钩子:

beforeCreate（创建实例）

created（创建完成）

beforeMount（开始创建模板）

mounted（创建完成）

beforeUpdate（开始更新）

updated（更新完成）

beforeDestroy（开始销毁）

destroyed（销毁完成）


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
        <h1>{{text}}h1>
        <button @click="text='我被改了'">点我更新button>
    div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"我是一个字符串"
            },
            methods:{

            },
            watch:{

            },
            computed:{

            },
            // 生命周期
            // **beforeCreate（创建实例）**

            // **created（创建完成）**

            // **beforeMount（开始创建模板）**

            // **mounted（创建完成）**

            // **beforeUpdate（开始更新）**

            // **updated（更新完成）**

            // **beforeDestroy（开始销毁）**

            // **destroyed（销毁完成）**


            beforeCreate(){
                console.log("创建实例")
            },
            created(){
                console.log("实例创建完成")
            },
            beforeMount(){
                console.log("开始创建模板")
            },
            mounted(){
                console.log("创建完成")
            },
            beforeUpdate(){
                console.log("开始更新")
            },
            updated(){
                console.log("更新完成")
            },
            beforeDestroy(){
                console.log("开始销毁")
            },
            destroyed(){
                console.log("销毁完成")
            },
        })
    script>
body>
html>

自定义过滤器

过滤器作用
在不改变数据的情况下，输出前端需要的格式数据

坑：面试的时候面试官或者今后与同事沟通的时候可能会被问道你能给我说下vue中的内置过滤器吗？

2.0中已经废弃了内置过滤器，需要我们自定义过滤器来使用filter

全局过滤器

全局过滤器定义的内容在页面中的所有实例中都可以使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
       {{text|xiaoming}}
    div>


    <div id="demodivb">
            {{text|xiaoming}}
    div>
    <script>
        // 如果数据在页面展示的时候和我们的续期想法不一样我们可以使用过滤器格式化展示数据
        // 全局过滤器定义在实例之前
        Vue.filter("xiaoming",(val)=>{
            // 大于5个就保留5位 并且在后面加...
            if(val.length>=5){
                return val.substr(0,5)+"..."
            }else{
                return val
            }
        })
        new Vue({
            el:"#demodiv",
            data:{
                text:"我是第一个内容哦么么哒" 
            }
        })
        // =====================
        new Vue({
            el:"#demodivb",
            data:{
                text:"呵呵哒呵呵哒" 
            }
        })
    script>
body>
html>

局部过滤器

只能在指定实例中使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="node_modules/vue/dist/vue.min.js">script>
head>
<body>
    <div id="demodiv">
       {{text|xiaohone}}
    div>


    <div id="demodivb">
        
            {{text|xiaohone}}
    div>
    <script>
        // 局部过滤器  写在指定实例当中  与data等同级
        
        new Vue({
            el:"#demodiv",
            data:{
                text:"西游记" 
            },
            filters:{
                xiaohone(val){
                    return "<<"+val+">>"
                }
            }
        })

        new Vue({
            el:"#demodivb",
            data:{
                text:"红楼梦" 
            }
        })
    script>
body>
html>

总结:

在没有冲突的前提下，过滤器可以串联

项目环境配置 vue脚手架

前期准备

电脑上必须要有node

安装淘宝镜像 cnpm (非必装，网络慢的情况可安装)
npm install -g cnpm --registry=https://registry.npm.taobao.org

如果安装过程中报错请您连你手机的wifi

使用

1 全局安装vue-cli npm install -g @vue/cli （除了你电脑重装系统或者是重装了node以外就不用在安装了）

2.查看版本 vue --version

3.开始创建项目但是需要先把你的cmd路径切换到你想创建项目的文件夹下 vue create 项目名

在弹出的选择中选择第三项剩下的眼睛闭上一路回车

4 cd到项目名下

5 npm run serve启动

空脚手架创建好之后怎么办？

因为空脚手架中有很多与我们开发没有关系的内容所以拿到脚手架在写我们的代码之前需要删除一些默认的内容

1.删除components文件夹中的HelloWord.vue

2.进入到app.vue(是所有组件的老大所有的组件今后要显示都要关联到app.vue中写在app中的内容在所有地方都会显示)

保留如下内容:

单文件组件

以.vue结尾的文件就是单文件组件

在一个.vue文件中分为三部分 template是写html script 是写js的 style是写css的

我们之前学的 data methods watch computed filters 以及8个钩子除了data的语法变了剩下没有任何改变

扩展小概念

组件：用来封装可以复用的ui代码块

模块：用来封装可以复用的js代码块

组件

组件：用来封装可以复用的ui代码块

本质：组件的本质是自定义标签

1.提高开发效率

2.降低测试难度

分类

全局组件

在所有地方都可以使用的组件

如果要使用

在main.js中引用调用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 1.全局组件的引用
import Bb from "@/components/bottombar.vue"
// 2.全局组件调用
// Vue.component("组件名",你要使用的组件)
Vue.component("Bb",Bb)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

之后在任何位置直接使用

局部组件

创建

1.在components文件夹下创建以.vue结尾的文件

2.在其中写入 template script style （每次都写很麻烦所以快速创建方式是vscode中

大家会发现什么都没有显示原因是因为没有在app中建立关系

3.要把我们的组件和app建立关系

（1）引用

// 1.引用组件
// import 是给引用进来的内容起个名字 首字母大写 from "你引用的路径"
  import Home from "./components/home.vue"

export default {
  name: 'App',
  components: {
  
  }
}

（2）调用

局部组件使用components来进行表示写在与el data methods等同级的位置

// 1.引用组件
// import 是给引用进来的内容起个名字 首字母大写 from "你引用的路径"
  import Home from "./components/home.vue"

export default {
  name: 'App',
  components: {
  // 2.调用
  // 组件名:你引用的组件
  Home
  }
}

（3）使用

组件中的属性使用

data methods watch computed filters 八个钩子组件中的属性(后面还有内容)

data的使用

<template>
  <div>
      {{text}}
  </div>
</template>

<script>
export default {
    data(){
        return {
            text:"你好么么哒"
        }
    }
  
}
</script>

<style>

</style>

思考？为什么组件的data是一个函数而原来的写法确是一个对象？

课下自行百度

其他属性语法以及使用没有任何变化

组件的样式设置

在组件的style范围内来写样式

但是默认情况下一个组件写的样式会影响其他组件为了解决这个问题

所以我们需要给样式的范围添加一个scoped当前样式仅对当前组件生效

<style scoped>
/* scoped当前样式仅对当前组件生效 */
    div{
        color:red;
    }
style>

父子组件

就是vue组件与组件之间的嵌套关系我们就可以非常方便的使用这种嵌套关系来进行页面内容的拼装从而减少组件的体积

父子组件的作用域

父组件能直接使用子组件的数据吗？不能

子组件能直接使用父组件的数据吗？不能

vue中组件与组件之间是一个完整的独立的个体他们之间的数据默认情况下是绝对不能相互使用的

既然默认不行那么有没有办法可以呢？

父子组件传值

正向传值

父组件把数据给子组件

props 是vue的一个属性写在与data methods等同级的位置

props的作用就是用于接收组件外部传递进来的数据

props:[“接收参数1”，“接收参数2”,…“接收参数n”]

使用:

1.在子组件中设置props的接收参数

export default {
    props:["xiaoming"],//设置接收参数
    data(){
        return {
            zitext:"我是子组件的数据"
        }
    }
}

2.在页面内想使用的地方把props的数据插入页面

<template>
  <div>
      <!-- 使用props的小明数据 -->
      zizizizizizzizizizi----{{xiaoming}}
  </div>
</template>

<script>
export default {
    props:["xiaoming"],//设置接收参数
    data(){
        return {
            zitext:"我是子组件的数据"
        }
    }
}
</script>

<style>

</style>

3.父组件开始传递

在子组件被调用的地方进行传递

     <!-- 传递数据给子组件    -->
      <Zi :xiaoming="futext"/>

总结下基本props的使用

props就是标签的属性

props验证

就是对父组件传递过来的数据进行校验（数据类型是否为空默认值）

props:{ //对象

}

为什么写的有问题但是props验证没有错误提示？
生产版本也就是压缩版的文件删除了警告，所以使用非压缩版的js文件就可以看到错误

逆向传值

子组件把数据给父组件

默认是不被允许的必须要通过自定义事件来进行传递

使用:

子组件中:

1.在页面中创建一个事件调用一个函数

2.在函数中使用this.$emit进行自定义事件的创建

<template>
  <div>
     
     <button @click="fun()">点我进行逆向传值button>
  div>
template>

<script>
export default {
    data(){
        return {
            num:"我是子组件的数据么么哒！！"
        }
    },
    methods:{
        fun(){
            // 千万不要把$emit记成逆向传值了   他是自定以事件
            // this.$emit("自定义事件的名字","你传递的数据")
            this.$emit("xiaoming",this.num)
        }
    }
}
script>

父组件:

1.在子组件被调用的地方使用 @/v-on:自定义事件名=“当前父组件的函数(不要圆括号不要圆括号)”

2.创建那个父组件的函数函数中形参就是子组件传递过来的数据

<template>
    <div>
      <h1>逆向传值h1>
      
      <Bzi @xiaoming="fun"/>
  div>
template>

<script>
import Bzi from "./bzi.vue"
export default {
    methods:{
        // val就是子组件传递的数据
        fun(val){
            console.log(val)
        }
    },
    components:{
        Bzi
    }
}
script>

路径别名

内置别名

@ 看见这个@就是src文件夹（无论在那个层级中只要写了@ 那么就是src文件夹）

自定义别名

在vue脚手架中默认给我们提供了一个@=src的一个文件夹别名

但是呢不够用比如我们要找到components这个类路径怎么办？

配置：

在项目的根路径下在项目的根路径下在项目的根路径下在项目的根路径下在项目的根路径下在项目的根路径下

创建一个vue.config.js（名字不能变）的文件

在其中使用 module.exports={}进行暴漏

module.exports={
    configureWebpack:{
        resolve:{
          alias:{
            // "别名":"对应的文件夹"
            "com":"@/components"
          }
        }
      }
}

千万不要忘了重启项目因为修改了配置文件必须重启项目

slot

插槽/槽口

引子：

如果我把组件的调用写成双标签并且在开标前和关标签中写入内容会显示吗？

不会

slot使用

1.基本使用就是你在想接受外部插入的内容组件之上放置一个slot组件

问题:

刚才直插入了可以一个多个呢？

可以插入的

但是一个开口插入多个内容后期如何管理？

具名槽口

带有名字的槽口 slot

在定义slot的时候使用name属性起个名字

插入的时候给元素使用slot属性=“slot的名字”

问题有啥用？

很多使用slot和props有相似点

props在一个组件被多次调用但是内容不同数量相同的时候使用

slot 在一个组件被多次调用但是内容不同数量也不相同的时候使用

路由

可以搭建spa(单页面应用) 的一个技术让我们的项目可以进行页面的切换
可以根据url的不同来切换不同的组件页面以达到用户观感上的页面切换

特点与原理

利用锚点完成切换
页面不会刷新

路由创建

脚手架自动创建

流程：就是在vue create 新建项目的时候选中Router项即可

与之前默认的脚手架项目区别

在src文件夹下多了一个router的文件夹与views的文件夹

router文件夹就是配置路由的文件夹

views就是写路由页面的文件夹

创建新页面过程

1.在views下创建你新建的路由页面组件

2.配置路由规则在router文件夹下的index.js中去先引用在配置

import Vue from 'vue'
import VueRouter from 'vue-router'

//1.引用  你要用的所有路由页面必须先引用
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Shop from '../views/shop.vue'

Vue.use(VueRouter)
//2配置路由规则
const routes = [
  {
    path: '/',  //url匹配的路径
    name: 'Home', //当前这个规则的命名空间（给当前这个路由起个名字）
    component: Home //当匹配到的时候我要显示的组件页面是什么
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.需要去创建路由出口（自动创建的时候会给我们自动添加）

路由出口就是我们的路由最终要在那里显示

4.设置路由导航

传统的跳转连接我们使用a标签

但是但是但是在vue中千万不要使用a标签哦！！！！！！！

要跳转使用 router-link 就是进行路由页面的跳转连接

手工创建

1.下载vue-router库： npm install --save vue-router

2.创建路由组件页面

就是在views文件夹下创建哪些.vue文件

3.配置路由规则

在router文件夹下的index.js文件中进行先引用在配置

4.实例化路由对象并且传入路由规则

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

5 把路由实例在main.js中传入vue实例中建立关系

6.设置出口 router-view

7.设置导航 router-link

路由导航

路由导航就是切换路由的呢些方式

原生html+css+js如何进行页面切换？

1.html方式:a标签

2.js方式：href replace() go(正数负数) forword() back()

路由导航分类

1.标签的方式(声明式导航)：router-link

router-link 有一个to属性用来表述去哪里

注意：

router-link这个声明式导航最终会在浏览器被编译成a标签但是千万要注意我们不能直接使用a标签

注意：

就是我们在写路由规则的时候path路径不要写/ 要不在路由导航中就会出现问题

注意：

router-link-active

每当我选中之后会发现在路由导航中会自动添加一个类名这个类名是干什么的？

是设置当前选中的样式的我们可以根据vue动态添加的类名进行当前路由选中样式的设置

2.js的方式（编程式导航）

编程式导航就是使用js的方式进行跳转

方式1：最常用页面跳转

this.$router.push("/去哪里“）

方式2：替换当前页面（退不回去了）

this.$router.replace("/那个页面")

方式3：this.$router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

路径通配符

就是使用*号在path中可以匹配所有路径通常是完成404页面的创建

重定向路由

重定向也是通过 routes 中的redirect属性配置来完成

路由规则的优先级

同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

路由模式

hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。

history模式url里面没有#号

在开发app的时候有分享页面，这个分享出去的页面就是用vue做的，把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式

上线之后：做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上。

路由模式的切换：

在index.js中找到vueRouter实例在其中设置mode属性

const router = new VueRouter({
  mode: 'history',//设置路由模式的
  base: process.env.BASE_URL,
  routes
})

嵌套路由/多级路由/二级三级。。。。路由

二级以及以上的路由语法相同都是使用children属性在路由规则中进行配置

创建：

1.创建多级路由页面组件

2.配置二级路由的路由规则

要配置二级路由的规则首先你要知道他是谁的子路由（就在谁的路由规则中写children哦配置规则）

坑1 不加/

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Phone from '../views/phone.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'
// 二级路由
import Era from '../views/er/era.vue'
import Erc from '../views/er/erc.vue'
import Erd from '../views/er/erd.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/phone',
    name: 'Phone',
    component: Phone
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    // 配置二级路由
    // 坑1：在写二级路由的path时候先不加/
    // 坑1：在写二级路由的path时候先不加/
    // 坑1：在写二级路由的path时候先不加/
    // 坑1：在写二级路由的path时候先不加/
    children:[
      {
        path: 'era',
        name: 'Era',
        component: Era
      },
      {
        path: 'erc',
        name: 'Erc',
        component: Erc
      },
      {
        path: 'erd',
        name: 'Erd',
        component: Erd
      },
    ]
  },
  {
    path:"/",
    redirect:"/home"
  }
  
]

const router = new VueRouter({
  mode: 'history',//设置路由模式的
  base: process.env.BASE_URL,
  routes
})

export default router

坑2 加/

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Phone from '../views/phone.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'
// 二级路由
import Era from '../views/er/era.vue'
import Erc from '../views/er/erc.vue'
import Erd from '../views/er/erd.vue'

Vue.use(VueRouter)

// const routes = [
//   {
//     path: '/home',
//     name: 'Home',
//     component: Home
//   },
//   {
//     path: '/phone',
//     name: 'Phone',
//     component: Phone
//   },
//   {
//     path: '/shop',
//     name: 'Shop',
//     component: Shop
//   },
//   {
//     path: '/user',
//     name: 'User',
//     component: User,
//     // 配置二级路由
//     // 坑1：在写二级路由的path时候先不加/
//     // 坑1：在写二级路由的path时候先不加/
//     // 坑1：在写二级路由的path时候先不加/
//     // 坑1：在写二级路由的path时候先不加/
//     children:[
//       {
//         path: 'era',
//         name: 'Era',
//         component: Era
//       },
//       {
//         path: 'erc',
//         name: 'Erc',
//         component: Erc
//       },
//       {
//         path: 'erd',
//         name: 'Erd',
//         component: Erd
//       },
//     ]
//   },
//   {
//     path:"/",
//     redirect:"/home"
//   }
  
// ]

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/phone',
    name: 'Phone',
    component: Phone
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    // 配置二级路由
    // 坑2：在写二级路由的path时候加/
    // 坑2：在写二级路由的path时候加/
    // 坑2：在写二级路由的path时候加/
    // 坑2：在写二级路由的path时候加/

    children:[
      {
        path: '/era',
        name: 'Era',
        component: Era
      },
      {
        path: '/erc',
        name: 'Erc',
        component: Erc
      },
      {
        path: '/erd',
        name: 'Erd',
        component: Erd
      },
    ]
  },
  {
    path:"/",
    redirect:"/home"
  }
  
]

const router = new VueRouter({
  mode: 'history',//设置路由模式的
  base: process.env.BASE_URL,
  routes
})

export default router

3设置二级路由的出口

默认情况下一级路由的出口被脚手架自动添加了但是二级路由的出口必须手动添加

使用router-view 写在一级路由中

4.路由导航

坑1如果刚才创建path的时候没有加/

    
    
    <router-link to="/user/era">erarouter-link>  
    <router-link to="/user/erc">ercrouter-link>  
    <router-link to="/user/erd">erdrouter-link>

坑2如果刚才创建path的时候加了/

    
     <router-link to="/era">erarouter-link>  
     <router-link to="/erc">ercrouter-link>  
     <router-link to="/erd">erdrouter-link>

动态路由匹配路由传参

分类

params方式

（1）在需要接受数据的路由规则中设置接受参数 :xxx

 {
    path: '/shopall/:随便写', //设置接受参数
    name: 'Shopall',
    component: Shopall
  },

（2）开始传递

声明式方式传递

 
      <router-link :to="{name:'Shopall',params:{xiaoming:'我是传递过去的参数params'}}">params声明式传参router-link>

编程式方法传递

课下自行尝试并且添加笔记

（3）接受参数

this.$route.params.xxx

      
      {{this.$route.params.xiaoming}}

query方式

query方式不需要在路由规则中配置参数

（1）发送数据

编程式方式

声明式方式课下自行尝试与加笔记

（2）接收数据

this.$route.query.xxx

query与params区别

1.用法上的：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name。

2.url展示上

query 在url展示上是key=val params在url展示上是只有val

因为query方式显示可key所以在数据传递上不那么安全 panams相对来说安全些

路由守卫/路由卫士/路由钩子/路由验证

就是vue路由在跳转的时候自动触发的一些钩子函数

全局守卫

对所有的路由在切换的时候都生效

全局前置守卫

进入路由之前触发

当一个导航触发时，全局前置守卫(在进入组件之前)按照创建顺序调用。
vue-router 提供的 router.beforeEach（(to，from，next)=>{}）可以方便地实现全局前置导航守卫
to：即将要进入的目标路由对象
from: 当前导航正要离开的路由
next: 下一步执行

// 全局守卫
// to:去哪里
// from：从哪来
// next:下一步
router.beforeEach((to,from,next)=>{
  console.log(to)
  console.log(from)

  if(to.path=="/login"||to.path=="/zhuce"){
    next()
  }else{
    alert("您没有登录请登录后在试一试")
    next(false)
  }

})

全局后置守卫

进入路由之后触发

当一个导航触发时，全局后置钩子(在进入组件之后)调用。
vue-router 提供的 router.afterEach((to, from) => {})实现全局后置守卫
to：即将要进入的目标路由对象
from: 当前导航正要离开的路由

路由独享的守卫

只对当前这一个生效

与全局前置守卫相比路由独享守卫只是对当前路由进行单一控制参数和全局前置守卫相同
在路由配置上直接定义 beforeEnter 进行路由独享守卫定义

 {
    path: '/',
    name: 'Home',
    component: Home,
    // 路由独享
    beforeEnter(to,from,next){
      alert("当前为vip页面 请您登录后访问")
      next("/login")
    }
  },

组件内守卫

组件内守卫是对某一个自定的组件范围在切换路由的时候触发的

进入之前

beforeRouteEnter(to, from, next) {}来进行进入组建前的钩子

离开的时候

在组件中使用beforeRouteLeave(to, from, next) {}来进行离开组件的钩子

路由懒加载

因为vue-router是单页面应用（就是只有一个显示页面剩下的内容都是根据url在切换在哪一个显示页面中切换路由页面组件）

默认情况 vue在第一次加载的时候会把我们写的所有路由页面全部都加载出来 本来是没有什么太大问题的但是一旦页面变多（由于第一次加载的时候需要加载很多页面所以可能会造成浏览器白屏问题/首屏加载过慢的问题）

解决：使用路由懒加载

使用

必须掌握的方式

import 方式

import Vue from 'vue'
import VueRouter from 'vue-router'



Vue.use(VueRouter)

const routes = [
  // 懒加载的方式
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue')
  },
  {
    path: '/phone',
    name: 'phone',
    component: () => import('../views/phone.vue')
  },
  {
    path: '/shop',
    name: 'shop',
    component: () => import('../views/shop.vue')
  },
  {
    path: '/user',
    name: 'user',
    component: () => import('../views/user.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

了解的方式—异步组件方式

  {
    path: '/shop',
    name: 'shop',
    component: resolve=>(require(["引用的组件路径"],resolve))
  },

扩展小知识----脚手架项目怎么启动？

去公司之后每个项目的启动方式可能都不相同所以我们需要会查看项目是使用什么命令启动的

在项目的根路径下根路径下根路径下根路径下查看package.json文件找到scripts 节点即可知道怎么启动的

axios与拦截器封装

基本写法（不建议使用太low 公司也不用但是不讲不行)

1.下载axios npm install --save axios

2.要使用先引用 import axios from “axios”

拦截器

请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

创建

1.新建一个util文件夹(就是存放一些工具库的文件夹)在新建一个api文件夹

2.创建拦截器文件并且写入拦截器内容

import axios from "axios"
// 创建axios 赋值给常量service 
const service = axios.create();

// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default service

3.封装数据请求

// 封装数据请求
// 引用拦截器
import service from "@/util/request.js"
// 2.开始封装请求
export function getlink(url){
    return new Promise((resolve,reject)=>{
        service.request({
            // 原来的axios怎么写 现在就怎么写
            url,
            method:"GET"
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}

4页面使用

模拟数据mockjs

mockjs用来在vue中创建模拟数据接口的方便我们在后台没有给我们接口的时候让我们的项目变成动态请求

1.下载：npm install --save mockjs

2.我们在项目中要有模拟数据那么需要写在那个位置呢？-----创建mock文件夹来容纳模拟数据

3.在mock文件夹下创建data文件夹用来容纳模拟数据并且创建.js文件来编写mockjs代码

import Mock from "mockjs"
// 创建第一个请求
注意大小写   get要小写
// Mock.mock("请求地址你自己写","请求方式get/post",require("你的模拟数据json的地址"))
Mock.mock("/xiaoming/xiaohong","get",require("./data/demo.json"))

4.mock还需要在配置文件中引用千万不要忘

mock还需要在配置文件中引用千万不要忘

在main.js中引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

require("./mock")//引用mock

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

后台发送参数

rest api 是前后端分离最佳实践，是开发的一套标准或者说是一套规范，不是框架。

规范：我告诉你应该怎么做但是你不按照我说的可能不会出问题但是出问题了你别找我

规则：我告诉你应该怎么做你就必须怎么做不按照我说的就完蛋了

restapi 就是在定义接口的时候给接口设置更加语义化的名称

GET 获取数据

POST 发送数据

DELETE 删除

更新/修改

PUT 更多的意思是全部修改或者修改一些

PATCH 更多的意思是修改一个

怎么给后台发送参数

发送参数的时候其实百分之70的情况可以使用如下写法

GET

http://localhost:3000/ceshi/get

请求参数是 name

使用params来进行参数的传递

import service from "@/util/service.js"
export function getlink(url,params){
    return new Promise((resolve,reject)=>{
        service.request({
            url,
            method:"GET",
            // get发送数据的时候使用params发送
            params
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}

DELETE

http://localhost:3000/ceshi/delete

参数 delid

同get 修改发送方式即可

PUT

http://localhost:3000/ceshi/put

参数 putid

同get 修改发送方式即可

POST

http://localhost:3000/ceshi/post

参数 postid

post发送数据的时候使用data发送

import service from "@/util/service.js"
export function postlink(url,data){
    return new Promise((resolve,reject)=>{
        service.request({
            url,
            method:"POST",
            // post发送数据的时候使用data发送
            data
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
    })
}

   mounted(){
        // post发送参数的时候是没有办法直接发送的  因为默认情况下没有
        // 办法解析
        // 所以我们要设置post参数并且解析参数
        let usp=new URLSearchParams()
        // usp.append("你发送的key","你发送的val")
        usp.append("postid",9999)
        
        postlink("/api/ceshi/post",usp).then((ok)=>{
            console.log(ok)
        })
    }

解决跨域

jsonp

正向代理

必须在vue的根路径下创建一个vue.config.js文件

在其中写入如下配置

module.exports={
    // 配置跨域
    devServer: {
        proxy: {  //配置跨域
          '/api': {
            target: 'http://localhost:3000/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
            changOrigin: true,  //允许跨域
            pathRewrite: {
              '^/api': '' 
            }
          },
        }
      },
}

修改请求地址为/api/xxxx 注意配置的代理之后项目必须重启

cors

拦截器更多配置与token的前端使用

1.拦截器更多配置—相应拦截

失败响应的status(状态码)需要在response中获得 error.response.status

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么-----后台能后正常给我们相应数据拦截的地方
 
    return response;
  }, function (error) {
    // 对响应错误做点什么-----404 500 403出现的位置
    console.log(error.response.status)
    switch (error.response.status) {
        case 500:
                // 处理的操作
                alert("当前连接超时")
            break;
        case 404:
                // 处理操作
                alert("您访问的页面不存在")
                // 把页面跳转到首页    
                break;
        default:
            return Promise.reject(error);
           
    }
    return Promise.reject(error);
  });

扩展知识----自动开启浏览器与端口修改

先要在项目的根路径下创建vue.config.js

module.exports={

  devServer:{

    port:8899// 修改端口

  }

}

自动开启浏览器

module.exports={
    devServer:{
        port:8899,// 修改端口
        open:true//自动开启浏览器
    }
}

动态组件

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

keep-alive—解决状态丢失

在上一个demo中我们不停的切换两个标签页的内容时候，会发现在练习我们中选择好的内容，切换路由之后会恢复初始化。
也就是说之前的状态丢失。原因是每次切换路由的时候，Vue 都创建了一个新的组件实例

keepalive就是解决状态丢失的

使用

如果要使用就在想保存组件状态的出口位置使用keep-alice包裹

解决这个问题，我们可以用一个元素将其路由出口包裹起来。在切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

使用在动态组件之上

    

使用在路由上

动态组件的属性

比如刚才我们动态组件举例有三个组件我使用包裹了动态组件那么他就会保存所有的三个组件的状态

如果我在三个动态组件中指向保存两个的状态一个不保存怎么办？

include 需要缓存谁

exclude 不想缓存谁

注意

如果两个属性都写了那么 exclude优先级大于include

keep-alive 的钩子函数

这两个生命周期函数一定是要在使用了keep-alive组件之上。

activated 类型：func 触发时机：keep-alive组件激活时使用；

deactivated 类型：func 触发时机：keep-alive组件停用时调用；

自定义指令

除了内置指令外，用户自定义的指令
局部指令定义：
directives:{
自定义指令的名字：{
自定义指令钩子函数(el){
操作逻辑
}
}
},

自定义指令钩子函数

bind：绑定指令到元素上，只执行一次

inserted：绑定了指令的元素插入到页面中展示时调用，基本上都是操作这个钩子函数

update：所有组件节点更新时调用

componentUpdated：指令所在组件的节点及其子节点全部更新完成后调用

unbind：解除指令和元素的绑定，只执行一次

ref

思考vue中能用js的documet.getElementByxxxx进行dom操作吗？

可以使用

  mounted(){
        console.log(document.getElementsByTagName("p")[0].innerHTML)
    }

思考2思考vue中能用jquery进行dom操作吗？

可以使用

1.下载 npm install --save jquery\

2.,引用 import $ from “jquery”

3,.使用

为什么用ref

虽然在vue中不建议不建议议不建议议不建议议不建议议不建议议不建议大家使用dom操作

在有些极端情况下不得不用所以在vue中我们就是用ref进行vue中的dom操作

使用

ref 就是在vue中给dom元素起个名字

<em ref="demoem">我是测试vue的ref的例子em>

$r e f s 这个就相当于 d o m 查找 t h i s .$ refs.你给dom上起的ref名字

funb(){
            this.$refs.demoem.style.color="pink";
        }

ref绑定的位置

ref 绑定到dom元素之上

可以进行页面的dom操作

ref绑定到子组件之上

绑定到组件之上就可以获取到组件的所有属性和方法

请您能给我说下vue中父组件如何触发子组件的方法？

vuex

主要用于组件传值

正向传值 props

逆向传值 $emit()

同胞传值（稍后讲）

夸层级/夸组件传值 ---- vuex

传统跨层级传值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suy35PGQ-1624408588812)(.\img\3.bmp)]

新闻组件使用联系组件的数据传统方式进过几个正传和逆传后期可维护性为0

简便的方式进行类似于跨层级传值

VUEX基本

vuex 状态（数据）管理工具

vuex就是一个数据仓库把所有的组件数据统一的放在vuex中那么这样一来那个组件想使用数据那么这个组件直接就去vuex中进行读取即可大大简化了传递数据的复杂性

vuex集中的数据存储，方便程序中的所有组件进行访问

创建vuex

自动创建方式

创建vue脚手架的时候选中vuex即可

手动创建(记住)

1.下载vuex npm install --save vuex

2.创建文件夹与文件

3.开始创建store（变量存储的就是vuex实例）

import Vue from 'vue'//引用vue
import Vuex from 'vuex' //引用vuex

Vue.use(Vuex)// 在vue中use(使用)vuex
// 暴露 vuex实例
export default new Vuex.Store({
  
 
})

4 把vuex实例引用注入到vue实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'//引用vuex实例

Vue.config.productionTip = false

new Vue({
  router,
  store,//把vuex注入到vue实例中进行使用
  render: h => h(App)
}).$mount('#app')

vuex 的5大核心API

state—数据源

state的作用没有什么复杂的就是用来创建数据的 vuex的所有数据必须必须必须只能放在state中

创建

import Vue from 'vue'//引用vue
import Vuex from 'vuex' //引用vuex

Vue.use(Vuex)// 在vue中use(使用)vuex
// 暴露 vuex实例
export default new Vuex.Store({
  state:{//存放数据的  可以存放任何数据
    text:"我是一个字符串",
    num:123,
    arr:[1111,2222,3333,444,5555]
  } 
 
})

使用数据state

在想使用数据的组件内 this.$store.state.xxx 使用vuex的state数据

<template>
  <div class="about">
    <h1>This is an about pageh1>
       <h1>{{this.$store.state.text}}h1>
  div>
template>

state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

vuex的数据是响应式的那么既然想是响应式我们如何进行修改呢？

mutations

mutations 修改vuex的state数据他只有一个作用就是修改

mutations是一个属性他里面方的就是修改state的一个一个的方法。

创建

import Vue from 'vue'//引用vue
import Vuex from 'vuex' //引用vuex

Vue.use(Vuex)// 在vue中use(使用)vuex
// 暴露 vuex实例
export default new Vuex.Store({
  state:{//存放数据的  可以存放任何数据
    text:"我是一个字符串",
    num:123,
    arr:[1111,2222,3333,444,5555]
  } ,
  mutations:{//修改state的数据
    // 修改方法1(state 这个形参就是上面的state){},
    // 修改方法2(state 这个形参就是上面的state){},
    // 修改方法3(state 这个形参就是上面的state){},
    // 修改方法4(state 这个形参就是上面的state){},
    // 修改方法5(state 这个形参就是上面的state){},
    xiaoming(state){
        state.text="呵呵"
    }
  }
 
})

上面创建了一个修改的mutations

虽然有一个xiaoming的修改方法但是我在组件页面中如何去调用它呢？

调用mutatioins中的修改方法 commit(“调用的方法名”)

vuex mutations 提交载荷 payload

  xiaoming(state,payload){
          state.text=payload.name
      }
      
  在组件调用
  this.$store.commit("xiaoming",{key:val,key:val})

扩展------必须要知道很重要 vuex数据刷新丢失

<template>
  <div class="about">
    <h1>This is an about page</h1>
       <h1>{{this.$store.state.text}}</h1>
       <button @click="fun()">点我修改</button>
  </div>
</template>
<script>
export default {
// 解决vuex数据刷新丢失的问题
  created () {
        //在页面加载时读取localStorage里的状态信息
        if (localStorage.getItem("data") ) {
            //replaceState替换数据 Object.assign合并对象
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("data"))))
        } 
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("data",JSON.stringify(this.$store.state))
        })
      },
// 解决vuex数据刷新丢失的问题


  methods:{
    fun(){
      // 调用修改调用修改使用this.$store.commit("mutations的方法名")
      this.$store.commit("xiaoming")
    }
  }
}
</script>

actions 处理异步操作

actions 在vuex中的唯一作用就是用来处理异步操作的
actions 是vuex的一个属性里面写的是一个一个的方法方法中存的就是异步操作

创建

import Vue from 'vue'//引用vue
import Vuex from 'vuex' //引用vuex

Vue.use(Vuex)// 在vue中use(使用)vuex
// 暴露 vuex实例
export default new Vuex.Store({
  state:{//存放数据的  可以存放任何数据
    text:"我是一个字符串",
    num:123,
    arr:[1111,2222,3333,444,5555]
  } ,
  mutations:{//修改state的数据
    // 修改方法1(state 这个形参就是上面的state){},
    // 修改方法2(state 这个形参就是上面的state){},
    // 修改方法3(state 这个形参就是上面的state){},
    // 修改方法4(state 这个形参就是上面的state){},
    // 修改方法5(state 这个形参就是上面的state){},
      xiaoming(state,payload){
          state.text=payload.name
      }
  },
  actions:{//处理异步操作
    // 一个一个的方法
    demoa(){console.log("我是第一个异步")},
    demob(){console.log("我是第2个异步")},
    democ(){console.log("我是第3个异步")},
  }
 
})

调用 actions 如果actions想被调用必须必须必须要使用this.$store.dispatch(“actions名字”)

actions进行vue异步请求数据闭环

1.既然要进行异步请求就要走vue中使用axios的那些东西新建util 新建api 来进行请求与拦截器的封装

2.异步操作是在vuex actions中所以我们需要在actions中创建一个方法在方法中调用异步请求

import Vue from 'vue'
import Vuex from 'vuex'
// 引用
import {getlink} from "@/api/getapi.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
    // 需要在vuex中发送异步操作
    actiondemoa(){
        getlink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then((ok)=>{
          console.log(ok)
        })

        }
  }
  },
  modules: {
  }
})

3.在需要发送请求的组件页面中触发actions （this.$stroe.dispatch()）触发了之后这个请求就发送了

4.数据已经在actions打印出来了由于vuex的数据需要存储在state中所以我们需要让actions请求来得数据修改state中的某个变量

在actions中要调用commit触发mutations修改state

import Vue from 'vue'
import Vuex from 'vuex'
// 引用
import {getlink} from "@/api/getapi.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    arr:[]
  },
  mutations: {
    dataarr(state,payload){
      state.arr=payload
    }
  },
  actions: {
    // 需要在vuex中发送异步操作
    actiondemoa(context){
        getlink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then((ok)=>{
          console.log(ok.data.data.commentList)
          // 把请求来得数据交给mutations修改
          context.commit("dataarr",ok.data.data.commentList)

        })

     }
  
  },
  modules: {
  }
})

在页面使用

数据请求闭环示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tvyxcki2-1624408588814)(.\img\4.png)]

payload

acions也可以通过dispatch向actions中传递参数那么这个参数就是payload

getters

getters 就是vuex的计算属性

vuex的getters与传统vue的computed计算属性有什么区别？

作用域 vue的计算属性处理出来的数据只能在当前组件内使用但是vuex使用getters处理的数据可以在任何组件中多次使用

一条数据在一个组件内展示不同的形态的时候使用vue的计算属性

一条数据在多个组件内想重复使用处理出来的不同形态数据的时候使用vuex的getters

getters是一个vuex的属性

创建：

  getters:{//vuex的计算属性
    newtext(state){
      return state.text.toUpperCase()
    }
  },

使用

与使用state相同在组件中的计算属性当中使用 this.$store.getters.xxx来进行调用

modules

在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

1.在store文件夹中新建文件夹存放模块

2.编写属于组件的模块

export let aboutm={
    state: {
        demoa:"111",
        demob:"22",
        democ:"113331",
      },
      mutations: {
      },
      actions: {
      },
}

3.在vuex的配置中引用使用

import Vue from 'vue'
import Vuex from 'vuex'
import {aboutm} from "./modules/aboutm.js"
import {homem} from "./modules/homem.js"

Vue.use(Vuex)

export default new Vuex.Store({
 
  modules: {
    aboutm,homem
  }
})

4注意如果使用了模块在读取数据的时候就有区别了

this.$store.state.模块名.xxxx

vantui

https://vant-contrib.gitee.io/vant/#/zh-CN/

组件传值

正向传值 props

逆向传值 $emit() ref

同胞兄弟传值 eventBus

中央事件总线 eventBus

创建一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。

1.新建一个文件夹用来容纳中央事件总线这个vue实例

// 中央事件总线就是新建一个vue实例用来当兄弟组件的数据桥梁
import Vue from "vue"
export default new Vue()

2 兄弟传值 demoa需要把数据给demob

（1）现在demoa中使用$emit()把数据通过自定义事件绑定到那个vue实例上\

（2）在demob中使用$on来监听接收实例上的自定义事件

1、创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁
2、在需要传值的组件中用bus. $e m i t 触发一个自定义事件，并传递参数 (e m i t 前加美元符) 3 、在需要接收数据的组件中用 b u s .$ on监听自定义事件，并在回调函数中处理传递过来的参数

跨组件传值 vuex

Mixins 混入

mixins是vue中组件的一种复用技术它可以把组件中很多相同的属性与方法等属性提取出来方便多个组件进行复用

局部混入

1.创建一个文件夹用来容纳混入内容

let mixinsdemo={
    methods:{
        funb(){
            console.log("我是一个方法")
        }
    },
    data(){
        return {
            textm:"我是混入的变量"
        }
    }
}
export default mixinsdemo

2.在想使用的地方引用调用使用

全局混入

在任何组件中都可以使用
在main中引用并且使用
import MinXin from ‘@/components/MinXins/index.js’
Vue.mixin(MinXin);

在组件中即可随意使用混入中的数据

路由拆分—与大纲内容无关（了解掌握）

1.router下的index这个文件随着项目体量逐渐增大会导致后期维护困难

elementui

下载详见官网 https://element.faas.ele.me/#/zh-CN/component/quickstart

引用

main.js中添加


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

你可能感兴趣的:(vue笔记)

Vue笔记九：axios原理之promise 努力努力再努力dyx Vue vue.js javascript 前端
axios是基于promise的HTTP库，支持promise所有的APIpromise概念promise是JS中解决异步编程的语法，从语法上来讲，promise是一个构造函数，从功能来讲，用promise对象封装异步操作并获取结果。promise支持链式调用，可以解决回调地狱（多级的异步嵌套调用）。promise的基本使用创建promise对象并使用回调函数constp=newPromise((
Vue笔记 -- CSS之清除浮动 lyking
一、代码如下HTMLCSS.container{border:4pxsolidred;overflow:hidden;}.left{width:100px;height:400px;background-color:#482;float:left;}.right{width:200px;height:400px;background-color:#d96;float:right;}.footer{
2021-10-21 vue笔记-组件化开发(四) 组建通信:非父子通信-事件总线,在vue项目中使用eventbus的例子前端OnTheRun vue学习笔记 vue.js 组件非父子通信组建通信 eventBus
文章目录1.事件总线(eventBus)定义用途原理2.eventBus使用步骤3.在HTML网页中使用事件总线:模拟公众号和用户之间信息的发送和接收代码结果4.在vue项目中使用事件总线:点击增加减小按钮实现数值的增减4.1.初始化:创建一个事件总线4.2.发送事件:导入eventBus，使用`$emit`发送数据；子组件IncrementCount子组件DecreaseCountIncreme
Vue笔记总结（Xmind格式）：第二天星河路漫漫 vue.js 笔记前端
Xmind鸟瞰图：简单文字总结：vue知识总结：创建vue脚手架：1.安装Node.js：VueCLI作为一个npm包，需要Node.js来安装和运行。2.安装VueCLI：cmd指令npminstall-g@vue/cli3.创建Vue项目：vuecreate项目名4.启动服务器：npmrunserveVue脚手架生成的主要项目文件：1.node_modules#项目依赖的第三方包2.publi
小白学习vue笔记善良的爱心话 vue vue keep-alive axios 组件
文章目录一安装Vue二做移动端应用注意2.1在index.html中修改mate设置2.2reset.css重新设置样式，在入口文件中引入2.3引入border.css解决一像素边框的问题2.4解决click延迟300ms的问题fastclick插件2.5在style中引入其他样式，需要这样[email protected]对全局事件的解绑2.7解决么面滑动影响其他页面的问题3插件使用3.1stylus和stylus-l
codewhy_vue笔记01 qq_43827247 前端 html5 es6 webpack vue.js
Vue.js安装这里我们使用方式二：去官网，下载vue.js(开发版本)使用webstorm新建项目，然后新建js文件夹，把刚才下载的vue.js放到js文件夹下修改数据第一个vue代码Title{{message}}//let（变量）const(常量）//newVue，说明有一个functionVue()//声明式编程constapp=newVue({//用于挂载要管理的元素el:'#app',
Vue笔记ゐ叶う枫ゆ vue.js
Vue1.邂逅Vuejs1.1简单认识一下VuejsVue是一个渐进式的框架，什么是渐进式呢？渐进式意味着你可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验或者你希望将更多的业务逻辑使用Vue实现，那么Vue核心库以及其生态系统。比如Core+Vue-router-Vuex，也可以满足你各种各样的需求。Vue有很多特点和Web开发中常见的高级功能解耦试图的数据可复用的组件前端路由技术状态
初识Vue笔记 humorous man vue js
Vue.jsVue.js初体验Document{{message}}newVue({el:"#app",data:{message:"Vue.js初体验",}})vue的列表展示使用v-for遍历data中的列表Document{{item}}newVue({el:"#app",data:{message:"Vue.js初体验",movies:['星际穿越','大话西游','少年派','盗梦空间'
Vue笔记_03组件_vuedraggable实现拖拽(基于vue) 乖女子@@@ #vue2 vue.js javascript ecmascript
目录1.下载2.使用vuedraggable组件vue有一个vuedraggable组件可以实现拖拽效果1.下载npminstallvuedraggable2.使用vuedraggable组件[1]引入importdraggablefrom'vuedraggable'[2]注册components:{draggable},[3]使用v-model绑定的值为一个数组，当拖拽完成后数据变化之后数据中元
vue笔记（二）：vue router和pinia 垃圾管理员 vue笔记 vue.js 笔记
首vuerouter实现路由功能，是一种前端渲染方式。pinia用于组件间共享数据，替代之前的vuex功能，成为新的官方推荐。安装后，导入方式如下main.js:import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'importrouterfrom'./router'constapp=crea
vue笔记（一）：部署垃圾管理员 vue笔记笔记 vue.js
首文档安装1、安装nodejs（链接），18.0以上版本。2、在想要创建项目的目录下执行命令npmcreatevue@latest按提示创建项目，其中vuerouter是实现路由功能，pinia实现组件之间共享数据。如果项目需要两个功能建议选择yes。3、cdnpminstallnpmrundev启动项目访问所给链接即可。安装bootstrap如果创建项目时，部分功能没有选择，之后可手动加入，以b
学习mpvue笔记——koa入门从小就很瘦
koa是什么？koa基于Nodejs平台的下一代web开发框架（上一代是express）。Express原班人马打造，更精简。Async+await处理异步洋葱圈型的中间件机制。用法很简单：mkdirkoa-demonpminitnpminstallkoa--save文件夹中新建一个server.jsconstKoa=require('koa')constapp=newKoa()app.use(a
vue笔记之$listeners 精神小伙2号 vue.js 笔记前端
含义将事件从父组件传递到子组件作用可以实现孙组件的数据传递到爷组件中去示例爷组件我是爷组件{{fromSunData}}importfufrom"./views/fu.vue";exportdefault{components:{fu},data(){return{msg:"二郎神",};},methods:{fromSun(payload){console.log("孙传祖",payload);
vue笔记之$attr 精神小伙2号 vue.js 笔记前端
含义$attr是一个对象，它包含了父组件传递给子组件但子组件没有显式声明的props作用父亲传数据到孙子示例父组件importChildfrom'../components/child.vue'exportdefault{name:'father',components:{Child},data(){return{name:'Lily',age:22,infoObj:{from:'上海',job:
vue笔记不识地理不懂距离
简写v-bind:v-on@计算属性是响应式，值更新再计算，函数不是，每次都调用函数v-if:假的时候不渲染v-show始终渲染，只改变display属性不建议v-if与v-for一起使用多行字符串可以添加\增加易读性event.target返回是哪个DOM组件触发了事件.passive执行默认方法会忽略掉.prevent可以通过全局config.keyCodes对象自定义按键修饰符别名：//可以
vue笔记9.10 那年的雨
1，下载js库输入npminstallvue2，v-for对数组或对象进行循环操作需要哪个元素（HTML的标签）循环，那么v-for就写在那个元素上使用v-for可以把obj的每个key对应的value值遍历出来，并且填到对应的li元素中v-for除了可以使用在数组上之外还可以应用在对象上3，v-for的使用浏览器打开4，table表格浏览器打开
代码随想录刷题笔记（DAY3） *Soo_Young* 代码随想录笔记
今日总结：虽然之前刷过链表，但这次做的是有些费力的，也有了更深的理解。整理完今天的Vue笔记就睡。。。DAY301.移除链表元素（No.203）题目链接：https://leetcode.cn/problems/remove-linked-list-elements/description/代码随想录题解：https://programmercarl.com/0203.%E7%A7%BB%E9%9
VUE笔记半糖不加奶前端 vue.js 笔记前端
VUE一.VUE基础1.什么是vuevue是一套用于构建用户界面的渐进式javascript框架2.vue的特点1.采用组件化模式，提高代码复用率，便于维护代码2.声明式编码让编码人员无需直接操作DOM，提高开发效率3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点3.初始Vue1.想让vue工作，必须创建vue实例，且传入一个配置对象2.root容器里的代码依然符合html规范，只不过混
前端进阶_狂神Vue笔记_前端核心分析_前端发展史_前后分离的演变史 1017w vue.js javascript html
Vue笔记想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。一、前端核心分析1.1、概述Soc原则：关注点分离原则Vue的核心库只关注视图层，方便与第三方库或既有项目整合。HTML+CSS+JS:视图：给用户看，刷新后台给的数
狂神Vue笔记最全最相同小小小小小韩呀! 笔记 html5 javascript jquery css vue.js
狂神说Vue笔记bilibili视频地址Vue的核心库只关注视图层，方便与第三方库或既有项目整合。HTML+CSS+JS:视图：给用户看，刷新后台给的数据网络通信：axios页面跳转：vue-router状态管理：vuexVue-UI:ICE,ElementUI一、概述Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式JavaScript框架，发布于2014年2月。与其它大型
VUE笔记岁碎难相见 vue.js 前端 javascript
目录第一天1.vue实例2.插值表达式3.VUE响应式特性4.安装VUE开发者工具5.VUE指令5.1v-html5.2v-show和v-if5.3v-else和v-else-if5.4v-on（@事件名）5.5v-bind（：属性名=“表达式”）5.6图片切换案例5.7v-for5.8渲染图书列表并删除指定图书5.9v-for中的key5.10v-model6.案例-小黑记事本6.1渲染和删除6
Vue学习笔记01-基础部分 sgxmr 前端 vue.js
文章目录VUE笔记-01基础1、简介mvvmES6补充js高阶函数let/varconst增强字面量写法2、基础2.1、引入2.2、第一个Vue程序el挂载点data数据对象methodsVue的生命周期(补)2.3、Vue指令**Mustache:胡子/胡须.****v-once**不经常**v-pre**cloak(了解)v-htmlv-textv-on绑定事件v-onv-on修饰符v-on参
Vue笔记（五）路由进阶 NameExist Vue vue.js 笔记 javascript
导航守卫vue-router提供导航守卫主要通过跳转或**取消*的方式守卫导航。有很多方式植入路由导航中：全局的、单个路由独享的，或者组件级的。全局前置守卫：beforeEach。每个守卫接收两个参数：to：将要进入的目标from：当前导航正要离开的路由constrouter=createRouter({...})router.beforeEach((to,from)=>{//如果返回false会
千锋 Vue 详细笔记整理 sail Jamie 前端 vue.js 前端框架前端
视频笔记是根据B站千锋涛哥-SpringBoot+vue+前后端分离项目《锋迷商城》实战课-完结版进行整理的笔记可上gitee仓库自取千锋Vue笔记整理一、vue的简介1.1使用JQuery的复杂性问题1.2VUE简介1.2.1前端框架1.2.2MVVM二、vue入门使用2.1vue的引入2.2入门案例--HelloWorld三、vue的语法3.1基本类型数据和字符串3.2对象类型数据3.3条件v
Vue笔记：记一个base64转blob数据流，再转化为图片Url Phl_zovnf 笔记 javascript 前端 vue.js
主要是将base64字段转化成blob数据流，再转换为图片Url，用于src引用地址base64ImgtoFile//图片base64转blob数据流base64ImgtoFile(dataurl,filename="file"){constarr=dataurl.split(",");constmime=arr[0].match(/:(.*?);/)[1];constsuffix=mime.sp
Vue笔记路由的query参数、命名路由、路由的params参数、路由的props配置翘阳啦 Vue 前端 javascript vue.js
一、路由的query参数1、传递参数{{m.title}} {{m.title}} 2、接收参数$route.query.id$route.query.title二、命名路由
Vue学习笔记-总结学编程的LY vue.js javascript
狂神说Vue笔记Vue的核心库只关注视图层，方便与第三方库或既有项目整合。HTML+CSS+JS:视图：给用户看，刷新后台给的数据网络通信：axios页面跳转：vue-router状态管理：vuexVue-UI:ICE,ElementUI一、前端核心分析1.VUE概述Vue(读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设
16.VUE 码农碎碎念 java vue vue.js vue 前端
狂神说Vue笔记Vue的核心库只关注视图层，方便与第三方库或既有项目整合。HTML+CSS+JS:视图：给用户看，刷新后台给的数据网络通信：axios页面跳转：vue-router状态管理：vuexVue-UI:ICE,ElementUI一、前端核心分析1.VUE概述Vue(读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设
Vue快速入门 codecapture 前端 vue.js 前端 javascript
狂神说Vue笔记想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。视频链接：https://www.bilibili.com/video/BV18E411a7mC?p=16&vd_source=c2d3149b8b6fdae1
vue笔记3 虚拟dom、重流、diff 前端之旅 Vue vue
本文锚点老规矩先放链接致敬作者虚拟domtips：重排(回流)和重绘v-showv-if真实DOM和其解析流程（浏览器）diff算法传统diff算法Reactdiff算法vuediff算法vue和react的diff算法的区别不能用index作为key的原因总结老规矩先放链接致敬作者使用虚拟dom和真实dom的区别详细理解重绘与回流/重排的过程display:none和visibility:hid
分享100个最新免费的高匿HTTP代理IP mcj8089 代理IP 代理服务器匿名代理免费代理IP 最新代理IP
推荐两个代理IP网站： 1. 全网代理IP：http://proxy.goubanjia.com/ 2. 敲代码免费IP：http://ip.qiaodm.com/ 120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/
mysql高级特性之数据分区 annan211 java 数据结构 mongodb 分区 mysql
mysql高级特性 1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是
JS采用正则表达式简单获取URL地址栏参数 chiangfai js 地址栏参数获取
GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null
怎样将数据表拷贝到powerdesigner (本地数据库表) Array_06 powerDesigner
================================================== 1、打开PowerDesigner12，在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后，弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字，自
logbackのhelloworld 飞翔的马甲日志 logback
一、概述 1.日志是啥？当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 当我项目工作时，以为是一堆得.log文件。这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。传送门1：日志的作用与方法： http://www.infoq.com/cn/articles/why-and-how-log 上面的作
新浪微博爬虫模拟登陆随意而生新浪微博
转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235 近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求
synchronized 香水浓 java thread
Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然
maven 简单实用教程 AdyZhang maven
1. Maven介绍 1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo
Android 通过 intent传值获得null aijuans android
我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){ Intent i =
apache 做代理报如下错误：The proxy server received an invalid response from an upstream baalwolf response
网站配置是apache＋tomcat,tomcat没有报错，apache报错是： The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr
Tomcat6 内存和线程配置 BigBird2012 tomcat6
1、修改启动时内存参数、并指定JVM时区（在windows server 2008 下时间少了8个小时）在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数： window下，在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5
Karam与TDD bijian1013 Karam TDD
一.TDD 测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。 TDD的原则很简单： a.只有当某个
[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States bit1129 zookeeper
public enum States { CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态 ASSOCIATING, //？？？ CONNECTED, //链接建立，可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在
【Scala十四】Scala核心八：闭包 bit1129 scala
Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x
android发送json并解析返回json ronin47 android
package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import
一份IT实习生的总结 brotherlamp PHP php资料 php教程 php培训 php视频
今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来
据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。将重物放到天平左侧，问在两边如何添加砝码 bylijinnan java
public class ScalesBalance { /** * 题目： * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。（假设N无限大，但一种重量的砝码只有一个） * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡 * * 分析： * 三进制 * 我们约定括号表示里面的数是三进制，例如 47=(1202
dom4j最常用最简单的方法 chiangfai dom4j
要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要
简单HBase笔记 chenchao051 hbase
一、Client-side write buffer 客户端缓存请求描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。可以使用getWriteBuffer()方法来取得客户端缓存中的数据。默认关闭。二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使
mysqldump导出时出现when doing LOCK TABLES daizj mysql mysqdump 导数据
　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　导出表时，会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决
CSS渲染原理 dcj3sjt126com Web
从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？一、浏览器的发展与CSS
《阿甘正传》台词 dcj3sjt126com
Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol
Java处理JSON dyy_gusi json
Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 1、读取json然后处理 class ReadJSON { public static void main(String[] args)
win7下nginx和php的配置 geeksun nginx
1. 安装包准备 nginx : 从nginx.org下载nginx-1.8.0.zip php：从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口 2. 配置 # java用8080端口做应用服务器，nginx反向代理到这个端口即可 p
基于2.8版本redis配置文件中文解释 hongtoushizi redis
转载自： http://wangwei007.blog.51cto.com/68019/1548167 在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文
第五章常用Lua开发库3-模板渲染 jinnianshilongnian nginx lua
动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r
JZSearch大数据搜索引擎颠覆者 JavaScript
系统简介：大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引
10招让你成为杰出的Java程序员 pda158 java 编程框架
如果你是一个热衷于技术的 Java 程序员，那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。　　 1. 拥有扎实的基础和深刻理解 OO 原则　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言
tomcat之oracle连接池配置小网客 oracle
tomcat版本7.0 配置oracle连接池方式：修改tomcat的server.xml配置文件： <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou
Oracle 分页算法汇总 vipbooks oracle sql 算法 .net
这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag

Vue知识总结

与三阶段无关

渐进增强和优雅降级

disabled 标签禁用的属性

请你说一下常见的js dom操作有哪些？

es6解构赋值

原型图设计

vue的基本概念

作者 :尤雨溪

是什么

MVVM是一个框架的模式：

什么是框架

框架的优势

MVC

MVVM

vue的开发目的

HelloWord

vue的渲染方式

声明式渲染与数据驱动

总结：

指令

v-model

双向绑定的原理

v-show

v-on

v-for

v-bind

v-if 全家桶

v-if与v-show的区别

v-else

v-else-if

v-text

屏幕闪动

v-html与v-once

我是字符串标签

侦听/监听 watch

计算属性

计算属性(computed)与methods（方法）的区别

事件对象

修饰符

按键修饰符

事件修饰符

交互

axios

初体验

生命周期与钩子函数

自定义过滤器

全局过滤器

局部过滤器

项目环境配置 vue脚手架

前期准备

使用

空脚手架创建好之后怎么办？

单文件组件

扩展小概念

组件

分类

全局组件

局部组件

创建

组件中的属性使用

组件的样式设置

父子组件

父子组件的作用域

父子组件传值

正向传值

props验证

逆向传值

路径别名

slot

slot使用

测试slot

具名槽口

路由

路由创建

脚手架自动创建

与之前默认的脚手架项目区别

创建新页面过程

手工创建

路由导航

动态路由匹配路由传参

基本写法（不建议使用太low 公司也不用但是不讲不行)