03. vue组件

最新推荐文章于 2023-07-05 17:55:14 发布
最新推荐文章于 2023-07-05 17:55:14 发布
阅读量357 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49111957/article/details/113901981
版权
本文详细介绍了在Vue项目中如何与后端进行交互，包括使用jQuery的ajax、fetch API以及axios库。同时，探讨了计算属性的高效用法，如人名首字母大写，并展示了组件化开发的优势和实现，包括全局组件和局部组件的定义与使用。最后，讨论了HTTP跨域请求的原理和处理方式。
摘要由CSDN通过智能技术生成

vue组件

一、fetch

vue项目和后端交互，可以使用ajax

1、通过jq中的ajax实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">点击加载美女数据</button>
    {{myText}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: ''
        },
        methods: {
            handleClick() {
                $.ajax({
                    url: 'http://127.0.0.1:5000/',
                    method: 'get',
                    success: (data) => {
                        console.log(data)
                        this.myText = data
                    }
                })
            }
        }
    })
</script>
</html>

后端flask代码：

from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    # 跨域请求
    res = make_response('hello_world')
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res


if __name__ == '__main__':
    app.run()

2、fetch向后端发动请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">点击加载美女数据</button>
    <br>
    后端加载的数据：
    <br>
    姓名：{{name}}
    <br>
    年龄：{{age}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: '',
            age: ''
        },
        methods: {
            handleClick() {
                fetch('http://127.0.0.1:5000/info').then(response => {
                    return response.json()
                }).then(json => {
                    console.log('后端获取的json数据', json)
                    this.name = json.name
                    this.age = json.age
                }).catch(ex => {
                    console.log('出了异常', ex)
                })
            }
        }
    })
</script>
</html>

后端代码：

from flask import Flask,make_response,jsonify
app=Flask(__name__)

@app.route('/info')
def info():
    res=jsonify({'name':'jason','age':18})
    # 这两行代码处理跨域
    res=make_response(res)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res
if __name__ == '__main__':
    app.run()
image-20201216183502252

二、axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="box">
    <button @click="handleClick">点击加载电影数据</button>
    <ul>
        <li v-for="item in datalist">
            <p>影片名：{{item.name}}</p>
            <p>导演：{{item.director}}</p>
            <img :src="item.poster">
        </li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
        },
        methods: {
            handleClick() {
                axios.get('http://127.0.0.1:5000/filminfo').then(res => {
                    console.log(res.data)
                    if (res.data.status === 0) {
                        this.datalist = res.data.data.films
                    }
                })
            }
        }
    })
</script>
</html>

后端flask代码：

from flask import Flask, make_response, jsonify
import json
app = Flask(__name__)

@app.route('/filminfo')
def film():
    with open('db/film.json', 'rt', encoding='utf-8') as f:
        dic = json.load(f)
    res = jsonify(dic)
    res = make_response(res)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res


if __name__ == '__main__':
    app.run()

三、计算属性

# 1、直接在{{}}中写js代码， html中尽量少写js代码
# 2、使用函数 {{函数()}}    使用几次就会函数执行几次，影响效率
# 3、使用计算属性			当做变量来使用，多次使用只会执行一次，效率高

1、通过计算属性来实现人名首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>直接在{{}} 中写js代码 </h1>
    <p>{{name.substring(0,1).toUpperCase()+name.substring(1)}}</p>
    <h1>函数</h1>
    <p>{{upperName()}}</p>
    <p>{{upperName()}}</p>
    <p>{{upperName()}}</p>
    <h1>计算属性</h1>
    <p>{{getName}}</p>
    <p>{{getName}}</p>
    <p>{{getName}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            name: 'jason'
        },
        methods: {
            upperName() {
                console.log('upperName函数执行了')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        },
        computed: {
            getName() {
                console.log('计算属性执行')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            },
        },
    })
</script>
</html>
image-20201216193553669

2、通过计算属性重写过滤小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myInput" @input="handleChange"> {{myInput}}
    <br>
    <div>
        <p v-for="data in new_arr">{{data}}</p>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myInput: '',
            arr: ['aabb', 'aadf', 'qwer', 'xyz'],

        },
        computed: {
            new_arr() {
                return this.arr.filter(item => {
                    return item.indexOf(this.myInput) > -1
                })
            }
        }
    })
</script>
</html>

四、虚拟dom与diff算法key的作用

# 1、vue使用的是虚拟dom，和真实的dom做替换，使用的算法是diff算法
# 2、diff算法的几种方案
	- 分层级比较，只做同层级的对比
	- 同key值比较（循环中尽量加key），出现新的key就插入
	- 通组件对比：组件或者标签的比较去替换

五、组件化开发

1、组件化开发的介绍

