首页 > 编程语言 >组件其他-组件间父子通信-ref属性-动态组件-插槽-计算属性-监听属性-node环境搭建

组件其他-组件间父子通信-ref属性-动态组件-插槽-计算属性-监听属性-node环境搭建

时间：2023-02-19 21:24:02浏览次数：37  
标签：node age var 组件 home data 属性

目录

组件其他-组件间父子通信-ref属性-动态组件-插槽-计算属性-监听属性-node环境搭建

今日概要

  • 1 组件其他

  • 2 组件间通信

    • 2.1 组件间通信之子传父
    • 2.2 组件间通信之父传子

  • 3 ref属性

  • 4 动态组件

    • 4.0 不使用动态组件
    • 4.1 动态组件component标签
    • 4.2 keep-alive保持组件不销毁

  • 5 插槽

    • 5.1 匿名插槽
    • 5.2 具名插槽

  • 6 计算属性

    • 6.0 计算属性基本使用
    • 6.1 通过计算属性重写过滤案例

  • 7 监听属性

  • 8 node环境搭建

今日内容详细

1 组件其他

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

1.0 组件回顾

<!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>名字:{{name}}</p>
    <p>年龄:{{age}}</p>

    <hr>
    <child></child>
</div>



</body>

<script>

    var child = {
        template:`
        <div>
            <button>后退</button>
            首页--->{{name}}
            <button>前进</button>
        </div>
        `,
        data (){
            return{
                name: '郑鹏飞'
            }
    }
    }

    var vm = new Vue({
        el: '.app',
        data: {
            age: 19
        },
        methods: {

        },
        components: {
            child
        }
    })
</script>
</html>

2 组件间通信

2.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">
<p>子组件传递过来的数据： {{mytext}}</p>

    <hr>
    <child @myevent="handleEvent"></child>
</div>



</body>

<script>

    var child = {
        template:`
        <div>
          <input type="text" v-model="mytext">
          <button @click="handleSend">点我传递</button>
        </div>
        `,
        data (){
            return{
                mytext:''
            }
    },
        methods: {
            handleSend(){
                // 子组件中，触发自定义事件的执行,会执行父组件自定义事件绑定的函数，有几个参数，就传几个参数
                this.$emit('myevent',this.mytext)
            }
        }
    }

    var vm = new Vue({
        el: '.app',
        data: {
            mytext:''
        },
        methods: {
            handleEvent(mytext){
                this.mytext = mytext
            }
        },
        components: {
            child
        }
    })
</script>
</html>

2.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>
        <h2>字符串的age--->age="age"</h2>
        <child :age="age"></child>
</div>

</body>
<script>
    // 父中有age 子child只有name 没有age 现在把父中的age传到child中 显示

    var child = {
        template:`          <div>
          <button>后退</button>
          首页--->名字：{{ myname }}--->年龄：{{ age }}
          <button>前进</button>
          </div>`,
        data(){
            return{
                myname: '郑鹏飞'
            }
        },
        props:{age:Number}
    }

    var vm = new Vue({
        el: '.app',
        data: {
            age: '19'
        },
        components: {
            child
        }
    })
</script>
</html>

// props:{age:Number}必须有这个，如果传过来的类型不是这个，页面显示，但是后台报错

3 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>
    <br>
    <child ref="mychild"></child>


</div>

</body>
<script>
    // 父中有age，子child 只有name，没有age，现在把父中的age传到child中，显示
    var child = {
        template: `
          <div>

          <h1>名字：{{ name }}--->年龄：{{ age }}</h1>
          <button @click="handleClick">点我弹出名字</button>

          </div>`,
        data() {
            return {
                name: 'lqz',
                age: 19
            }
        },
        methods: {
            handleClick(){
                alert(this.name)
            }
        }
    }
    var vm = new Vue({
        el: '.app',
        data: {
            age: 999
        },
        methods: {
            handleClick() {
                // 1 ref 属性放在普通标签上，拿到标签的dom对象
                // 通过this.$refs可以拿到所有标签上写了ref属性的 标签 ，对象类型 key值是ref对应的value值， value值是原生dom对象
                // console.log(this.$refs)
                // this.$refs.myinput.value = 'lqz is handsome'
                // 重点：以后就不需要关注是子传父还是父传子了，直接通过对象取值赋值即可，而且可以主动调用子组件中的函数
                this.$refs.mychild.handleClick()
            }
        },
        components: {
            child
        }

    })
</script>
</html>

4 动态组件

4.0 不使用动态组件

<!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('home')">首页</button>|
    <button @click="handleClick('order')">订单</button>|
    <button @click="handleClick('goods')">商品</button>|

    <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>`,

    }

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

4.1 动态组件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">
    <button @click="handleClick('home')">首页</button>|
    <button @click="handleClick('order')">订单</button>|
    <button @click="handleClick('goods')">商品</button>|

    <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>`,

    }

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

