vue相关概念

于 2022-02-11 18:11:39 发布
阅读量772 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/APPTX4869/article/details/122885154
版权

vue 基本概念

作者： 尤雨溪

渐进式 的 自底向上增量开发的 mvvm框架

渐进式 可以和多种框架进行合并 vue是一个渐进式的框架（vue只会按照我们程序员的需要来进行功能的实现 不会影响到项目中没有用到vue框架的区域）只会做职责以内的事情

自底向上增量开发：先完成最基本的页面 然后再使用vue进行数据的绑定 一步步完成整个项目

mvvm

helloword

1、获取vue库文件（使用npm（包管理工具）来进行获取）

（1）在你要写项目的文件夹 上打开cmd

（2）初始化 npm init -y

(3) 下载 npm install --save xxx （默认最新版 指定版本 npm install --save xxx@你的版本）

如果太慢 可以切换成淘宝镜像 安装：npm i -g cnpm --registry=https://registry.npm.taobao.org

（4)开始编写vue的helloword

<!DOCTYPE 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>Document</title>
    <!-- 1引用vue -->
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        MVVM

        M    model       模型----》就是存储变量数据的地方
        V    view        视图----》页面 html所写的那些东西
        VM   viewModel   视图模型----》就是页面与数据之前桥梁


     -->

     <!-- 2.创建 v层 -->
     <div id="demoDiv">
        <h1>{{text}}</h1>
        <h1>{{obj.name}}</h1>
     </div>
     <script>
        //  3。vm层创建(就是vue实例)
        new Vue({
            // 4.创建m层数据
            data:{
                text:"你好",
                num:18,
                bool:true,
                arr:[111,223,444,555,6,6,7,7],
                obj:{
                    name:"xixi",
                    age:18
                }
            },
            // 5.关联视图层
            el:"#demoDiv"
        })

     </script>
    
</body>
</html>

{{}}模板语法

就是把模型数据插入到视图中

语法：

{{表达式}}

表达式： 通过计算返回结果的公式

<!DOCTYPE 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>Document</title>
    <script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
    <div id="demoDiv">
        <h1>{{}}中不建议复杂的内容</h1>
        {{num+demo}}
        <h1>{{bool?"你好":"你坏"}}</h1>
        <h1>{{text}}</h1>
        <h1>{{text.toUpperCase()}}</h1>

    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                num:2,
                demo:3,
                bool:false,
                text:"abcdefghijk"
            }
        })

    </script>
</body>
</html>

数据渲染

声明式渲染

我们只需要告诉程序你要干什么 他就会自动完成

命令式渲染

在js中我们使用的所有变量的插入页面的过程 就是命令式 我们需要指挥程序一步步干什么

<!DOCTYPE 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>Document</title>
</head>
<body>
    <h1 id="demoh"></h1>
    <script>
        let text="你好"
        document.getElementById("demoh").innerHTML=text
    </script>
</body>
</html>

数据驱动

vue就是一个js框架 作用就是把数据用更加简单的方式插入到页面中 vue可以根据数据的改变让页面也随之发生改变

指令

基本概念

在vue中带有v-前缀的html特殊属性

指令的作用:是给html添加特殊的功能

语法:写在html的开标签中 v-指令=“指令值”

v-model

作用: 给表单元素进行数据的

语法：v-model="变量"

<!DOCTYPE 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>Document</title>
    <script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-model</h1>
        <!-- 1.v-model可以吧一个变量绑定到表单元素之上  当表单元素的值
        改变了  那么这个变量也会随之改变
        v层视图层 改变了数据 m层模型层也随之改变了 （视图变 模型变）  -->

        <input type="text" v-model="text"/>
        <!-- 模型变了视图也会随之发生改变 -->
        <em>{{text}}</em>

<!-- 
        双向绑定  就是  数据在模型中改变  视图也会改变  反之
        视图变了  模型也会改变 -->

    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
              text:"你好"
            }
        })

    </script>
</body>
</html>

双向绑定的原理

