Vue2.5开发去哪儿网App第四章笔记上

作者：mobiledu2502937927 | 来源：互联网 | 2023-05-17 19:26

一.组件细节知识点1.解决组件在h5中编码规范例如：table,ul,ol等等<table><tbody>

一 . 组件细节知识点

1. 解决组件在h5中编码规范

例如： table , ul , ol 等等

 Vue.component('row',{
        template:'this is a row'
});

使用 is 属性解决

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件使用细节点title>
    <script src="../../vue.js">script>

head>
<body>
<div id="app">
    
    <table>
        <tbody>
            <tr is="row">tr>
            <tr is="row">tr>
            <tr is="row">tr>
        tbody>
    table>
div>
<script>
    Vue.component('row',{
        template:'this is a row'
    });
    var vm = new Vue({
        el:"#app"
    })
script>
body>
html>

View Code

2. 非根组件定义data

在子组件里面定义data时，data必须是一个函数，不能是一个对象。这是为了保证每个子组件都有独立的data数据

　　写法：

data:function(){
    return {
        content:'this is a content'
    }
}

3.代码里面操作dom

HandleClick:function () {
    //可根据ref 获取dom节点
    var hello = this.$refs.hello.innerHTML;
    alert('获取到的值是:'+hello)
}

4. counter 求和了解ref的使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件使用细节点title>
    <script src="../../vue.js">script>

head>
<body>
<div id="app">
    <table>
        <tbody>
            <tr is="row">tr>
            <tr is="row">tr>
            <tr is="row">tr>
        tbody>
    table>
    <div @click="HandleClick" ref="hello">获取hellodiv>

    
    <counter @change="GetTotal" ref="one">counter>
    <counter  @change="GetTotal" ref="two">counter>
    
    

    <div>总数是：{{total}}div>
div>
<script>
    Vue.component('row',{
        data:function(){
            return {
                content:'this is a content'
            }
        },
        template:'{{content}}'
    });

    // #计数器
    var counter = Vue.extend({
        template:'{{number}}',
        data:function () {
            return {
                number:0
            }
        },
        methods:{
            CounterClick:function () {
                this.number++;
                //向父组件传值
                this.$emit('change')
            },

        }
    })
    Vue.component('counter',counter);

    var vm = new Vue({
        el:"#app",
        data:{
            total:0
        },
        methods:{
            HandleClick:function () {
                //可根据ref 获取dom节点
                var hello = this.$refs.hello.innerHTML;
                alert('获取到的值是:'+hello)
            },
            GetTotal:function () {
                var refs = this.$refs;
                this.total = refs.one.number + refs.two.number
            }
        }
    })
script>
body>
html>

View Code

二 . 父子组件传值

父组件向子组件传值都是通过属性的形式传递的：

<div id="app">
    <counter :count="9">counter>
    <counter :count="1">counter>
div>
<script>
    var counter = {
        props:['count'],
        template:'{{count}}'
    }

    var vm = new Vue({
        el:"#app",
        components:{
            counter:counter
        }
    })

counter 求和：

vue 会对子组件直接对父组件传递值得操作给予警告

子组件不能修改父组件的值，只能使用，单向数据流的作用

修改方法：对父组件的值克隆一个副本：对子组件自己值进行修改

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子间更多传值方式title>
    <script src="../../vue.js">script>
head>
<body>
<div id="app">
    <counter :count="2" @change="GetToal">counter>
    <counter :count="3" @change="GetToal">counter>
    <div>{{total}}div>
div>
<script>
    var counter = {
        props:['count'],
        template:'{{number}}',
        data:function(){
          return {
              number:this.count
          }
        },
        methods:{
            HandleClick:function () {
                this.number = this.number + 1;
                this.$emit('change',1)
            }
        }
    }

    var vm = new Vue({
        el:"#app",
        data:{
            total:5
        },
        components:{
            counter:counter
        },
        methods:{
            GetToal:function (number) {
                this.total += number
            }
        }
    })
script>
body>
html>

View Code

三 . 组件参数校验与非props特性

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
非props特性: 1.当子组件 未接收并且使用 2.会显示在子组件的html属性上
props特性:不会显示在子组件的html属性上

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数校验与非props特性title>
    <script src="../../vue.js">script>
head>
<body>





<div id="app">
    <child :content="{id:123,name:'Dell'}" newd="newd">child>
div>
<script>
    Vue.component('child',{
        // props:{
        //     content:{
        //         type:[Number,String,Object],
        //         default:{id:1,name:'dong'},
        //         required: true,
        //         // validator: function (value) {
        //         //     console.log(value)
        //         //     if(value.name!=='dong'){
        //         //        alert('姓名错误')
        //         //     }
        //         // }
        //     }
        // },
        template:"{{ content }}{{newd}}"
    })
    var vm = new Vue({
        el:"#app"
    })
script>
body>
html>

View Code

四 . 给组件绑定原生事件

原始步骤：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件title>
    <script src="../../vue.js">script>
head>
<body>
<div id="app">
    
    <child @click="HancleClick">child>
