Vue基础(三)

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量213 收藏 2
点赞数 2
分类专栏： # Vue 文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/120213048
版权

组件化开发思想

现实组件化开发思想

  • 标准
  • 分治
  • 重用
  • 组合
    在这里插入图片描述

编程组件化开发思想

在这里插入图片描述

组件化规范：Web Components

在这里插入图片描述

Web Components是通过创建封装好功能的定制元素来解决上述问题

Vue组件注册

定义组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

使用组件

<div id="components-demo">
  <button-counter></button-counter>
</div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <button-component></button-component>
    </div>
</body>
<script>
    // 定义组件
    Vue.component('button-component', {
        data: function() {
            return {
                count: 0
            }
        },
        template: "<button @click='handleClick'>You clicked me {{ count }} times.</button>",
        methods: {
            handleClick: function() {
                this.count += 2
            }
        }

    })
    let vm = new Vue({
        el: '#app'
    })
</script>

</html>

在这里插入图片描述

Vue组件注册注意项

  • date必须是一个函数
  • 组件模板内容必须是单个根元素
  • 组件模板内容可以是模板字符串
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件的注意项</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <button-component></button-component>
    </div>
</body>
<script>
    // 定义组件
    Vue.component('button-component', {
        data: function() {
            // data的值必须是一个函数 以便让每个子组件拥有独立的数据库
            return {
                count: 0
            }
        },
        // 模板的内容必须是单个根元素且可以为模板字符串
        template: `
                    <div>
                        <button @click='handleClick'>You clicked me {{ count }} times.</button>
                        <button>测试</button>
                    </div>
                  `,
        methods: {
            handleClick: function() {
                this.count += 2
            }
        }
    })
    let vm = new Vue({
        el: '#app'
    })
</script>

</html>

在这里插入图片描述

Vue组件命名方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件的命名方式</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <!-- 驼峰式命名在根组件必须要使用-相隔 -->
        <hello-word></hello-word>
        <button-component></button-component>
    </div>
</body>
<script>
    // 定义驼峰式命名
    Vue.component('helloWord', {
            data: function() {
                return {
                    msg: 'Hello Word'
                }
            },
            template: `
                    <div>
                        <strong>Hello Word</strong>
                    </div>
                     `
        })
        // 定义组件
    Vue.component('button-component', {
        data: function() {
            // data的值必须是一个函数 以便让每个子组件拥有独立的数据库
            return {
                count: 0
            }
        },
        // 模板的内容必须是单个根元素且可以为模板字符串
        template: `
                    <div>
                        <button @click='handleClick'>You clicked me {{ count }} times.</button>
                        <button>测试</button>
                        <helloWord><helloWord>
                    </div>
                  `,
        methods: {
            handleClick: function() {
                this.count += 2
            }
        }
    })
    let vm = new Vue({
        el: '#app'
    })
</script>

</html>

在这里插入图片描述

Vue局部组件注册方式

局部注册的组件 只能在根组件使用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue局部组件的注册方式</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <!-- 驼峰式命名在根组件必须要使用-相隔 -->
        <hello-word></hello-word>
        <button-component></button-component>
    </div>
</body>
<script>
    // 定义局部组件
    var helloWord = {
            data: function() {
                return {
                    msg: 'Hello Word'
                }
            },
            template: `
                    <div>
                        <strong>Hello Word</strong>
                    </div>
                     `
        }
        // 定义全局组件
    Vue.component('button-component', {
        data: function() {
            // data的值必须是一个函数 以便让每个子组件拥有独立的数据库
            return {
                count: 0
            }
        },
        // 模板的内容必须是单个根元素且可以为模板字符串
        template: `
                    <div>
                        <button @click='handleClick'>You clicked me {{ count }} times.</button>
                        <button>测试</button>
                    
                    </div>
                  `,
        methods: {
            handleClick: function() {
                this.count += 2
            }
        }

    })
    let vm = new Vue({
        el: '#app',
        // 定义局部组件
        components: {
            'hello-word': helloWord
        }
    })
</script>

</html>

在这里插入图片描述

Vue调试工具安装

1.克隆仓库

2.安装依赖包

3.构建

4.打开chrome扩展页面

5.选中开发者模式

