vue_之计算属性、组件化开发、ref属性、动态化组件

2022/2/14 23:13:20

编程Tag： vue 组件属性 data return name 动态化 myText

本文主要是介绍vue_之计算属性、组件化开发、ref属性、动态化组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

复习

# 1 radio:
	-多个radio使用同一个变量，v-model绑定的值就是value的值
	-只有一个radio，v-model绑定的值就是true或false
# 2 checkbox:
	-多个checkbox使用同一个变量，v-model绑定的值就是value值的数组
    -只有一个checkbox，v-model绑定的值就是true或false
    
# 3 基本的购物车案例
	-{{getPrice()}} 只要数据一变化，就会执行---》页面变了，会重新加载
    -js的for循环：基于迭代和基于索引---》python只有基于迭代的
    
# 4 购物车带全选全不选
	-又加了一个checkbox，使用的变量是自己的
    -给全选全不选的checkbox绑定了一个 change事件
    -给单个绑定了一个change事件
    
# 5 购物车带加减

#6 v-model进阶：lazy，number，trim
# 7 生命周期钩子函数
	-8个
    -created
    -mounted
    -setTimeout
    -setInterval
    
# 8 前后端交互
	-ajax：jq的ajax，fetch，axios

今日内容

1 计算属性

# 把原来的函数，做成属性，只要原来函数中相关的值变化，属性才重新运算
类似于python的 property 方法可以通过.方法名来调用  类似于属性

1.1案例输入什么以首字母大写形式展现出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    请输入名字:<input type="text" v-model="myName">你的名字是:{{myName}}
    <br>
    <p>使用函数:{{upperName()}}</p>
    <p>使用计算属性:{{getName}}</p>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            myName: '',
        },
        methods: {
            //这种方法不常用   ，采用字符串截断的方式
            upperName() {
                return this.myName.substring(0, 1).toUpperCase() + this.myName.substring(1)
            }

        },
        //getName 以后当属性用  类似于python的property方法   把方法变成属性
        computed: {
            getName() {
                return this.myName.substring(0, 1).toUpperCase() + this.myName.substring(1)

            }

        }
    })

</script>
</html>

1.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">
    <input type="text" v-model="myText">
    <br>
    <ul>
        <li v-for="data in newdataList">{{data}}</li>
    </ul>


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            myText: '',
            dataList: ['a', 'abc', 'abandon', 'c', 'curd', 'd', 'dog', 'doc']
        },
        computed: {
            newdataList() {
                return this.dataList.filter(item => {
                    return item.indexOf(this.myText) > -1
                })
            }
        }

    })
</script>
</html>

2 组件化开发之定义局部组件

# 扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有html
# 全局组件
# 局部组件

# 总结
1 自定义组件需要有一个root element，一般包裹在一个div中
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数
<script>
var vm = new Vue({
        el: '.app',
        data: {
            name: '彭于晏'
        },
        //局部必须这么写 template里包括一个div
        components: {
            'children': {
                template: `
                    <div>
                        <h1 style="background: cornflowerblue">{{name}}</h1>
                        <child></child>
                        <hr>
                        <button @click="handleClick">点我看迪迦</button>
                    </div>
                `,
                data() {
                    return {
                        name: '迪迦'
                    }
                },
                created() {
                    console.log("我创建了")
                },
                methods: {
                    handleClick() {
                        alert('局部返回弹出来了')
                    }
                },

            }
        },


    })
</script>

3 组件化开发之定义全局组件

  // 全局组件
    Vue.component('child', {
        template: `
            <div>
                <button @click="handleClick">返回</button>
                我是全局组件{{aa}}
                <button style="background: red">主页</button>
            </div>

        `,
        //全局属性
        data() {
            return {
                aa: '我是aa'
            }
        },
        //全局方法
        methods: {
            handleClick() {
                alert("全局点击了返回")
            }
        }
    })

4 组件间通信之父传子

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

    <input type="text" v-model="myText">---->{{myText}}

    <children :mytext="myText" :toast="true" aa="true"></children>
</div>


