首页 > 其他分享 >vue_day05

vue_day05

时间：2023-02-19 20:35:31浏览次数：42  
标签：vue age day05 var 组件 home data 属性

目录

今日内容详细

一、组件其他

# 根组件 和 组件 一些问题
	-new Vue() --->管理div ---> 根组件
	-自己再定义的全局，局部是组件
	-组件有自己的html，css，js ---> 数据，事件，。。。。
	-在组件中，this代指当前组件
	-父子组件的data是无法共享的
	-data是1个函数，需要有返回值(return)

二、组件间通信之父传子

# 组件间数据不共享 ---> 需要进行数据传递
# 父传子：使用自定义属性方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>属性验证---》传入的必须是xx类型----->props控制类型 </h1>
    <h1>父子通信之父传子 通过自定义属性----> 自定义属性不能使用驼峰 不要跟子组件中变量冲突</h1>
    <!--    <h2>字符串的age 报错</h2>-->
    <!--    <child age="age"></child>-->
    <!--        <h2>变量赋值传进去了</h2>-->
    <!--        <child :age="age"></child>-->
    <!--        <h2>字符串的19 报错</h2>-->
    <!--        <child age="19"></child>-->
    <!--        <h2>数值19赋值</h2>-->
    <!--        <child :age="19"></child>-->
<!--    <child :age="age"  name="大黑子"></child>  冲突报错-->

</div>
</body>
<script>
    // 父中有age 子child 只有name 没有age 现在把父中的age传到child中 显示
    var child = {
        template: `
          <div>
          <button>后退</button>
          首页-----名字：{{ name }}----年龄：{{ age }}
          <button>前进</button>
          </div>
        `,
        data() {
            return {
                name: 'qyf'
            }
        },
        // props: ['age'],
        props: {age: Number, name: String}
    }
    // Vue.component('child', c)
    new Vue({
        el: '.app',
        data: {
            age: 19
        },
        methods: {},
        components: {
            child
        }
    })
</script>
</html>

三、组件间通信之子传父

# 通过自定义事件

image-20230217103331749

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <p>子组件传递过来的数据：{{receive}}</p>
    <hr>
    <child @myevent="handleEvent"></child>
    <hr>
</div>
</body>
<script>
    var child = {
        template: `
          <div>
          <input type="text" v-model="send">
          <button @click="handleClick">点我传递</button>
          </div>
        `,
        data() {
            return {
                send: ''
            }
        },
        methods: {
            handleClick() {
                // alert(this.mytext)
                this.$emit('myevent', this.send)
            }
        }
    }
    var vm = new Vue({
        el: '.app',
        data: {
            receive: '',
        },
        methods: {
            handleEvent(info) {
                this.receive = info
            }
        },
        components: {
            child
        }
    })
</script>
</html>

四、ref属性

# 自定义属性和自定义事件 可以实现父子传值

# ref属性 可以更方便的实现父子通信

# ref属性放在普通标签上 <input type="text" ref="myinput">
	-通过this.$refs.myinput 拿到的是原生dom对象,
通过原生dom修改 标签

# ref属性放在组件上 <child ref="mychild"></child>
	-通过this.$refs.mychild 拿到的是组件对象，既然拿到了组件对象，组件对象中的 变量，方法 都能直接通过 . 的方式调用
	-因此不需要关注的是子传父，还是父传子 直接通过组件对象 使用即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <button @click="handleClick">点我</button>
    ---->{{age}}
    <br>
    <input type="text" ref="myinput">
    <div ref="mydiv">我是div</div>
    <hr>
    <child ref="mychild"></child>
</div>
</body>
<script>
    var child = {
        template: `
          <div>
          <h1>名字：{{ name }}--->年龄：{{ age }}</h1>
          <button @click="handleClick">点我弹出名字</button>
          </div>
        `,
        data() {
            return {
                name: 'qyf',
                age: 24
            }
        },
        methods: {
            handleClick() {
                alert(this.name)
            }
        }
    }
    new Vue({
        el: '.app',
        data: {
            age: 999,
        },
        methods: {
            handleClick() {
                // 1.ref 属性放在普通标签上  拿到的是标签的dom对象
                // 通过this.$refs可以拿到所有标签上写了ref属性的标签 对象类型 key值是ref对应的value值 value值是原生dom对象
                // console.log(this.$refs)
                // 直接修改原生dom对象的value属性 inout
                this.$refs.myinput.value = 'qyf is handsome'
                // 2.ref属性放在组件上 拿到的是组件对象 就可以使用组件对象的属性和方法
                // console.log(this.$refs)  // 对象有三个值  两个普通标签  一个组件
                // this.$refs.mychild   就是组件对象 可以 .属性   .方法
                this.age = this.$refs.mychild.age
                // 以后就不需要关注子传父还是父传子了 直接通过对象取值赋值即可 而且可以主动调用子组件中的函数
                this.$refs.mychild.handleClick()
            }
        },
        components: {
            child
        }
    })
</script>
</html>

五、动态组件