6.加载已解压的扩展 选择shell/chrome

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue调试工具检测</title>
    <style type="text/css">
        .root {
            background-color: orange;
        }
        
        .second {
            background-color: lightgreen;
        }
        
        .third {
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div id="app" class="root">
        <div>{{root}}</div>
        <second-com></second-com>
        <second-com></second-com>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        /*
                      Vue调试工具安装与基本使用
                    */
        Vue.component('second-com', {
            data: function() {
                return {
                    second: '二级组件'
                }
            },
            template: `<div class='second'>
        <div>{{second}}</div>
        <third-com></third-com>
        <third-com></third-com>
        <third-com></third-com>
      </div>`
        });
        Vue.component('third-com', {
            data: function() {
                return {
                    third: '三级组件'
                }
            },
            template: '<div class="third"><div>{{third}}</div></div>'
        });

        var vm = new Vue({
            el: '#app',
            data: {
                root: '顶层组件'
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

Vue组件传值

Vue父组件向子组件传值

子组件通过props接收传递过来的值

Vue.component(‘menu-item', {
props: ['title'],
template: '<div>{{ title }}</div>'
})

父组件通过属性绑定向子组件传递值

<menu-item title="来自静态父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue父组件向子组件传值的过程</title>
</head>


<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <item-component title='父组件静态传递过来的值'></item-component>
        <item-component :title='ptitle' content='container'></item-component>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // Vue全局组件定义
    Vue.component('item-component', {
        props: ['title', 'content'],
        data: function() {
            return {
                msg: 'Hello Vue'
            }
        },
        template: `
                <div>{{msg + "---" +title+"---"+content}}</div>

                  `
    })
    let vm = new Vue({
        el: "#app",
        data: {
            pmsg: 'Hello Word',
            ptitle: '父组件动态传递过来的值'
        }
    })
</script>

</html>

在这里插入图片描述

props属性名规则

  • 在props中使用驼峰形式，模板中需要使用短横线的形式
  • 字符串形式的模板中没有这个限制


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props属性名规则</title>
</head>


<body>
    <div id="app">
        <div>{{pmsg}}</div>

        <item-component :test-title='ptitle' content='container'></item-component>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // Vue全局组件定义
    Vue.component('item-component', {
        props: ["testTitle"],
        data: function() {
            return {
                msg: 'Hello Vue'
            }
        },
        template: `
                <div>{{msg + "---" +testTitle+'----'}}<main-item mainItem='Hello Word'><main-item></div>

                  `
    })


    // Vue全局组件定义
    Vue.component('main-item', {
        props: ["mainItem"],

        template: `
                    <span>{{mainItem}}</span>
                  `
    })
    let vm = new Vue({
        el: "#app",
        data: {
            pmsg: 'Hello Word',
            ptitle: '父组件动态传递过来的值'
        }
    })
</script>

</html>

在这里插入图片描述

props属性值类型

  • 字符串 String
  • 数值 Number
  • 布尔值 Boolean
  • 数组 Array
  • 对象 Object
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props属性值类型</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <div>{{message}}</div>
        <menu-item hand='Hello Vue' :pmuber='123' :parr='parr' :pobj='pobj'></menu-item>
    </div>
</body>
<script>
    // 定义全局组件
    Vue.component('menu-item', {
        props: ['hand', 'pmuber', 'parr', 'pobj'],
        data: function() {
            return {
                msg: "Hello Word"
            }
        },
        template: `
                <div>
                    <div>{{hand}}</div>
                    <div>{{pmuber}}</div>
                <ul>
                    <li :key='index' v-for="(item,index) in parr">{{item}}</li>
                </ul>
                <span>{{pobj.name}}</span>
                <span>{{pobj.age}}</span> 
                </div>
                
        `
    })
    let vm = new Vue({
        el: "#app",
        data: {
            message: 'Hello Word',
            parr: ['apple', 'orange', 'lemo'],
            pobj: {
                name: '尧子陌',
                age: '20'
            }
        }
    })
</script>

</html>

在这里插入图片描述

Vue子组件向父组件传值

原则：单向数据流

子组件通过自定义事件向父组件传递参数
在这里插入图片描述

父组件通过监听子组件的事件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue子组件向父组件传值</title>
</head>


<body>
    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{message}}</div>
        <menu-item @change-big='handle'></menu-item>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 定义全局组件
    Vue.component('menu-item', {
        template: `
                <div>
                    <button @click='$emit("change-big")'>增大字体</button>
                </div>
                `
    })
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Word',
            fontSize: 20,
        },
        methods: {
            handle: function() {
                this.fontSize += 2;
            }
        }
    })
