监听、生命周期函数、组件等-vue的学习之旅

最新推荐文章于 2024-11-01 14:29:13 发布

still water

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量168

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43131450/article/details/117189700

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.计算属性和监听器

代码实例：

<body>

    <div id="app">
        <ul>
            <li>喜欢板井泉水的人有
                <input type="number" v-model="num1"></input>
            </li>
            <li>喜欢周杰伦的人有
                <input type="number" v-model="num2"></input>
            </li>
            <li>
                两位歌手的总喜欢人数为{{sum}}
            </li>
            {{msg}}
        </ul>
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.声明式渲染
        let vue = new Vue({
            el:"#app",
            data:{
                num1:100.0,
                num2:200.0,
                msg:""
            },
            // 实时计算数据
            computed: {
                sum() {
                    return Number(this.num1)+Number(this.num2);
                }
            },
            watch: {
            // 方法名和监听的变量一致即可
                num1(newValue, oldValue) {
                    if(newValue >= 100) {
                        this.msg = "喜欢姐姐的人数超100了"
                    } else {
                        this.msg = ""
                    }
                },
            },
        })
    </script>
</body>

结果为：
在这里插入图片描述

2.过滤器（filters）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
比如要渲染男女性别时：

<body>
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender}}
                <!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
                <td>{{user.gender | genderFilter}}</td>
                <td>{{user.name | capitalize}}</td>
            </li>

        </ul>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 在创建 Vue 实例之前全局定义过滤器： 
        Vue.filter('capitalize', function (value) { return value.charAt(0).toUpperCase() + value.slice(1) })
        //1.声明式渲染
        let vue = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                genderFilter(gender) {
                    return gender==1? '男' :'女';
                },
            },
        })
    </script>
</body>

结果;
在这里插入图片描述

3.组件

代码演示：

<body>

    <div id="app">
        <!-- 直接以声明的组件名为一个新的标签 -->
        <count></count>
        <count2></count2>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 在创建 Vue 实例之前全局定义模板 
        Vue.component('count', {
            template: '<button v-on:click="count++">你点了 我 {{ count }} 次，我记住了.</button>',
            data() {
                return {
                    count: 0
                }
            }
        });
        // 局部声明
        const count2 = {
            template: '<button v-on:click="count++">你点了 我 {{ count }} 次，我忘记了.</button>',
            data() {
                return {
                    count: 0
                }
            }
        }
        //1.声明式渲染
        let vue = new Vue({
            el: "#app",
            data: {
            },
            components:{
                count2
            }
        })
    </script>
</body>

效果为：
在这里插入图片描述

全局模板创建说明：

组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。
但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板
全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
data 必须是一个函数，不再是一个对象。

局部模板创建说明

对于局部创建模板，我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致
components 就是当前 vue 对象子组件集合。
其 key 就是子组件名称
其值就是组件对象名
效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例中使用

4.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

<body>

    <div id="app">
        <span id="num">{{num}}</span>
        <button v-on:click="num++">赞！</button>
        <h2>{{name}}，非常帅！！！有{{num}}个人点赞。 </h2>

    </div>

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

        //1.声明式渲染
        let vue = 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() {
                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>