1、不使用动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <span @click="handleClick('home')">首页</span> | <span @click="handleClick('order')">订单</span> | <span
        @click="handleClick('goods')">商品</span>
    <home v-if="chooseType=='home'"></home>
    <order v-else-if="chooseType=='order'"></order>
    <goods v-else></goods>
</div>
</body>
<script>
    var home = {
        template: `
          <div>
          <h1>home页面</h1>
          </div>
        `,

    }
    var order = {
        template: `
          <div>
          <h1>order页面</h1>
          </div>
        `,

    }
    var goods = {
        template: `
          <div>
          <h1>商品页面</h1>
          </div>
        `,

    }
    new Vue({
        el: '.app',
        data: {
            chooseType: 'home'
        },
        methods: {
            handleClick(type) {
                this.chooseType = type
            }
        },
        components: {
            home,
            order,
            goods
        }
    })
</script>
</html>

2、动态组件component标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <span @click="handleClick('home')">首页</span> | <span @click="handleClick('order')">订单</span> | <span
        @click="handleClick('goods')">商品</span>
    <component :is="who"></component>
</div>
</body>
<script>
    var home = {
        template: `
          <div>
          <h1>home页面</h1>
          </div>
        `,

    }
    var order = {
        template: `
          <div>
          <h1>order页面</h1>
          </div>
        `,

    }
    var goods = {
        template: `
          <div>
          <h1>商品页面</h1>
          </div>
        `,

    }
    new Vue({
        el: '.app',
        data: {
            who: 'home'
        },
        methods: {
            handleClick(type) {
                this.who = type
            }
        },
        components: {
            home,
            order,
            goods
        }
    })
</script>
</html>

3、keep-alive保持组件不销毁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <span @click="handleClick('home')">首页</span> | <span @click="handleClick('order')">订单</span> | <span
        @click="handleClick('goods')">商品</span>
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>

</div>
</body>
<script>
    var home = {
        template: `
          <div>
          <h1>home页面</h1>
          </div>
        `,

    }
    var order = {
        template: `
          <div>
          <h1>order页面</h1>
          </div>
        `,

    }
    var goods = {
        template: `
          <div>
          <h1>商品页面</h1>
          <input type="text"> <button>搜索</button>
          </div>
        `,

    }
    new Vue({
        el: '.app',
        data: {
            who: 'home'
        },
        methods: {
            handleClick(type) {
                this.who = type
            }
        },
        components: {
            home,
            order,
            goods
        }
    })
</script>
</html>

六、插槽

# 一般情况下 编写完一个组件之后 组件的内容都是写死的的 需要加数据 只能去组件中修改 拓展性很差
# 然后就出现了插槽这个概念 只需要在组件中添加<slot></slot> 就可以在body的组件标签中添加内容

1、匿名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <hr>
    <home>
        <div>
            <img src="https://img2.baidu.com/it/u=1835843610,1575206394&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1676912400&t=3c2ddfeede2e86b5354ac5d8a115985e" alt="">
        </div>
    </home>
    <hr>
</div>
</body>
<script>
    var home = {
        template: `
          <div>
          <h1>home页面</h1>
          <slot></slot>
          <h1>结束了</h1>
          </div>
        `,

    }
    new Vue({
        el: '.app',
        data: {
        },
        methods: {
        },
        components: {
            home,
        }
    })
</script>
</html>

2、具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <hr>
    <home>
        <div slot="a">
            <img src="https://img2.baidu.com/it/u=1835843610,1575206394&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1676912400&t=3c2ddfeede2e86b5354ac5d8a115985e" alt="">
        </div>
        <div slot="b">
            <p >我是div</p>
        </div>

    </home>
    <hr>
</div>
</body>
<script>
    var home = {
        template: `
          <div>
          <h1>home页面</h1>
          <slot name="a"></slot>
          <h1>结束了</h1>
          <slot name="b"></slot>
          </div>
        `,

    }
    new Vue({
        el: '.app',
        data: {
        },
        methods: {
        },
        components: {
            home,
        }
    })
</script>
</html>

七、计算属性

# 计算属性只有使用的变量发生变化时 才重新运算
# 计算属性就像python中的property 可以把方法/函数伪装成属性

1、计算属性基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>input输入单词 首字母转成大写展示</h1>
    <!--    <input type="text" v-model="mytext"> &#45;&#45;&ndash;&gt;{{mytext.slice(0, 1).toUpperCase() + mytext.slice(1)}}-->
    <!--函数方式----只要页面刷新 无论跟它有无关系 都会重新运算-->
    <!--    <input type="text" v-model="mytext"> &#45;&#45;&ndash;&gt;{{getUpper()}}-->
    <input type="text" v-model="mytext"> ---->{{newText}}

    <br>
    <input type="text" v-model="age">--->{{age}}