原理：数据劫持与发布者订阅者模式

数据劫持:数据拦截 vue中使用Object.defineProerty() 就是可以监听着我们data中的模型数据 当数据改变的时候 Object.defineProerty() 就会触发 模型改变 他会通知视图改变 视图改变 就会通知模型进行改变 会监听这改变 与修改

发布者订阅者模式：就是一个一对多的关系 发布者变了 所有的订阅者都会随之发生改变

v-show

作用: 就是控制元素的显示和隐藏

语法:v-show="布尔值" true显示 false隐藏

<!DOCTYPE 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>Document</title>
    <script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-show</h1>
        <h1 v-show="bool">控制我的显示和隐藏</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               bool:false
            }
        })

    </script>
</body>
</html>

v-on

作用:就是给dom元素绑定事件

语法: v-on:事件（不加on）=“函数” v-on:click="？？？" v-on:change="????"

简写语法: @事件="函数"

函数写在那?

函数写在与el data 同级的位置 使用methods进行包裹

<!DOCTYPE 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>Document</title>
    <script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-on</h1>
        <button v-on:click="fun()">点我打印内容</button>
        <button @click="funb()">简写</button>

    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
        
            },
            methods:{
                fun(){
                    console.log("你好")
                },
                funb(){
                    console.error("你坏")
                }
            }
        })

    </script>
</body>
</html>

v-for

作用： 便利data中的数据

语法： v-for="(便利的值,便利的下表) in 你要便利的数据"

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-for</h1>
        <ul>
            <li v-for="(v,i) in arr">
                {{v}}------{{i}}
            </li>
        </ul>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                arr:["EZ","MF","NOC","VN"]
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

便利复杂数据

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-for</h1>
        <ul>
            <li v-for="(v,i) in arr">
                {{v}}------{{i}}
            </li>
        </ul>
        <hr/>

        <table border="1">
            <tr v-for="(v,i) in obj">
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
                
            </tr>
        </table>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                arr:["EZ","MF","NOC","VN"],
                obj:[
                    {name:"huanghuang",age:27},
                    {name:"bilin",age:29},
                    {name:"xixi",age:26}
                ]
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

v-bind

作用: 给html的标签属性插入变量

语法: v-bind:html的属性="变量" 简写 :html的属性="变量"

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-bind</h1>
       <a v-bind:href="ahref">{{text}}</a>
       <a :href="ahref">{{text}}</a>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"点我去百度",
                ahref:"http://www.baidu.com"
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

v-if 全家桶

v-if

作用:判断dom是否加载

语法: v-if="布尔值" true加载 false不加载

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-if</h1>
      
        <input type="checkbox" v-model="bool">
        <h1 v-if="bool">我是测试v-if的</h1>
        <h1 v-show="bool">我是测试v-show的</h1>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               bool:true
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

v-if与v-show的区别

v-if 是对dom元素进行添加和移除 v-if 在加载的时候对性能损耗低 v-if在元素频繁切换的时候性能损耗高

v-show 是对dom元素使用css进行显示和隐藏 v-show 在加载的时候对性能损耗高 v-if在元素频繁切换的时候性能损耗低

v-else

作用: v-if不符合的时候执行else

语法：必须配合v-if来进行时候用 不能单独使用

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-else</h1>
      
        <input type="checkbox" v-model="bool">
        <h1 v-if="bool">你好</h1>
        <h1 v-else>你坏</h1>
       

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               bool:true
            },
            methods:{

            }
        })


       
       
    </script>
</body>
</html>

v-else-if

作用 可以对多个内容进行dom添加的判断

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1 v-if="num==1">吃</h1>
        <h1 v-else-if="num==2">睡</h1>
        <h1 v-else-if="num==3">上厕所</h1>
        <h1 v-else-if="num==4">在睡</h1>
        <h1 v-else>什么也没有干</h1>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
              num:8
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

v-text

作用：在网页中展示纯文本内容 同{{}}类似的功能

