首页 > 其他分享 >vue入门-???? 05days

vue入门-???? 05days

时间:2024-01-10 15:55:22浏览次数:32  
标签:vue return 入门 app Vue 组件 data 05days name

购物车案例回顾:

  -v -for循环商品

  -checkbox多选:  数组,input---> checkbox--->value  对象   [在input中 只能使用 v-model]

  getprice()---->方法------> 变量发生变化,这个会重新运算

加全选 与全不选

  -chekbox --->单独的------>布尔类型

  -checkbox的change事件 ----> 判断  是否被选中

  -给每一个 checkbox绑定一个事件

数量加减

  -在 数量显示前后  加span标签,绑定点击事件

  -扩展功能:点击属性--> 变成input,失去焦点,再变回span标签

v-model修饰符

  lazy

  number

  trim

与后端交互----》后端:跨域问题(后续会详细讲)--》在响应头中加入 某些东西即可

  -js的json序列化和反序列化
  -JSON.parse(字符串) python :json.loads
  -JSON.stringify(数组/对象/布尔) python :json.dumps

- 方式一: jquery的ajax方法
        -基于原生 js的ajax请求封装的
        
    -方式二:原生js--》新的方法--》fetch
        fetch('http://127.0.0.1:5000/userinfo')
                    .then(response => {
                        return response.json();
                    }).then(data => {
                        this.username = data.username
                        this.age = data.age
                })
            
     -方式三:第三方  axios
        -引入:cdn
        -axios.get(地址).then(res=>{res.data})

 

今日内容:

小电影案例

后端:

from flask import Flask, jsonify
import json

app = Flask(__name__)


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


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

前端

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

</head>
<body>
<div id="app">
    <h1>点击显示小电影案例</h1>
    <button @click="handleLoad">加载</button>
    <div v-for="film in filmList">
        <img :src="film.poster" alt="" height="200px" width="150px">
        <div>
            <h3>{{film.name}}</h3>
            <p>主演:
                <span v-for="item in film.actors">
                {{item.name}} &nbsp;&nbsp;
            </span>
            </p>
            <p>{{film.nation}}|{{film.runtime}}</p>
        </div>
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            filmList: []

        },
        methods: {
            handleLoad() {
                axios.get('http://127.0.0.1:5000/film').then(res => {
                    if (res.data.code == 100) {
                        this.filmList = res.data.results
                    } else {
                        alert(res.data.msg)
                    }
                })
            }
        }
    })
</script>
</html>

计算属性和监听属性

计算属性

   计算属性是基于它们的依赖进行缓存的
   计算属性只有在它的相关依赖发生改变时才会重新求值
   计算属性就像Python中的property,可以把方法/函数伪装成属性

  计算属性必须要有返回值

基本使用

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

</head>
<body>
<div id="app">
    <h1>普通函数---其他数据变化---》函数会重写计算</h1>
    年龄:<input type="text" v-model="age">
    姓名:<input type="text" v-model="name">
    <br>
    {{getAge()}}
    <br>

    <h1>计算属性</h1>
    年龄:<input type="text" v-model="age1">
    姓名:<input type="text" v-model="name1">
    <br>
    {{newAge}}
    <br>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            age: '',
            name: '',
            age1: '',
            name1: '',
        },
        methods: {
            getAge() {
                console.log('我执行了')
                return Number(this.age) + 10
            }
        },
        computed: {
            newAge() {
                console.log('我执行了--计算属性')
                return Number(this.age1) + 20
            }
        }
    })
</script>
</html>

首字母变大写

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

</head>
<body>
<div id="app">
    <h1>首字母变大写</h1>
    <!--    <input type="text" v-model="name"> -&#45;&#45;》{{name.substring(0, 1).toUpperCase() + name.substring(1)}}-->
    <br>
    <!--    <input type="text" v-model="name"> -&#45;&#45;》{{getName()}}-->
    <br>
    <input type="text" v-model="name"> ---》{{newName}}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
        },
        methods: {
            getName() {
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        },
        computed: {
            newName() {
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        }
    })
</script>
</html>

通过计算属性,重写过滤案例

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

</head>
<body>
<div id="app">

    <h1>过滤案例</h1>
    <input type="text" v-model="search">
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
        },
        computed:{
            newDataList(){
                return  this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }

        }


    })


</script>
</html>

监听属性

  只要属性发生变化,就会执行 函数

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

</head>
<body>
<div id="app">

    <h1>监听属性</h1>
    <button @click="ordering='id'">按id排序</button>
    <button @click="ordering='price'">按价格排序</button>


</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            ordering: ''
        },
        watch: {
            ordering() {
                console.log('我变了,向后端发送请求')
                console.log(this.ordering)
            }
        }

    })


</script>
</html>

生命周期钩子 (八个核心函数)_面试会有