# 1、组件
	扩展html元素，封装可重用的代码，目的是复用
    示例：
    	有一个轮播图，可以在很多的页面中使用，一个轮播有js、css、html，组件会把js，css，html放到一起，有逻辑，有样式，有html
     
# 2、分类
	- 全局组件
	- 局部组件

# 3、工程化以后，一个组件就是一个 xxx.vue

# 4、elementui 本质就是一堆组件，可以直接拿过来使用

2、定义并使用全局组件

# 注意：在组件中写data，需要写成函数的形式
# 示例：
	data() {
            return {isShow: true}
        }

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <div @click="handleClick" :style="styleObj">根组件的div</div>
    <mydiv></mydiv>
    <h1>再来一遍</h1>
    <mydiv></mydiv>
</div>
</body>
<script>
    //创建组价对象（全局组件），mydiv是自定义的组件的名字
    Vue.component('mydiv', {
        template: `
            <div>
                <div style="background: green" v-if="isShow">mydiv组件的头部</div>
                <div @click="handleClick">点击显示/消失</div>
            </div>
        `,
        methods: {
            handleClick() {
                console.log('组件被点击了')
                this.isShow = !this.isShow
            }
        },
        data() {
            return {isShow: true}
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
            styleObj: {background: 'red', fontSize: '90px'}
        },
        methods: {
            handleClick() {
                console.log('根组件被点击了')
            }
        }
    })
</script>
</html>
image-20201216210457908

3、局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <child1></child1>
    <child></child>
</div>


</body>
<script>
    // 全局组件
    Vue.component('child1', {
        template: `
            <div>
                <div style="background: red" v-show="isShow">我是头部</div>
                <div @click="handleClick">显示/消失</div>
            </div>
        `,
        methods: {
            handleClick() {
                console.log('全局组件被点击了')
                this.isShow = !this.isShow
            }
        },
        data() {
            return {
                isShow: true
            }
        },
    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            handleClick() {
                console.log('根组件被点击了')
            }
        },
        // 创建局部组件
        components: {
            child: {  // 组件名：child
                template: `
                <div @click="handleClick">{{name}}</div>
                `,  // 组件模板
                methods: {
                    handleClick() {
                        console.log('局部组件被点击了')
                    }
                },
                data() {
                    return {
                        name: 'cc'
                    }
                }
            }
        }

    })
</script>
</html>

全局组件的点击事件和数据 和局部组件之间互相隔离：

image-20201217152432386

4、总结：组件编写方式和vue实例的区别

# 1、自定义的组件需要一个 root element，一般报过在一个div中，和vue实例一样
# 2、父子组件的data是不共享的
# 3、组件可以有data，methods,computed....,但是data 必须是一个函数

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <navbar></navbar>
    {{aa}}
    <!--aa是局部组件的数据，与box是不共享的，所以会报错-->
</div>


</body>
<script>
    // 全局组件
    Vue.component('navbar', {
        template: `
            <div>
                <button @click="handleClick">点击显示</button>
                我是navbar---{{aa}}
                <button style="background: red">主页</button>
                <br>
                <child></child>
            </div>
        `,
        methods: {
            handleClick() {
                console.log('nav nav')
            },
        },
        components: {
            child: {
                template: `<button>全局组件的子组件</button>`
            }
        },
        data() {
            return {aa: 'cc'}
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            name: 'cc',
        }
    })
</script>
</html>

补充：HTTP之跨域请求

HTTP协议本身是没有跨域请求的设置的，跨域请求的限制是浏览器为了安全考虑加上去的。

实际上，浏览器对于HTTP请求是直接发送给server

浏览器提供了2种方式来突破跨域请求的限制，

  1. 在sever返回的Response Head中添加Access-Control-Allow-Origin
  2. 浏览器不限制script标签、img标签、link标签的跨域请求。

对于现在的突破跨域请求的方式，比如使用JSONP方式，它的底层原理就是使用script标签。

对于一些可控的跨域请求，通常我们使用Access-Control-Allow-Origin头。

但是，使用这个头也有一些限制：

  • 请求方法的限制： 默认的突破跨域请求的限制只支持GET、POST、HEAD方法，使用其他方法使用方式预请求。
  • 自定义的头部信息： 默认的突破跨域限制的请求中，自定义的头部信息会被屏蔽掉，如果需要使用自定义的头部信息需要发送预请求。
  • Content-Type： 默认的突破跨域限制的请求的response格式也有限制，只支持text/plain、multipart/form-data、application/x-www-form-urlencoded，如果需要其他格式，需要发送预请求。

预请求：

由于需要突破CORS跨域请求的限制，浏览器一般需要发送预请求。预请求就是为了验证是否可以发送跨域请求而先发送的，它的method是OPTIONS。得到200的响应后，如果在Response Head中设置了

Access-Control-Allow-Headers、Access-Control-Allow-Methods类型的值，浏览器拿到这些头部信息就会和真正需要发送的请求的头部进行比对，如果存在的话就可以发送真正的请求了。不然会报error。