语法： v-text="变量"

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-text</h1>
       <h1>{{demo}}</h1>
       <h1 v-text="demo"></h1>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               demo:"我是文本"
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

v-text与{{}}的区别

相同点: 都可以向页面中插入内容

不同点：{{}}模板插值得语法 而v-text是指令

v-text可以解决屏幕闪烁问题

屏幕闪烁

当用户网络很慢的时候 由于js没有加载 可能会导致页面出现{{}} 问题 然后js加载成功之后 {{}}消失变成正常的数据展示 可能会在成用户体验不好

解决:

1.使用v-text

2.使用v-cloak指令来解决 当前这个指领的作用是保持元素上直到关联vue实例之后 在进行编译

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="demoDiv" v-cloak>
        <h1>v-text</h1>
       <h1>{{demo}}</h1>
       <h1 v-text="demob"></h1>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               demo:"我是文本1",
               demob:"我是text"
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

v-html

作用：就是把字符串标签插入页面进行展示

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
      <div>
          {{text}}
      </div>
     <div v-text="text">

     </div>
     <!-- 使用v-html -->
     <div v-html="text"></div>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               text:"<em>我是斜体</em>"
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

v-once

作用:一次性差值

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <input type="text" v-model="text">
        <h1>{{text}}</h1>
        <h1 v-once>{{text}}</h1>
        <h1>{{text}}</h1>

    </div>

    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               text:"你好么么哒"
            },
            methods:{

            }
        })

       
    </script>
</body>
</html>

watch监听

监听data中的数据 如果数据改变了 那么watch就会收到通知调用一个函数（我们就可以在这个函数中完成指定的逻辑）

语法：写在与el data methods同级

watch:{

你要监听的数据 ( 新数据, 旧数据 ){

}

}

<!DOCTYPE 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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <input type="text" v-model="inputval">
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                inputval:""
            },
            methods:{
                
            },
            // 监听
            watch:{
                inputval(newval,oldval){
                    console.log(newval+"----"+oldval)
                }
            }
        })
    </script>
</body>
</html>

watch首次加载的时候能触发吗？

首次加载不会触发

我就是想让他首次加载能触发怎么办？

 

vue-cli 脚手架

安装4x

1.必须有node

2.如果网速慢的话 那么建议大家切换淘宝镜像

3.全局下载脚手架 npm install -g @vue/cli (只需要在 第一次使用的时候才下载 除非你重新装系统或者node 才需要再次下载)

4.查看版本 vue --version

5.创建项目

（5-1）把cmd的路径切换到你要创建项目的文件夹下

（5-2）vue create 项目名（弹出的选择选择第三个 剩下的眼睛一闭 一路回撤直到回车不了）

6.启动项目

（6-1）cd到你创建的项目之下

（6-2）输入npm run serve

拿到别人的项目怎么启动

1.看看有没有以来文件夹 node_modules 如果没有 那么你cd到你向前项目路径下 使用npm install 重新下载依赖

2.公司的项目或者别人的项目 怎么启动？你只需要来到 项目下的package.json文件中去查看 scripts节点即可

所有的命令都需要使用npm run 你的配置项（所有中只有一个是特例 就是start）

拿到空项目怎么办？

1.删除src下components文件夹的helloword.vue文件

2.删除src下app.vue的内容

<template>
  <div id="app">
    <!-- 删除 -->
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- 删除 -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// 删除
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // 删除
    // HelloWorld
  }
}
</script>

<style>
/* 删除 */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

3.在src下的components中创建我们自己的.vue文件（需要下载插件vetur）

4.在app.vue中引用我们自己的文件

<template>
  <div id="app">
   
    <!-- 3.使用 -->
    <Home />
  </div>
</template>

<script>
// 1.引用  但是建议首字母大写
import Home from './components/home.vue'

export default {
  name: 'App',
  components: {
    // 2.调用
    Home
  }
}
</script>

<style>

</style>

.vue文件-------单文件组件

一个.vue文件有三个部分

template部分 就是今后写html的地方
<template>
  <div>
      你好
  </div>
