第168天学习打卡（项目 谷粒商城 10 Vue 指令 计算属性和侦听器 组件化 生命周期钩子函数 模块化）

最新推荐文章于 2024-08-15 11:09:11 发布
最新推荐文章于 2024-08-15 11:09:11 发布
阅读量80 收藏
点赞数 1
文章标签： vue filter html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doudoutj/article/details/118229861
版权

Vue指令

v-if和v-show.html
<!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>Document</title>
</head>
<body>
    <!-- 
        v-if ,顾明思议，条件判断，当得到结果为true时，所在的元素才会被渲染
        v-show,当得到结果为true时，所在的元素才会被显示
     -->
     <div id="app">
         <button v-on:click="show = !show">点我呀</button>
         <!-- 1.使用v-if显示 -->
         <h1 v-if="show">if=看到我....</h1>
         <!-- 2.使用v-show显示 -->
         <h1 v-show="show">show=看到我</h1>

     </div>
     <script src="../node_modules/vue/dist/vue.js"></script>

     <script>
        let app = new Vue({
            el: "#app",
         data: {
             show: true
         }
        })

     </script>
</body>
</html>

image-20210625201639623

v-else和v-else-if.html
<!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>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦?! &gt;= 0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦?! &gt;= 0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦?! &lt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦?! &lt; 0.1 
        </h1>


    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let app = new Vue({
            el: "#app",
            data: {random: 1}
        })
    </script>
</body>
</html>

image-20210625203110440

Vue计算属性和侦听器

计算属性和侦听器.html
<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记；价格：{{xyjPrice}},数量：<input type="number" v-model="xyjNum"></li>
            <li>水浒传；价格：{{shzPrice}},数量：<input type="number" v-model="shzNum"></li>
            <li>总价: {{totalPrice}} </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum

                }
            },
        })
    </script>
</body>
</html>

image-20210625205108765

watch监控

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记；价格：{{xyjPrice}},数量：<input type="number" v-model="xyjNum"></li>
            <li>水浒传；价格：{{shzPrice}},数量：<input type="number" v-model="shzNum"></li>
            <li>总价: {{totalPrice}} </li>
            {{msg}}
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        //watch可以让我们监控一个值的变换，从而做出相应的反应
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum

                }
            },
            watch: {
                xyjNum: function(newVal,oldVal){
                   
                    if(newVal > 3){
                        this.msg = "库存超出限制";
                        this.xyjNum = 3
                    }
                }
            },
        })
    </script>
</body>
</html>

image-20210625205830518

image-20210625210105492

image-20210625210122657

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
        <ul>
            <li>西游记；价格：{{xyjPrice}},数量：<input type="number" v-model="xyjNum"></li>
            <li>水浒传；价格：{{shzPrice}},数量：<input type="number" v-model="shzNum"></li>
            <li>总价: {{totalPrice}} </li>
            {{msg}}
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        //watch可以让我们监控一个值的变换，从而做出相应的反应
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum

                }
            },
            watch: {
                xyjNum(newVal,oldVal){
                   
                    if(newVal >= 3){
                        this.msg = "库存超出限制";
                        this.xyjNum = 3
                    }else{
                        this.msg="";
                    }
                }
            },
        })
    </script>
</body>
</html>
过滤器.html

image-20210625211428386

image-20210625211509068

<!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>Document</title>
</head>
<body>
    <!-- 过滤器常用来处理文本格式化操作。过滤可以用在两个地方：双花括号插值和v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1 ? "男":"女"}} ==> {{user.gender | genderFilter}}
            </li>
        </ul>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    {id: 1, name: 'jacky', gender: 1},
                    {id: 2, name: 'peter', gender: 0}
                ]
            },
            filters:{
                genderFilter(val){
                    if(val == 1){
                        return "男";
                    }else{
                        return "女";
                    }
                }
            }
        })
    </script>


</body>
</html>

image-20210625211912061

image-20210625211929426

<!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>Document</title>
</head>
<body>
    <!-- 过滤器常用来处理文本格式化操作。过滤可以用在两个地方：双花括号插值和v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1 ? "男":"女"}} ==> {{user.gender | genderFilter}} 
                ==> {{user.gender | gFilter}}
            </li>
        </ul>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        Vue.filter("gFilter", function(val){
            if(val == 1){
                        return "男~~~";
                    }else{
                        return "女~~~";
                    }

        })
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    {id: 1, name: 'jacky', gender: 1},
                    {id: 2, name: 'peter', gender: 0}
                ]
            },
            filters:{
                //filters定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val){
                    if(val == 1){
                        return "男";
                    }else{
                        return "女";
                    }
                }
            }
        })
    </script>