</div>
</body>
<script>
    new Vue({
        el: '.app',
        data: {
            mytext: '',
            age: 24
        },
        methods: {
            getUpper() {
                console.log('我执行了')
                return this.mytext.slice(0, 1).toUpperCase() + this.mytext.slice(1)
            },
        },
        // 计算属性--->computed 里面写方法 以后 方法当属性用  一定要有return值
        computed: {
            newText() {
                console.log('计算属性执行了')
                return this.mytext.slice(0, 1).toUpperCase() + this.mytext.slice(1)
            }
        }
    })
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>过滤案列</h1>
    <p>请输入要搜索的内容: <input type="text" v-model="myText"></p>
    <ul>
        <li v-for="item in newDataList">
            {{item}}
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '.app',
        data: {
            myText: '',
            data_list: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },
        computed: {
            newDataList() {
                return this.data_list.filter(
                    item => item.indexOf(this.myText) >= 0
                )
            }
        }
    })


</script>
</html>

八、监听属性

# 在data 中定义了一些变量，只要变量发生变化，我们就执行一个函数

watch:{
    属性名(){
        
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <!--    <span @click="handleClick(1)">python</span> | <span @click="handleClick(2)">linux</span>-->
    <span @click="course_type=1">python</span> | <span @click="course_type=2">linux</span>
    <div>
        假设有很多课程 点击上面的标签可以完成过滤
    </div>
</div>
</body>
<script>
    new Vue({
        el: '.app',
        data: {
            course_type: '0',
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                // 发送ajax 获取所有课程,通过course_type过滤
                // http://127.0.0.1:8000/api/v1/course?course_type=0
            },
            // handleClick(type) {
            //     this.course_type = type
            //     this.getData()
            // }
        },
        watch: {
            course_type() {
                console.log('我变化了')
                this.getData()
            }
        }
    })
</script>
</html>

九、node环境搭建

# Vue-CLI 项目搭建
	-vue 脚手架  可以创建vue项目
    
    
# vue脚手架必须要按照 node js   解释型语言
	-node js是一门后端语言
	-JavaScript只能运行在浏览器中，因为浏览器中有他的解释器环境
	-基于谷歌浏览器的v8引擎(js解释器)，使它能够运行在操作系统上
		-文件操作
		-网络操作
		-数据库操作  模块
        
        
        
	-nodejs 解释器环境
		-http://nodejs.cn/  下载对应平台的nodejs解释器
		-一路下一步安装
		-安装完成会有两个可执行问题
			python    node 
			pip       npm
        
	-打开cmd
		node  进入到了node环境
		npm install 装模块

标签：vue,age,day05,var,组件,home,data,属性
From： https://www.cnblogs.com/qian-yf/p/17135502.html

相关文章

  • vue3-router使用
     1.引入routernpminstallvue-router@4 2.创建文件夹router，并创建index.js文件import{createRouter,createWebHashHistory}from"vue-router"constrouter=cr......
  • 1 [初识]Vue3教程简介与Hello World编写 原创
    阅读目录​​前置知识​​​​下载VSCode​​​​编写第一个HelloWorld​​​​直接引入Vue3.x源码​​前置知识但是你还是需要会下面最基本的知识：1、HTML:超文本标记语......
  • Vue 的生命周期 详细解析(使用场景等)
    Vue生命周期图：  一、生命周期图的解读newVue（）:首先需要创建一个Vue的实例对象InitEvents&Lifecycle:初始化：生命周期、事件（如：v-once）,但数据代理还未开始（vm._d......
  • vue
    第一篇：前端发展历史、vue的介绍及基本使用第二篇：插值语法、指令系统、class和style使用、条件渲染、列表渲染第三篇：js中的循环、key值在循环的作用、数组，对象的检测与更......
  • vue组件间通信，ref属性，动态组件，插槽，计算属性，监听属性
    内容回顾checkboxv-model只针对于input,做双向数据绑定单选：选中或不选中选中就是true不选择就是false多选：数组，选了多个，把选中的value值放到数组中购物车案例check......
  • 前端vue的JsPDF html2canvas 生成pdf并以文件流形式上传到后端（转载）
    原文地址1.首先在文件内引入htmlToPdf.js这里代码引入了html2canvas和jspdf//需要npmihtml2Canvas和npmijspdf在这里将getPdf这个函数挂载到Vue的原型上，最后retu......
  • vue项目打包
    登录dcloud开发者平台，注册一个账号链接https://dev.dcloud.net.cn/#/pages/common/login然后创建项目，写上项目名字，得到uniid回到项目点那个根目录的manifest.jso......
  • .NET6+WebApi+Vue 前后端分离后台管理系统（二）
    项目搭建： 这个项目使用的开发工具是：VSCode，工具的下载和安装这里就不赘述了，自行百度吧。使用的技术主要是：Vue3、ElementPlus等，Vue项目的搭建这里也不赘述，如果不熟悉可......
  • vue-element-admin改为从后台获取菜单
    一、修改文件\src\router\index.js文件的asyncRoutes清理为exportconstasyncRoutes=[{path:'*',redirect:'/404',hidden:true}]二、修改src\store\modul......
  • vue框架4
    购物车案例v-model进阶<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></h......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99