</template>

<script>
    script部分  JS的代码
export default {

}
</script>
//style部分 CSS

<style>

</style>

使用data

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

<script>
export default {
    // 创建模型数据
   data(){
       return {
           text:"么么哒！！！！！"
       }
   }
}
</script>

<style>

</style>

vue组件的data为什么是一个函数而不是一个对象？

 

methods

和本地模式一模一样

 

<template>
  <div>
      <h1>{{text}}</h1>
      <button @click="fun()">点我修改text</button>
  </div>
</template>

<script>
export default {
    // 创建模型数据
   data(){
       return {
           text:"么么哒！！！！！"
       }
   },
   methods:{
       fun(){
           this.text="你坏！！！！！"
       }
   }

}
</script>

<style>

</style>

watch

和本地模式一模一样

<template>
  <div>
      <h1>{{text}}</h1>
      <button @click="fun()">点我修改text</button>
  </div>
</template>

<script>
export default {
    // 创建模型数据
   data(){
       return {
           text:"么么哒！！！！！"
       }
   },
   methods:{
       fun(){
           this.text="你坏！！！！！"
       }
   }

}
</script>

<style>

</style>

watch

和本地模式一模一样

<template>
  <div>
      <h1>{{text}}</h1>
      <button @click="fun()">点我修改text</button>
  </div>
</template>

<script>
export default {
    // 创建模型数据
   data(){
       return {
           text:"么么哒！！！！！"
       }
   },
   methods:{
       fun(){
           this.text="你坏！！！！！"
       }
   },
   watch:{
       text(newval){
           console.log("text被改变了",newval)
       }
   }

}
</script>

<style>

</style>

事件对象--$event

谁触发这个事件事件对象就是谁

<template>
  <div>
      <h1>事件对象</h1>
      <button @click="fun($event)">点我触发事件对象</button>
  </div>
</template>

<script>
export default {
    methods:{
        fun(xiaoming){
            console.log(xiaoming.target)
        }
    }
}
</script>

<style>

</style>

修饰符

vue中对于事件上面添加了一个新的内容修饰符 通过修饰符可以对当前这个事件来设置更多辅佐性的功能

语法:

v-on:或者@事件.修饰符="函数"

1.按键修饰符

对键盘上面的按键进行指定

.up .down .left .right .ctrl .enter .space

<template>
  <div>
   
      <h1>使用修饰符来完成对于指定按键的设置</h1>
      <input type="text" @keydown.space="func()">
  </div>
</template>

<script>
export default {
    methods:{
       
        func(){
            console.log("空格被按下了")
        }
    }
}
</script>

<style>

</style>

2.事件修饰符

1.阻止冒泡 ： .stop

2.阻止默认行为 ： .prevent

3.与事件冒泡相反 设置捕获 ：.capture

4.只触发一次 : .once

5.只出法自己范围内的事件 不包含子元素的 .self

<template>
  <div>
   
      <h1>阻止冒泡</h1>
      <div class="fu" @click="fu()">
          <div class="zi" @click.stop="zi()"></div>
      </div>
  </div>
</template>

<script>
export default {
    
    methods:{
        fu(){
            console.log("ffufufufufufufu")
        },
        zi(){
            console.log("zizziziziziziz")
        },
      
    }
}
</script>

<style>
    .fu{
        background-color: pink;
        width: 500px;
        height: 500px;
    }
    .zi{
        background-color: gray;
        width: 200px;
        height: 200px;
    }
</style>

修饰符同时可以串联

  <!-- 修饰符可以串联 -->
          <div class="zi" @click.stop.once="zi()"></div>

计算属性----computed

他是一个vue的属性 这个属性是由计算功能的 （对data数据进行计算展示）

语法: 写在与data methods等同级位置

一条数据 在多个位置 展示不同形态的时候 使用计算属性

又或者 一个变量 需要展示之前 进行处理数据 也可以用计算属性

computed:{

计算出的结果变量（）{

return 计算内容

}

}