</body>
</html>

Vue组件化

image-20210625212043328

image-20210625213511080

<!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>Document</title>
</head>
<body>
    
    <div id="app">
        <button v-on:click="count++">我被点击了{{count}}次</button>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: "#app",
            data:{
                count: 1
            }
        })
    </script>
</body>
</html>

image-20210625212537902

全局声明组件

image-20210625213033391

image-20210625213050514

image-20210625213122994

image-20210625213136890

image-20210625213427801

<!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>Document</title>
</head>
<body>
    
    <div id="app">
        <button v-on:click="count++">我被点击了{{count}}次</button>
        <counter></counter>
        <counter></counter>
        <counter></counter>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        //1.全局声明注册一个组件
        Vue.component("counter",{
            template: ` <button v-on:click="count++">我被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });
        new Vue({
            el: "#app",
            data:{
                count: 1
            }
        })
    </script>
</body>
</html>

局部声明组件

image-20210625214451539

image-20210625214121530

<!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>Document</title>
</head>
<body>
    
    <div id="app">
        <button v-on:click="count++">我被点击了{{count}}次</button>
        <counter></counter>
        <counter></counter>
        <counter></counter>

        <button-counter></button-counter>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        //1.全局声明注册一个组件
        Vue.component("counter",{
            template: ` <button v-on:click="count++">我被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        //2.局部声明一个组件
        const buttonCounter = {
            template: ` <button v-on:click="count++">我被点击了{{count}}次~~~~~</button>`,
            data() {
                return {
                    count: 1
                }
            }

        };
        new Vue({
            el: "#app",
            data:{
                count: 1
            },
            components: {
                'button-counter' : buttonCounter
            }
        })
    </script>
</body>
</html>

Vue 生命周期钩子函数

image-20210625214846842

<!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>Document</title>
</head>
<body>
    <div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}}，有{{num}}个人点赞</h2>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    </script>
</body>

</html>

Vue模块化开发

image-20210625215926025

image-20210625221303191

image-20210625220919398

image-20210625221249457

npm install webpack -g


npm install -g @vue/cli-init

报错：

 vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET
 
 vue-cli · read ECONNRESET

image-20210625223409670

image-20210625223615903

快捷键: windoms + R 然后输入cmd 就可以打开命令行提示窗口了

B站学习网址：全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪_哔哩哔哩_bilibili