# vue 组件的生命周期钩子函数
一个vue的组件,从创建开始---》到最后销毁---》经历一些过程---》每个过程都绑定了一个函数--》当到这个过程的时候,这个函数就会执行
面向切面编程:AOP


# 8个生命周期钩子函数
1.beforeCreate:   组件创建之前实现这个:组件html,js--》html和js都是空的
2.created:     组件创建完成后:js就有值了,html还是空的 (向后端发送ajax请求)
3.beforeMount:  挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)
4.mounted:    挂载完成:js有值,模板有值
5.beforeUpdate:  刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行
6.updated:    刷新之后执行
7.beforeDestroy:  被销毁之前执行 (资源清理性工作)
8.destroyed:    被销毁之后执行

# 实际用途
1 页面加载完成,向后端发请求拿数据
写在create中

2 组件中有定时任务,组件销毁,要销毁定时任务、

补充:定时器和延时器
    setTimeout( ()=>{
        console.log('延时器,3s后执行')
    },3000)
    
    setInterval(()=>{
        console.log('每隔3s执行')
    },3000)

组件介绍

 组件是:有模板,有js的 ,有方法的 对象  组件和组件直接的 变量,模板都是隔离的

定义组件
    Vue.component('Child',{
        template: `
          <div>
          <h1>我是组件</h1>
          <button @click="haneleClick">点我看美女</button>
          <p>年龄是:{{ age }}</p>
          </div>`,
        data() {
            return {
                age: 19
            }

        },
        methods: {
            haneleClick() {
                alert('美女')
            }
        }
    })
# 使组件,直接根据组件名使用即可
  <Child></Child>

全局组件使用

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

</head>
<body>
<div id="app">

    <h1>组件的使用</h1>
    <button @click="handleClick">点我看美女</button>

    <hr>
    <Lqz></Lqz>
    <hr>

    <span>asdfasdfadsf</span>
    <p>你发誓啊发送是发放按摩阿斯顿发阿斯顿发as放到</p>


    <Lqz></Lqz>
</div>
</body>

<script>
    // 1 定义全局组件
    Vue.component('Lqz', {
        template: `
          <div>
          <h1>{{ name }}</h1>
          <button @click="handleClick">点我换名字</button>

          </div>`,
        data() {
            return {
                name: 'lqz'
            }
        },
        methods: {
            handleClick() {
                this.name = '彭于晏'
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick() {
                alert('美女')
            }
        }


    })


</script>
</html>

局部组件

  局部组件是定义在组件内部,只能在当前组件中使用

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

</head>
<body>
<div id="app">

    <h1>局部组件的使用</h1>

    <Child></Child>
</div>
</body>

<script>
    
    // 全局组件
    Vue.component('Child', {
        template: `
          <div>
          <Lqz></Lqz>
          <Lqz></Lqz>
          <Lqz></Lqz>
          </div>`,
        // 局部组件
        components: {
            Lqz: {
                template: `
                  <div>
                  <h2>我是局部组件</h2>
                  </div>
                `,
                data() {
                    return {}
                },
                methods: {},
            }
        }

    })


    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick() {
                alert('美女')
            }
        },


    })


</script>
</html>

局部组件和全局组件

全局组件
    - 定义:
    Vue.component('Child',{})
    - 使用,可以在任意位置使用
        <Child></Child>
    