div>
<script>
    Vue.component('child',{
        //此处 @click="HancleClick" 监听原生的事件
        template:'Child',
        methods:{
            HancleClick:function () {
                // alert('Child click')
                this.$emit('click')
            }
        }
    })
    var vm = new Vue({
        el:"#app",
        methods:{
            HancleClick:function () {
                alert('Father click')
            }
        }
    })
script>
body>
html>

View Code

添加 native 修饰符 .native - 监听组件根元素的原生事件。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件title>
    <script src="../../vue.js">script>
head>
<body>
<div id="app">
    <child @click.native="HancleClick">child>
div>
<script>
    Vue.component('child',{
        template:'Child',
    })
    var vm = new Vue({
        el:"#app",
        methods:{
            HancleClick:function () {
                alert('Father click')
            }
        }
    })
script>
body>
html>

View Code

推荐阅读

export
Vue3中setup函数的参数props和context配置详解

本文详细介绍了Vue3中setup函数的参数props和context的配置方法，包括props的接收和配置声明，以及未通过props进行接收配置时的输出值。同时还介绍了父组件传递给子组件的值和模板的相关内容。阅读本文后，读者将对Vue3中setup函数的参数props和context的配置有更深入的理解。 ... [详细]

蜡笔小新 2023-12-10 07:33:22
function
brain是什么意思_brain怎么读_brain翻译_用法_发音_词组_同反义词_脑新东方在线英语词典

本文介绍了brain的意思、读音、翻译、用法、发音、词组、同反义词等内容，以及脑新东方在线英语词典的相关信息。还包括了brain的词汇搭配、形容词和名词的用法，以及与brain相关的短语和词组。此外，还介绍了与brain相关的医学术语和智囊团等相关内容。 ... [详细]

蜡笔小新 2023-12-14 16:52:33
string
Java容器中的compareto方法排序原理解析

本文从源码解析Java容器中的compareto方法的排序原理，讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点，回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录，展示了整个讲解过程。 ... [详细]

蜡笔小新 2023-12-14 13:53:31
char
C语言注释工具及快捷键，删除C语言注释工具的实现思路

本文介绍了C语言中注释的两种方式以及注释的作用，提供了删除C语言注释的工具实现思路，并分享了C语言中注释的快捷键操作方法。 ... [详细]

蜡笔小新 2023-12-14 11:22:08
select
Vue项目中结合Element UI解决连续上传多张图片及图片编辑问题

本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果，并详细描述了自己的代码实现过程。 ... [详细]

蜡笔小新 2023-12-13 13:42:30
function
vue和webpack异步组件按需加载报错问题解决方法

本文介绍了在使用vue和webpack进行异步组件按需加载时可能出现的报错问题，并提供了解决方法。同时还解答了关于局部注册组件和v-if指令的相关问题。 ... [详细]

蜡笔小新 2023-12-12 19:55:06
select
【openwrt】设备mt7628关于wan侧eth0.1 mac地址固定的问题

本文讨论了在openwrt-17.01版本中，mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下，而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等，生成后的mac地址会保存在/etc/config/network下。 ... [详细]

蜡笔小新 2023-12-12 17:47:48
char
Java中包装类的设计原因以及操作方法

本文主要介绍了Java中设计包装类的原因以及操作方法。在Java中，除了对象类型，还有八大基本类型，为了将基本类型转换成对象，Java引入了包装类。文章通过介绍包装类的定义和实现，解答了为什么需要包装类的问题，并提供了简单易用的操作方法。通过本文的学习，读者可以更好地理解和应用Java中的包装类。 ... [详细]

蜡笔小新 2023-12-12 15:48:10
text
绕过WAF的XSS检测机制及构建XSS payload的方法

本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ... [详细]

蜡笔小新 2023-12-11 19:42:30
cookie
如何提高PHP编程技能及推荐高级教程

本文介绍了如何提高PHP编程技能的方法，推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力，本文提醒读者要有足够的耐心和时间投入。通过实践操作学习，可以更好地理解和掌握PHP语言的特异性，特别是单引号和双引号的用法。同时，本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言，建议读者要从整体来考虑局部，培养大局观。最后，本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]

蜡笔小新 2023-12-11 18:38:37
export
VueCLI多页分目录打包的步骤记录

本文介绍了使用VueCLI进行多页分目录打包的步骤，包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]

蜡笔小新 2023-12-11 16:14:11
export
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

先看看ElementUI里关于el-table的template数据结构：<template><el-table:datatableData><e ... [详细]

蜡笔小新 2023-12-11 14:47:02
char
用Vue实现的Demo商品管理效果图及实现代码

本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]

蜡笔小新 2023-12-10 15:14:25
object
Java序列化对象传给PHP的方法及原理解析

本文介绍了Java序列化对象传给PHP的方法及原理，包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用，以及代码执行序列化所需要的权限。最后指出，序列化会将对象实例的所有字段都进行序列化，使得数据能够被表示为实例的序列化数据，但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]

蜡笔小新 2023-12-14 15:25:15
select
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14

mobiledu2502937927

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章