可以设置Access-Control-Max-Age时间，在这个时间内再次发起相同的跨域请求时就不需要预请求了。

知行合一cc
关注
专栏目录
Vue - 在纯 HTML 普通项目中实现组件化，让原生 html 项目支持引入 *.vue 组件 / 组件与组件间的互相引用等，完美解决了引入组件出现的跨域问题（保姆级详细教程，完整示例源码及插件）
王佳斌
05-09 2536
html中使用vue组件，在HTML页面中引入vue组件，HTML界面利用 http-vue-loader.js以组件方式引入vue文件，使用http-vue-loader引入组件出现报错，在html页面使用http-vue-loader插件引入组件报跨域错误，如何解决http-vue-loader引用组件时出现跨域问题，纯html原生web项目引入vue后如何实现组件引入，使用http-vue-loader插件控制台报错跨域，http-vue-loader 跨域怎么办官方文档， html页面如何引入.vu
vue面试题1. 请说下封装 vue 组件的过程？2. Vue组件如何进行传值的？3. Vue 组件 data 为什么必须是函数？4. 讲一下组件的命名规范
qq_52963857的博客
06-16 1685
1. 请说下封装 vue 组件的过程？2. Vue组件如何进行传值的？3. Vue 组件 data 为什么必须是函数？4. 讲一下组件的命名规范5. 路由之间是怎么跳转的？有哪些方式？6. vue-router怎么配置路由？7. vue-router的钩子函数都有哪些？8. 路由传值的方式有哪几种？9. 怎么定义vue-router的动态路由?怎么获取传过来的动态参数?10. Vue的路由实现模式：hash模式和history模式11. 请说出路由配置项常用的属性及作用？12. 编程式导航使用的方法以及常用
HTTP访问控制（CORS）
王鹤霖的专栏 三人行必有我师
03-03 949
--from https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或...
Chrome 重大更新，CORS 增加了两个新的请求头？
Benxiaohai_311的博客
08-26 2101
这个版本，对私有网络的限制正式生效啦，主要目的是保护用户免受针对私有网络上的路由器和其他设备的。地址比发起请求的网址更私密，私有网络的预检请求也会针对同源请求发送。能问出这俩问题，一定没好好看我的公众号，其实之前在多篇文章里都提到过相关的策略解读，注意：无论请求方法和模式如何，都会为所有私有网络请求发送预检请求。同源请求的预检请求还可防止。开始，如上面我们介绍的预检请求失败，请求依然会成功，但会在。，也是可以请求成功的，不过这个风险较大，不建议设置。）会限制网站向私有网络上的服务器发送请求的能力。...
Vue3解决跨域问题，报错Access-Control-Allow-Origin
qq_46213352的博客
11-16 2万+
Vue3解决跨域问题Access to XMLHttpRequest at ‘https://www.runoob.com//try/ajax/json_demo.json’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 问题描述： 在本地测试不同开发环境的接口时
vue项目中的跨域源请求拦截问题CORS头缺少'Access-Control-Allow-Origin'
weixin_30905981的博客
03-21 6155
这里使用的是axios发请求出现的。 访问的api接口是： 在不同域之间访问是比较常见，在本地调试访问远程服务器。。。。这就是有域问题。 VUE解决通过proxyTable 解决办法： 1.检查请求方式：我一开始是用了this.axios.post(url)，改为this.axios.get(url) 2.将axios的 axios.defaults.b...
奇妙的跨域错误-Access-Control-Request-Private-Network
riddle1981的博客
09-08 1977
目前看到产生该问题的场景都是内网之间测试时产生的该字段用于防止用户代理无意中对运行在用户本地 Intranet 上的设备或直接在用户机器上运行的服务进行攻击。因此：当其客户端是安全上下文并且对目标源的CORS 预检请求成功时，才允许私有网络请求。更改chrome相关配置不使用chrome更改请求地址，使其避开这个问题。
『可组合的Vue』别样的“小组件”设计
flying meng的菜鸟居
01-12 3703
最近在设计笔者所在组自己的组件库。从设计上看，一个组件库是否“成功”取决于前期的设计 —— 我决定用上ITCSS模型。为这个组件的团队维护、扩展打下坚实的基础。 但这还不够，组件库最重要的组件往往是非大型库开发中最容易被忽视的。为此，我将组件从使用场景上分为两种类型： 大组件：也叫“场景组件”。功能完善，自成一片天地。取之即用，通过传参在内部做不同处理 —— 或渲染不同UI、或返回不同值。最重要的是：不会侵入页面逻辑。也就是说，无论谁在什么场景下调用，都是相同的方式。拿到值以后这个组件在当前操作流中就算完
Vue.js教程-Vue项目的目录结构和.vue文件的构成
CoderHqf的博客
07-28 1万+
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件的三部分，分别是template、script和style。 上一篇文章说到为什么同样都是.vue文件，为什么存在于不同的文件夹下，下面先解释一下目录结构。 因为Vue属于单页面开发方式，构成这个页面的元素就是组件，各个小组件组成
在webpack中配置.vue组件页面的解析(vue-loader)
Chad97的博客
02-06 6400
在webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖； 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖； 运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式； new VueLoaderP...
13.vue3组件化开发
phoebemeng的博客
09-05 1343
学习笔记：动态组件，异步组件，认识生命周期，组件的v-model
给apache添加响应头Access-Control-Allow-Origin，解决网站跨域问题
qq_25740695的博客
05-12 4590
# 给apache添加响应头，解决网站本地调试跨域问题
ajax设置请求头
qq_33228032的博客
01-29 2万+
ajax设置请求头 虽然事隔几天了，但是觉得这个问题还是应该被记录一下 公司后台需要验证提交的Header参数，在请求中我就加了Header，原来能跑通的程序报错了:见图 这应该说的是myToken这个请求参数不被……允许的意思吧，在网上查了半天，答案千奇百怪，总之基本都没用。后来看到一篇帖子，说网页在发送正式请求前会发送一次预请求，预请求通过了才会发送正式请求。很明显啦，我的正式请
Python flask跨域支持（Access-Control-Allow-Origin（CORS）跨域资源共享（访问控制允许来源：允许指定的来源进行跨域请求）浏览器同源策略、OPTIONS预检请求
最新发布
Dontla的博客
07-05 1万+
此外，还可以使用CORS（跨域资源共享）机制来明确指定允许跨域请求的规则，以减少潜在的安全风险。要检测一个Flask接口是否支持跨域请求，可以使用浏览器的开发者工具来查看请求和响应的相关信息。，那么只有GET请求会进入到对应的视图函数中，而跨域请求则不受影响，仍然可以使用POST方法。如果该字段的值为具体的来源，表示只允许该来源的跨域请求。装饰器中指定了请求方法，那么只有匹配该请求方法的请求才会进入到对应的视图函数中。装饰器中指定的请求方法只会影响跨域请求的处理，不会影响到接口的请求方法。
【flask】Flask解决跨域的问题
sysu_lluozh
11-16 3万+
跨域文件上传的时候，浏览器会自动发起一个 OPTIONS 方法到服务器，现在后台解决前端跨域解决前端跨域请求的问题客户端发起的这个 OPTIONS 可以说是一个“预请求”，用于探测后续真正需要发起的跨域 POST 请求对于服务器来说是否是安全可接受的，因为跨域提交数据对于服务器来说可能存在很大的安全问题请求头 Access-Control-Request-Method 用于提醒服务器在接下来的请求中
跨域资源共享 CORS 详解
weixin_34365417的博客
04-19 2276
跨域资源共享 CORS 详解作者：阮一峰日期：2016年4月12日CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。（图片说明：摄于阿联酋艾因（Al Ain）的绿洲公园）一、简介...
The request client is not a secure context and the resource is in more-private address space `privat
树上骑个猴的博客
04-10 1万+
关于 chrome升级后出现问题（其他浏览器暂时不会出现） chrome系浏览器报错跨域问题： has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private 查了下官网:https://wicg.github.io/private-network-access/ 问题原因: 公网资源(访问者) 访问
response设置响应头，解决跨域请求问题，No 'Access-Control-Allow-Origin' header is present on the requested resource
热门推荐
益添的博客
05-15 25万+
今天被跨域请求的问题困扰了很久，跨域一句话的理解就是：服务端和请求端的地址不一样。跨域的详细介绍可以参考：浏览器和服务器实现跨域(CORS)判定的原理，这里不多赘述。我出现的问题，主要就是客户端向发送了服务端请求，服务器已经能返回数据，但是浏览器不接收。Failed to load http://localhost:8080/XXXX: No 'Access-Control-Allow-Origi...
关于跨域响应头Access-Control-Allow-Headers的一些说明
weixin_30666753的博客
05-03 3942
在跨域PreFlight的过程中，Options请求会返回一个响应头，如果服务器返回了这个响应头，则允许用户发起GET、POST、HEAD这三个简单方法的请求，如需发起其他形式的请求则需要显示地在 Access-Control-Allow-Headers请求头中设置允许的请求方法。 跨域详细规范参见如下地址：http://www.w3.org/TR/20...
一个.vue组件中deep修改的css会影响别的.vue组件吗
05-27
一般情况下，一个.vue组件中deep修改的css不会影响别的.vue组件。因为.vue组件通常都是通过组件作用域（scoped）来实现样式隔离的。也就是说，每个.vue组件的样式只会影响到当前组件内部的元素，而不会影响到其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值