vue相关概念

最新推荐文章于 2024-06-04 18:44:56 发布

APPTX4869

最新推荐文章于 2024-06-04 18:44:56 发布

阅读量772

点赞数

文章标签： vue.js javascript 前端

本文链接：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)千万不要忘了

修改我们的请求路径为/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
评论
vue相关概念

vue 基本概念作者：尤雨溪渐进式的自底向上增量开发的 mvvm框架渐进式可以和多种框架进行合并 vue是一个渐进式的框架（vue只会按照我们程序员的需要来进行功能的实现不会影响到项目中没有用到vue框架的区域）只会做职责以内的事情自底向上增量开发：先完成最基本的页面然后再使用vue进行数据的绑定一步步完成整个项目mvvmhelloword1、获取vue库文件（使用npm（包管理工具）来进行获取）（1）在你要写项目的文件夹上打开cmd（2）初始化 npm
复制链接

扫一扫