4.2 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" > <buttont>搜索</buttont>
          </div>`,

    }


    var vm = new Vue({
        el: '.app',
        data: {
            who: 'home'
        },
        methods: {
            handleClick(type) {
                this.who = type
            }
        },
        components: {
            home,
            order, goods
        }


    })
</script>
</html>

5 插槽

# 一般情况下 编写玩1个组件之后 组件的内容都是写死的 需要加数据 只能去组件中修改 扩展性很差

# 然后就出现了插槽这个概念 只需要在组件中添加<slot></slot> 就可以在body的组件标签中添加内容

6.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="sister.jpg" alt="">

        </div>

    </home>
    <hr>

</div>
</body>
<script>
    var home = {
        template:`<div>
                  <h1>home页面</h1>
                    <slot></slot>
                    <h1>结束了</h1>
                    <slot></slot>
                    <slot></slot>
                  </div>`
    }

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

// 在body的div中写，会插在<slot></slot>中

5.2 具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body><!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">
            我是a的div
            <img src="sister.jpg" alt="">

        </div>

        <div slot="b">我是b的div</div>

    </home>
    <hr>

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

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

6 计算属性

# 计算属性只有使用的变量发生变化时 才重新运算

# 计算属性就像python中的property 可以把方法/函数伪装成属性

6.0 计算属性基本使用

<!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">-&ndash;&gt;{{mytext.slice(0,1).toUpperCase() + mytext.slice(1)}}-->


<!--    第二种 函数方法-->
<!--    <input type="text" v-model="mytext">-&ndash;&gt; {{getUpper()}}-->

<!--    第三种 计算属性-->
    <input type="text" v-model="mytext">---->{{newText}}

</div>

</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            mytext: '',
        },
        methods: {
            getUpper(){
                return this.mytext.slice(0, 1).toUpperCase() + this.mytext.slice(1)
            }
        },
        computed: {
            newText(){
                return this.mytext.slice(0, 1).toUpperCase() + this.mytext.slice(1)
            }
        }
    })
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="app">
    <h1>过滤案例</h1>
    <p>请输入要搜索的内容：<input type="text" v-model="myText"></p>
    <ul>
        <li v-for="item in newDateList">{{item}}</li>
    </ul>

</div>
</body>
<script>    var vm = new Vue({
    el: '.app',
    data: {
        myText: '',
        dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
    },
    computed: {
        newDateList() {
            return this.dataList.filter(
                item => item.indexOf(this.myText) >= 0
            )
        }
    }
})</script>

</html>

7 监听属性

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

        watch:{
            // 监听这个数据 一旦发生变化(前面点击之后会变)
            course_type(){
                // 就会执行下边的方法
                console.log('我变化了')
                this.getData()
            }
        }

<!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>



    <div>
        假设有很多课程 点击上面的标签可以完成过滤
    </div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            course_type: '0'
        },
        // 在创建之前执行一次 这次执行是默认0 表示获取所有
        created(){
            this.getDate()
        },
        methods: {
            getData(){
                // 发送ajax 获取所有课程 通过course过滤
            },
            handleClick(type){
                // 通过点击事件改变course的数字来过滤课程内容 1表示python 2表示linux
                this.course_type = type
                this.getData()
            }
        },
        watch:{
            // 监听这个数据 一旦发生变化(前面点击之后会变)
            course_type(){
                // 就会执行下边的方法
                console.log('我变化了')
                this.getData()
            }
        }
    })
</script>
</html>

node环境搭建

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

标签：node,age,var,组件,home,data,属性
From： https://www.cnblogs.com/zpf1107/p/17135622.html

相关文章

  • Vue前后端交互、生命周期、组件化开发
    目录Vue前后端交互、生命周期、组件化开发一、Vue用axios与后端交互二、Vue的生命周期三、组件化开发Vue前后端交互、生命周期、组件化开发一、Vue用axios与后端交互​ ......
  • vue 组件间通信，ref属性，动态组件，插槽，计算属性，监听属性 node环境搭建
    昨日内容回顾#0checkboxv-model只针对于input，做双向数据绑定 -单选：选中或不选中选中就是true，不选中就是false-多选：数组，选了多个，把选中的value值放到......
  • themyleaf th:foreach 遍历时第二个参数 stat 属性说明
    stat是状态变量，有如下属性:index遍历顺序从零下标开始计数count遍历顺序从一下标开始计数size遍历的集合长度current当前项even/odd判断奇偶first判断是否......
  • Node：使用nvm管理多个版本的node
    nvm-windows下载地址：https://github.com/coreybutler/nvm-windows/releases其他操作系统nvm的安装说明：https://github.com/nvm-sh/nvm安装的时候，注意选择新安装nodejs......
  • 【JavaScript】18_面向对象，类与属性
    1、面向对象面向对象编程（OOP）程序是干嘛的？程序就是对现实世界的抽象（照片就是对人的抽象）对象是干嘛的？一个事物抽象到程序中后就变成了对象在程序的世界中，一切皆对象面向对象......
  • vue组件间通信，ref属性，动态组件，插槽，计算属性，监听属性
    内容回顾checkboxv-model只针对于input,做双向数据绑定单选：选中或不选中选中就是true不选择就是false多选：数组，选了多个，把选中的value值放到数组中购物车案例check......
  • 大数据组件之Apache Oozie
    1、Oozie介绍官网首页介绍：​​​​http://oozie.apache.org​​​1.1Oozie是一个管理ApacheHadoop作业的工作流调度系统。1.2Oozie的workflowjobs是由actions组成......
  • nodejs
     Node.js/usr/local/bin/nodenpm /usr/local/bin/npm Thispackagehasinstalled:Node.jsv19.6.1to/usr/local/bin/nodenpmv9.4.0to/usr/local/bin/npm......
  • 历史表迁移组件设计
    背景：通过sql语句和配置表的手段进行历史表的数据迁移过程。指标：扩展性，高性能核心类/接口说明：HistoryProductDirector：指挥者，负责安排已有模块的顺序，然后通知Builder开始建......
  • NodeJS安装（Mac版本）
    nvm，node，npm之间的区别nvm：nodejs版本管理工具。也就是说：一个nvm可以管理很多node版本和npm版本。nodejs：在项目开发时的所需要的代码库npm：nodejs包管理工具。......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99