<template>
  <div>
        <h1>正常展示:{{text}}</h1>
        <h1>大写展示:{{textUpper}}</h1>
        <h1>大写加截取展示:{{textSub}}</h1>
  </div>
 
</template>

<script>
export default {
    data(){
        return {
            text:"abcdefghijk"
        }
    },
    computed:{
        textUpper(){
            return this.text.toUpperCase()
        },
        textSub(){
            return this.text.toUpperCase().substr(1,5)
        }
    }
}
</script>

<style>

</style>

计算属性与方法的区别？

<template>
  <div>
      你好
      <h1>{{newarr}}</h1>
      <h1>{{fun()}}</h1>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[111,2222,3333,4444,555,666,777,888]
        }
    },
    computed:{
        newarr(){
            console.log("计算属性")
            return this.arr.slice(0,4)
        }
    },
    methods:{
        fun(){
            return this.arr.slice(0,4)
        }
    }
}
</script>

<style>

</style>

计算属性与方法最大的区别是

计算属性走缓存 只要计算属性处理过数据之后 数据在没有改变的时候 无论你在页面调用

多少次 他都只执行一次 然后剩下的调用都是从缓存中进行读取的 节省资源

函数 只要被调用那么就会执行 调用多少次执行多少次 比较消耗资源

计算属性与监听有啥区别

首先计算属性和监听都是 对data的数据进行相关的操作

但是计算属性是依赖data的数据 并且对data的数据进行处理返回处理后的结果

而监听 仅仅是监听 当data的数据改变了他会触发一个函数 来完成一些逻辑

前后台交互

axios

axios是一个基于promise的第三方数据请求库

下载： npm install --save axios

<template>
  <div>
      <h1>axios的基本使用</h1>
      <button @click="fun()">点我</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
    methods:{
        fun(){
            axios({
                url:"http://www.weather.com.cn/data/cityinfo/101320101.html",
                // 请求方式默认get
                method:"GET"
            }).then((ok)=>{
                console.log(ok)
            }).catch((err)=>{
                console.log(err)
            })

        }
    }
}
</script>

<style>

</style>

跨域

就是浏览器的安全机制 不同源 （不同端口 不同协议 不同域名） 就会造成跨域

1.jsonp

2.代理跨域

devServer代理跨域

方式:

(1) 需要在vue项目的根路径下创建一个vue.config.js的文件

（2）写入如下内容

module.exports={
    devServer:{
        proxy:{
            "/api":{
                target:"http://www.weather.com.cn/",
                changeOrigin:true,
                pathRewrite:{
                    "^/api":""
                }

            }
        }
    }
}

(3)千万不要忘了

(3)千万不要忘了

(3)千万不要忘了

(3)千万不要忘了

(3)千万不要忘了

(3)千万不要忘了

(3)千万不要忘了

修改我们的请求路径为/api

(4)因为我们修改了配置文件 那么项目必须重启

nginx反向代理

3.cors

拦截器

在发送请求的时候 但是每次如果在进行项目中 我们每请求都要携带一些参数据的时候 那么这个时候就可以使用拦截器 把每次需要在发送请求的时候携带的数据 使用拦截器 给请求进行添加 减少重复代码的编写

请求拦截

相应拦截

使用:

(1)在src文件夹下新建 api(封装数据请求的文件夹) util(工具文件夹)

(2) 创建拦截器 在util下新建一个文件 写入如下内容

import axios from "axios"
// 创建axios实例
let service=axios.create()

// 设置拦截器
// 添加请求拦截器
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

请求封装

（1）在api文件夹下创建一个文件荣来容纳数据请求的封装

import service from "@/util/service.js"

// 开始封装数据请求
function getlink(url){
   return new Promise((resolve,reject)=>{
    //    开始写你的数据请求
        service.request({
            url,
            method:"GET"
        }).then((ok)=>{
            resolve(ok)
        }).catch((err)=>{
            reject(err)
        })
   })
}


export default getlink

APPTX4869
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值