</script>

</html>

在这里插入图片描述

Vue子组件向父组件传值之携带参数

子组件通过自定义事件向父组件传递参数
在这里插入图片描述
父组件通过监听子组件的事件
在这里插入图片描述

`<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue子组件向父组件传值</title>
</head>


<body>
    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{message}}</div>
        <menu-item @change-big='handle'></menu-item>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 定义全局组件
    Vue.component('menu-item', {
        template: `
                <div>
                    <button @click='$emit("change-big")'>增大字体</button>
                </div>
                `
    })
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Word',
            fontSize: 20,
        },
        methods: {
            handle: function() {
                this.fontSize += 2;
            }
        }
    })
</script>

</html>

在这里插入图片描述

Vue非父子间传值

单独的事件中心管理 管理组件间的通信
在这里插入图片描述
监听事件与销毁事件

在这里插入图片描述
触发事件
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue兄弟组件传值</title>
</head>

<body>

    <div id="app">
        <h1>Vue兄弟组件传值</h1>
        <button @click='handleClick'>销毁</button>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 定义单独的事件管理中心
    var hub = new Vue();
    Vue.component('test-tom', {
        data: function() {
            return {
                num: 0
            }
        },
        template: `
                    <div>
                        <span>Tom:{{num}}</span>
                        <button @click='handle'>按钮</button>
                    </div>
                    `,
        methods: {
            handle: function() {

                // 触发兄弟组件的事件
                hub.$emit('jreey-event', 2)
            }
        },
        mounted: function() {
            //监听事件
            hub.$on('tom-event', (val) => {
                this.num += val
            })
        }
    })
    Vue.component('test-jerry', {
            data: function() {

                return {
                    num: 0
                }
            },
            template: `
                    <div>
                        <span>Jerry:{{num}}</span>
                        <button @click='handle'>按钮</button>
                    </div>
                    `,
            methods: {
                handle: function() {
                    // 触发兄弟组件的事件
                    hub.$emit('tom-event', 4)
                }
            },
            mounted: function() {
                //监听事件
                hub.$on('jreey-event', (val) => {
                    this.num += val
                })
            }
        })
        // 定义根实例
    let vm = new Vue({
        el: "#app",
        methods: {

            handleClick: function() {
                hub.$off('tom-event');
                hub.$off('jreey-event');
            }
        }

    })
</script>

</html>

在这里插入图片描述

Vue组件插槽的作用

父组件向子组件传递内容
在这里插入图片描述
插槽位置

在这里插入图片描述
插槽内容
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件插槽</title>
</head>

<body>
    <div id="app">
        <menu-item>Hello Word</menu-item>
        <menu-item>Hello Vue</menu-item>
        <menu-item></menu-item>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.component('menuItem', {
        template: `
                <div>
                    <strong>Slot</strong>
                    <slot>Default</slot>
                </div>      
                `
    })
    let vm = new Vue({
        el: "#app",

    })
</script>

</html>

在这里插入图片描述

Vue具名插槽

插槽定义

在这里插入图片描述
插槽内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue具名插槽</title>
</head>

<body>
    <div id="app">
        <template name='header'>
            <h2>header-one</h2>
            <h2>header-two</h2>
        </template>

        <template>
            <h2>main-one</h2>
            <h2>main-two</h2>
        </template>

        <template name='footer'>
            <h2>Footer-one</h2>
            <h2>Footer-two</h2>
        </template>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 定义全局组件
    Vue.component('menu-item', {
        template: `
                <div>
                    <header>
                        <slot name='header'></slot>
                    </header>
                    <main>
                        <slot></slot>
                    </main>
                    <footer>
                        <slot name='footer'></slot>
                    </footer>
                </div>
                `
    })
    let vm = new Vue({
        el: "#app",

    })
</script>

</html>

在这里插入图片描述

Vue作用域插槽

应用场景:父组件对子组件的内容进行加工处理

通过slot-scope属性对子组件传递过来的值内容加工

插槽定义
在这里插入图片描述
插槽内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue作用域插槽</title>
    <style>
        .current {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <menu-item v-bind:fruit='fruit'>
            <tempalte slot-scope='slotProps'>
                <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong>
                <span v-else>{{slotProps.info.name}} </span>
            </tempalte>
        </menu-item>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.component('menu-item', {
        props: ['fruit'],
        template: `
                <div>
                    <ul> 
                        <li v-bind:key='item.id' v-for='(item,index) in fruit'>
                            <slot :info='item'>{{item.name}}</slot>
                        </li>
                    </ul>
                </div>        
                `
    })
    let vm = new Vue({
        el: "#app",
        data: {
            fruit: [{
                    id: 1,
                    name: '香蕉'
                }, {
                    id: 2,
                    name: '苹果'
                }, {
                    id: 3,
                    name: '菠萝'
                },

            ]
        }
    })
</script>

</html>

在这里插入图片描述

Vue组件之购物车

根据业务功能进行组件化划分

  • 标题组件（展示文本）
  • 列表组件（列表展示 商品数量变更 商品删除 ）
  • 结算组件（计算商品总额）

功能实现步骤

  • 实现整体布局和样式效果
  • 划分独立的功能组件
  • 组合所有的子组件形成整体结构
  • 逐个实现各个组件功能
    • 标题组件
    • 列表组件
    • 结算组件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        .container .cart {
            width: 300px;
            margin: auto;
        }
        
        .container .title {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*color: #fff;*/
        }
        
        .container .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }
        
        .container .total button {
            margin: 0 10px;
            background-color: #DC4C40;
            height: 35px;
            width: 80px;
            border: 0;
        }
        
        .container .total span {
            color: red;
            font-weight: bold;
        }
        
        .container .item {
            height: 55px;
            line-height: 55px;
            position: relative;
            border-top: 1px solid #ADD8E6;
        }
        
        .container .item img {
            width: 45px;
            height: 45px;
            margin: 5px;
        }
        
        .container .item .name {
            position: absolute;
            width: 90px;
            top: 0;
            left: 55px;
            font-size: 16px;
        }
        
        .container .item .change {
            width: 100px;
            position: absolute;
            top: 0;
            right: 50px;
        }
        
        .container .item .change a {
            font-size: 20px;
            width: 30px;
            text-decoration: none;
            background-color: lightgray;
            vertical-align: middle;
        }
        
        .container .item .change .num {
            width: 40px;
            height: 25px;
        }
        
        .container .item .del {
            position: absolute;
            top: 0;
            right: 0px;
            width: 40px;
            text-align: center;
            font-size: 40px;
            cursor: pointer;
            color: red;
        }
        
        .container .item .del:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <my-cart></my-cart>
        </div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var CartTitle = {
        props: ['uname'],
        template: `
        <div class="title">{{uname}}的商品</div>
      `
    }
    var CartList = {
        props: ['list'],
        template: `
        <div>
          <div :key='item.id' v-for='item in list' class="item">
            <img :src="item.img"/>
            <div class="name">{{item.name}}</div>
            <div class="change">
              <a href="" @click.prevent='sub(item.id)'>－</a>
              <input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)' />
              <a href="" @click.prevent='add(item.id)'>＋</a>
            </div>
            <div class="del" @click='del(item.id)'>×</div>
          </div>
        </div>
      `,
        methods: {
            changeNum: function(id, event) {
                this.$emit('change-num', {
                    id: id,
                    type: 'change',
                    num: event.target.value
                })
            },
            sub: function(id) {

                this.$emit('change-num', {
                    id: id,
                    type: 'sub'

                })
            },

            add: function(id) {
                this.$emit('change-num', {
                    id: id,
                    type: 'add'
                })
            },
            del: function(id) {

                this.$emit('cart-del', id)

            }
        }
    }
    var CartTotal = {
        props: ['list'],
        template: `
        <div class="total">
          <span>总价：{{total}}</span>
          <button>结算</button>
        </div>
      `,
        computed: {
            total: function() {
                //计算商品的总结
                var t = 0;
                this.list.forEach(item => {
                    t += item.price * item.num
                });
                return t;
            }
        }
    }
    Vue.component('my-cart', {
        data: function() {
            return {
                uname: '尧子陌',
                list: [{
                    id: 1,
                    name: 'TCL彩电',
                    price: 1000,
                    num: 1,
                    img: 'img/a.jpg'
                }, {
                    id: 2,
                    name: '机顶盒',
                    price: 1000,
                    num: 1,
                    img: 'img/b.jpg'
                }, {
                    id: 3,
                    name: '海尔冰箱',
                    price: 1000,
                    num: 1,
                    img: 'img/c.jpg'
                }, {
                    id: 4,
                    name: '小米手机',
                    price: 1000,
                    num: 1,
                    img: 'img/d.jpg'
                }, {
                    id: 5,
                    name: 'PPTV电视',
                    price: 1000,
                    num: 2,
                    img: 'img/e.jpg'
                }]
            }
        },
        template: `
                <div class='cart'>
                    <cart-title :uname='uname'></cart-title>
                    <cart-list :list='list'  @cart-del='delCart($event)' @change-num='changeNum($event)' ></cart-list>
                    <cart-total :list='list'></cart-total>
                </div>
                `,
        components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
        },
        methods: {
            changeNum: function(val) {
                // 分为三种情况，输入法变更，加号变更，减号变更
                if (val.type == 'change') {
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num = val.num;
                            // 终止遍历
                            return true;
                        }
                    });
                } else if (val.type == 'sub') {
                    //减少操作
                    this.list.some(item => {
                        if (item.id == val.id) {
                            console.log(item.num);
                            item.num -= 1;
                            // 终止操作
                            return true;
                        };

                    })
                } else if (val.type == 'add') {
                    // 加一操作
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num += 1;
                            // 终止操作
                            return true;

                        }
                    })
                }
                // 根据子组件传递过来的数据，跟新list中对应的数据

            },
            delCart: function(id) {
                var index = this.list.forEach(item => {
                    return item.id == id;
                });
                this.list.splice(index, 1)
            }
        }
    })

    let vm = new Vue({
        el: "#app",
        data: {

        },

    })
</script>

</html>

在这里插入图片描述

「已注销」
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础入门
06-21
本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三 方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之...
vue基础+实战视频
02-25
Vue (读音 /vjuː/，类似于 view) ...Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue基础用法&基础原理整理
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue基础入门
weixin_58470558的博客
05-13 5013
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
Vue 基础入门
我的的博客哦
05-17 9765
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue 基础知识总结
qq_40046544的博客
09-14 3124
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
vue基础知识汇总
yuandawang的博客
01-06 5807
vue基础知识汇总
vue基础三--vue-router@4的配置及使用
hrj199036的博客
12-04 1605
一、安装vue-router@4 二、配置router 三、在main.js中配置四、在components中使用 说明 要求：先安装好vue3 安装vue-router@4 配置router 在main.js中配置 在components中使用 一、安装vue-router@4 要先安装 npm init vite-app 项目名 npm install --save vue-router@4 注：vue3要安装router的版本是4，以下的版本不适用 二、配置ro.........
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
Vue基础
MoYuP_ENG的博客
10-13 6502
是一套用于构建用户界面的渐进式JavaScript框架简单应用：只需一个轻量小巧的核心库复杂应用：可以引入各式各样的Vue插件渐进式：Vue可以自底向上逐层的应用 （从简单应用到复杂应用就是渐进式）Vue特点：1、采用组件化模式，提高代码复用率、且让代码更好维护2、声明式编码，让编码人员无需直接操作DOM，提高开发效率3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点局部指令：new Vue({ directives:{指令名:配置对象} })或。
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础及高级.docx
10-04
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/
vue组件三大核心概念图文详解
10-16
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节，感兴趣的朋友跟随小编一起看看吧
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1109
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
vue基础省市区三级联动
05-11
Vue基础省市区三级联动可以通过以下步骤实现： 1. 创建一个Vue组件，在组件内部定义三个下拉框分别对应省、市、区/县。 2. 在组件的data中定义省、市、区/县的数据源，可以使用硬编码的方式，也可以通过Ajax请求...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值