doudoutj
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
五、伊森商城 前端基础-Vue 计算属性和侦听器 & 过滤器 & 组件化 & 生命周期钩子函数 p25
你甚至不愿意叫我一声伸哥
12-05 412
计算属性动态运算、侦听器检测条件、过滤器改变渲染的结果、 组件化封装，抽取和复用、 生命周期钩子函数
Vue生命周期钩子和 计算属性与侦听器
weixin_45343973的博客
07-05 264
生命周期钩子 概念图 生命周期 Vue实例从创建到销毁的过程，就是生命周期。 Vue 组件的生命周期分为四个阶段，每个阶段有两个生命钩子，注意前后钩子。 创建阶段：主要用于组件创建时，获取数据设置组件。 beforeCreate组件实例刚被创建，组件属性data、el等还未生成 created（能够访问创建成功的组件实例，但不能访问 模板，el 或 DOM） 挂载阶段：主要用于访问组件 DOM...
Vue |计算属性和侦听器 |组件化开发 |生命周期函数
匿名攻城狮
02-13 364
Vue的计算属性和侦听器学习记录
vue——计算属性、侦听属性、自定义指令、生命周期函数
qq_56668869的博客
09-04 1387
计算属性、侦听属性、自定义指令、生命周期函数、组件
前端基础 - Vue 计算属性,侦听器,过滤器,组件化,生命周期钩子函数
weixin_44743332的博客
10-03 103
计算属性（根据数据变动，动态算出结果）： 效果图： 侦听器(每次数据变动时候监听数据的前后变化)： 效果图： 应用场景：监听数据上限，如果超过上限，则将数据值为最大值。 过滤器：常用来处理文本可是化的操作，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 这个1,0 是从数据库中取出来的，代表着男，女。但是只是数据库中的数据，要把它转换成“男，女” 可以在插值表达式中用三元运算符： 如果在复杂场景，这样是不行的，这时就要用到过滤器: 这个过滤器是写在Vue 对象里面的，成为局
深入理解Vue 3：计算属性与侦听器的艺术
05-30 965
Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性不仅使得Vue.js更加高效和灵活，也为开发者提供了更好的开发体验。Composition API：Vue 3引入了Composition API，它是对原有Options API的补充，使得代码更加模块化和可复用。通过组合式API，开发者可以更方便地组织和重用逻辑。
Vue(day02-05~14: 自定义指令、钩子函数、计算属性和侦听器、过滤器、生命周期)
weixin_44764873的博客
02-01 148
自定义指令 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下： // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: fu...
前端学习之VUE基础二:Vue常用特性(表单操作, 自定义指令,计算属性, 过滤器,侦听器,生命周期)
浅弋、璃鱼的博客
05-24 740
文章目录一、Vue常用特性：1. 表单操作：1.1 基于Vue的表单操作:1.2 数据绑定:1.3 表单域修饰符:2. 自定义指令：2.1 Vue.directive 注册全局指令:2.2 Vue.directive 注册全局指令 带参数:2.3 自定义指令-局部指令:3. 计算属性：3.1 语法:2.3 示例:3.3 计算属性与方法的区别:4. 过滤器：4.1 什么是过滤器:4.2 自定义过滤器:4.3 过滤器的使用:4.4 局部过滤器:4.5 过滤器传参:5. 侦听器:5.1 什么是侦听器5.2 侦听器
vue.js基础学习（生命周期钩子函数）
qq_58866450的博客
08-24 1145
基础入门：vue.js生命周期钩子函数
vue3的生命周期，生命周期钩子函数，如何使用组件拼接页面
godpunishv3的博客
07-02 475
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码!常见钩子函数onMounted() 注册一个回调函数，在组件挂载完成后执行。onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。
vue函数生命周期.rar
01-06
在实际开发中，这些生命周期钩子常常结合Vue的其他特性一起使用，比如计算属性、侦听器、异步组件等，以实现更复杂的功能。通过深入学习和实践，开发者能够更熟练地利用Vue的生命周期来优化应用性能，提高代码的可...
Vue 生命周期钩子.doc
07-09
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 中，每个实例都有其特定的生命周期，...在实际项目中，结合生命周期钩子和 Vue 提供的其他特性，如计算属性、侦听器、路由等，可以构建出功能强大的单页应用。
vue.js 2.0 - 快速开始组件化开发应用的模板.zip
02-09
在这个“vue.js 2.0 - 快速开始组件化开发应用的模板.zip”压缩包中，包含了一个名为“vue-quickStart-master”的项目模板，旨在帮助开发者快速启动基于Vue 2.0的组件化开发流程。以下是关于Vue 2.0组件化开发的核心...
Vue.js 2.0学习教程之从基础到组件详解
10-19
- 组件的生命周期：理解并使用Vue组件的生命周期钩子函数（如mounted、updated、destroyed等）对于管理组件状态和副作用至关重要。 通过文章内容，可以得知作者对Vue.js 2.0的特性有着深刻的理解，并提出了许多实用...
vue生命周期
01-08
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。Vue实例的生命周期是指从创建到销毁的整个过程，...在实际开发中，结合Vue的其他特性，如组件、指令、计算属性和侦听器等，可以构建出更复杂的应用。
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
2301_78945238的博客
08-14 1117
HTML静态网页成品作业(HTML+CSS)——古诗词网设计制作(5个页面)
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
最新发布
2301_78945238的博客
08-15 279
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 596
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
JS（三）——更改html内数据
初叙
08-15 191
JavaScript更改html内数据
addeventlistener事件参数_Vue的钩子事件和程序化侦听
05-24
addEventListener 事件参数 addEventListener 接受三个参数，第一个参数是事件类型，第二个参数是事件触发时要执行的函数，第三个参数是一个布尔值，用来指定事件是否在捕获或冒泡阶段执行。例如： ``` element.addEventListener('click', () => { console.log('clicked') }, false) ``` Vue的钩子事件和程序化侦听 Vue的钩子事件是在组件生命周期中预定义的函数，例如 beforeCreate、created、beforeMount、mounted 等等。这些钩子会在特定的时刻自动调用，从而给开发者提供了灵活性和可扩展性。例如： ``` export default { beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') } } ``` 程序化侦听是使用 Vue 提供的 $on 方法手动添加事件侦听器。$on 方法接受两个参数，第一个参数是事件名称，第二个参数是要执行的函数。例如： ``` export default { mounted() { this.$on('click', () => { console.log('clicked') }) } } ``` 需要注意的是，程序化侦听器需要手动移除，否则可能会导致内存泄漏。可以使用 $off 方法来移除事件侦听器。例如： ``` export default { mounted() { const handleClick = () => { console.log('clicked') } this.$on('click', handleClick) // 移除事件侦听器 this.$off('click', handleClick) } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值