</body>
<script>

    var vm = new Vue({
        el: '.app',
        data: {
            myText: ''
        },
        components: {
            'children': {
                template: `
                    <div>
                        <h3 style="background: red">{{mytext}}</h3>
                        <h2>{{toast}}</h2>
                        <hr>
                        <button @click="handleClick">点我看美女</button>
                    </div>
                `,
                // data() {
                //     return {}
                // },
                created() {
                    console.log("我创建了")
                },
                methods: {
                    handleClick() {
                        alert(this.mytext)
                    }
                },
                // props: ['mytext','toast'] // 数组中写自定义属性的名字,在data中不需要再写mytext

            }
        },


    })
</script>
</html>

4.1 属性认证

//props还可以这样用 规定必须是什么类型
                props: {
                    //配置之后才可以用
                    mytext: String, // myText必须是字符串
                    toast: Boolean, // 必须是布尔
                },

5 组件间通信之子传父通过自定义事件传递

5.1简介

父子组件和是不是局部组件没有必然联系，父子指的是层级，局部和全局指的是定义位置

5.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">
    //1.调用子组件
    //4.这个事件绑定了一个方法
    <child @han="handleClick"></child>
    <hr>
    {{myText}}

</div>


</body>
<script>

    Vue.component('child', {
        //2.点击按钮执行handleC方法，目前是在子组件里
        template: `
            <div>
                <button>返回</button>
                <span>{{name}}</span>
                <button @click="handleC">把name传到父组件</button>
            </div>
        `,
        data() {
            return {
                name: '我是子组件的name'
            }
        },
        methods: {
            //3.执行此方法，$emit 调用父组件的han事件 并传入参数
            handleC() {
                // 会触发该组件身上的han事件对应的函数执行，参数依次传入
                this.$emit('han', this.name,'lqz')

            }
        }
    })
    var vm = new Vue({
        el: '.app',
        data: {
            myText: ''
        },
        methods: {
            //5.此方法吧传过来的值复制给了myText 完成了子组件给父组件传值
            handleClick(a,b) {
                this.myText = a
                console.log(b)

            }
        }


    })
</script>
</html>

5.3子组件传父组件案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <child @han="handleClick"></child>
    <hr>
    {{myText}}

</div>


</body>
<script>

    Vue.component('child', {
        template: `
            <div>
                <button>返回</button>
                <span>{{name}}</span>
                <button @click="handleC">把name传到父组件</button>
            </div>
        `,
        data() {
            return {
                name: '我是子组件的name'
            }
        },
        methods: {
            handleC() {
                // 会触发该组件身上的han事件对应的函数执行，参数依次传入
                this.$emit('han', this.name,'lqz')

            }
        }
    })
    var vm = new Vue({
        el: '.app',
        data: {
            myText: ''
        },
        methods: {
            handleClick(a,b) {
                this.myText = a
                console.log(b)

            }
        }


    })
</script>
</html>

6 ref属性

ref放在标签上，拿到的是原生节点,原生节点的属性，通过 . 获取到了
ref放在组件上，拿到的是组件对象,
	通过这种方式实现子传父（this.$refs.mychild.text）
  	通过这种方式实现父传子（调用子组件方法传参数）

8 动态组件

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

    <ul>
        <li @click="who='home'">首页</li>
        <li @click="who='shopping'">购物</li>
        <li @click="who='my'">我的</li>
    </ul>
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>


</div>


</body>
<script>


    Vue.component('home', {
        template: `
            <div>
                我是：{{name}}
            </div>`,
        data() {
            return {
                name: '首页'
            }
        }
    })

    Vue.component('shopping', {
        template: `
            <div>
                我是：{{name}}
                <br>
                购买的商品：<input type="text" v-model="list">--->{{list}}
            </div>`,
        data() {
            return {
                name: '购物',
                list: ''
            }
        }
    })

    Vue.component('my', {
        template: `
            <div>
                我是：{{name}}
            </div>`,
        data() {
            return {
                name: '我的'
            }
        }
    })

    var vm = new Vue({
        el: '.app',
        data: {
            who: 'home'
        },


    })


</script>
</html>

这篇关于vue_之计算属性、组件化开发、ref属性、动态化组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！