# 局部组件-->只能定义在组件内部,只能在当前组件中使用
    -定义
     var vm = new Vue({
        el: '#app',
        data: {},
        components:{局部组件:{}}
    })
    -使用:只能用在被 当前组件管理的 html (#app) 中,放在别的位置找不到

组件间通信

父传子

使用自定义属性实现父传子  
  -在父中定义变量 name='lqz'
  -在子组件上 写自定义属性 <Child :name="name"></Child>
  -在组件内部:props:['name'] # 可以接收多个
  -在子组件内部,就可以使用插值,使用这个变量

 

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

</head>
<body>
<div id="app">

    <h1>组件通信之父传子:自定义属性</h1>

    <p>父组件中得名字:{{name}}</p>
    <div style="background-color: pink">

        <Child :name="name" yy="xx"></Child>
    </div>

</div>


</body>

<script>

    // 全局组件
    Vue.component('Child', {
        template: `
          <div>
          <h2>我是Child组件</h2>
          <h3>父组件传递给子组件的:{{ name }}=={{yy}}</h3>

          </div>`,
        data() {
            return {}
        },
        props:['name','yy']
    })


    var vm = new Vue({
        el: '#app',
        data: {
            name:'彭于晏'
        },



    })


</script>
</html>

子传父

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

</head>
<body>
<div id="app">

    <h1>组件通信之子传父:自定义事件</h1>

    子组件的值:{{p_name}}
    <div style="background-color: pink">
        <Child @myevent="handleEvent"></Child>
    </div>


</div>


</body>

<script>

    // 全局组件
    Vue.component('Child', {
        template: `
          <div>
          <h2>我是Child组件</h2>
          <input type="text" v-model="name">-->{{ name }}
          <button @click="handleSend">传给父亲</button>
          </div>`,
        data() {
            return {
                name: ''
            }
        },
        methods: {
            handleSend() {
                this.$emit('myevent',this.name)
            }
        }
    })


    var vm = new Vue({
        el: '#app',
        data: {
            p_name: ''
        },
        methods: {
            handleEvent(name) {
                // name 是 子组件中调用  this.$emit('myevent',this.name) 传过来的
                // alert('美女')
                this.p_name=name  // 把子组件中传入的,赋值给父组件的p_name变量
            }
        }


    })


</script>
</html>

 

 

 

 

 

 ----扩展

轮询 聊天室 实时聊天

查询图书  页面加载显示 再前端bootstrap表格

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

标签:vue,return,入门,app,Vue,组件,data,05days,name
From: https://www.cnblogs.com/wzh366/p/17956662

相关文章

  • Apache Doris 入门 10 问
    基于ApacheDoris在读写流程、副本一致性机制、存储机制、高可用机制等方面的常见疑问点进行梳理,并以问答形式进行解答。在开始之前,我们先对本文相关的名词进行解释:FE:Frontend,即Doris的前端节点。主要负责接收和返回客户端请求、元数据以及集群管理、查询计划生成等工作。BE:Ba......
  • 使用Nginx部署VUE3+VITE项目时无法访问后端接口的一个情况
    在使用VUE3作为前端,ABPVNEXT6.0作为后端框架。使用Nginx部署后无法访问api,接口报错404找错思路很重要,网上找到了很多Nginx配置信息,但是都不起作用,即使更换服务器重新部署也无法生效后来才发现,ABPNEXT对于未找到对应实体的报错就是404,按照正常的程序逻辑,404应该就是notfound,这一......
  • netcore webpi 通过signalr 给vue项目推送消息
     最近项目上需要做个服务给前端推消息,首先就想到了signalr,关于signalr详情可以参考微软官方文档(ASP.NETCoreSignalR概述|MicrosoftLearn),微软现在也有使用教程(ASP.NETCoreSignalR入门|MicrosoftLearn)微软教程是通过使用库管理器(LibMan)从unpkg 获取客户端库,如......
  • Gorm 入门介绍与基本使用
    Gorm入门介绍与基本使用目录Gorm入门介绍与基本使用一、ORM简介1.1什么是ORM1.2使用ORM的好处1.2.1避免直接操作SQL语句1.2.2提高代码的可维护性1.2.3跨数据库兼容性1.3使用ORM的缺点1.3.1学习成本1.3.2性能开销1.4ORM解析过程1.4.1模型定义1.4.2数据验证1.4.3映射......
  • K8S系列一:概念入门
    K8S系列一:概念入门写在前面本文组织方式:K8S的架构、作用和目的。需要首先对K8S整体有所了解。K8S是什么?为什么是K8S?K8S怎么做?K8S的重要概念,即K8S的API对象。要学习和使用K8S必须知道和掌握的几个对象。Pod实例Volume数据卷Container容器Deployment和ReplicaS......
  • vue3利用qrcode.vue并通过canvas合并图片
    <template><canvasid="canvas"width="300"height="400"></canvas><el-buttonstyle="margin-top:20px"type="danger"plain@click="downloadCode"......
  • 5分钟搞定vue3函数式弹窗
    前言最近接到一个需求,需要在一些敏感操作进行前要求输入账号和密码,然后将输入的账号和密码加到接口请求的header里面。如果每个页面都去手动导入弹窗组件,在点击按钮后弹出弹窗。再拿到弹窗返回的账号密码后去请求接口也太累了,那么有没有更简单的实现方式呢?函数式弹窗的使用场景......
  • 中间件 ZK分布式专题与Dubbo微服务入门 4-8 权限acl详解,acl的构成-scheme与id
    0课程地址https://coding.imooc.com/lesson/201.html#mid=12704 1重点关注1.1权限的构成权限字符串缩写crdwaCREATE:创建子节点READ:获取节点/子节点WRITE:设置节点数据 DELETE:删除子节点ADMIN:设置权限  2课程内容  ......
  • 中间件 ZK分布式专题与Dubbo微服务入门 4-9 acl的构成-permissions
    0课程地址https://coding.imooc.com/lesson/201.html#mid=12705 1重点关注1.1权限的构成权限字符串缩写crdwaCREATE:创建子节点READ:获取节点/子节点WRITE:设置节点数据 DELETE:删除子节点ADMIN:设置权限  2课程内容  ......
  • jQuery从入门到放弃
    概念#jQuery是一个高效、精简并且功能丰富的JavaScript工具库。它提供的API易于使用且兼容众多浏览器,这让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单。jQuery其实就是一个封装了很多方法的JS库。下面我们来说下JavaScript的缺点及使用jQuery的......