vue_day05

目录

今日内容详细

一、组件其他

# 根组件 和 组件 一些问题
	-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 装模块
posted @   小白峰  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
·  vue_day04
·  vue_day07
·  vue组件
·  1 组件其他、 2 组件间通信之父传子、 3 组件间通信之子传父 、4 ref属性 、5 动态组件、6 插槽、7 计算属性、8 监听属性、 9 node环境搭建
·  组件其它，组件间通信之父传子，组件间通信之子传父，ref属性，动态组件，插槽，计算属性，监听属性，node环境搭建
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· .NET Core 中如何实现缓存的预热？
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
点击右上角即可分享
微信分享提示
SQL AI 助手