第二周学习笔记（vue）

最新推荐文章于 2024-07-23 21:42:00 发布

A822089447

最新推荐文章于 2024-07-23 21:42:00 发布

阅读量90

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/A822089447/article/details/125025230

版权

本周学习了的知识点：

1、列表过滤与排序

2、自定义指令

3、过滤器

4、自定义指令

5、生命周期函数

6、挂载流程

7、非单文件组件的使用

以下是一些代码的截图，因为太多了，我就只放一部分

<script>
    new Vue({
        el: "#root",
        data: function() {
            return {
                n: 1,
            }
        },
        directives: {
            //在自定义指令中使用this 绑定的是 window
            //用Vue.directive("指令名"，{函数体或者是一个对象})来创建一个全局的自定义函数

            big: function(tag, binding) {
                //收到的tag是一个标签，在本例中是<span></span>
                //收到的binding是一个对象，包含对象名和传入的参数的数值
                //big函数的调用条件：
                // 1、当指令和元素以及标签成功绑定的时候会调用一次
                // 2、指令所在模板被重新解析时
                tag.innerText = binding.value * 10
                console.log(tag, binding)
            },
            fbind: {
                bind() {
                    //指令与元素成功绑定时被调用
                },
                inserted() {
                    //指令所在元素被插入页面的时候被调用
                },
                update() {
                    //指令所在模板被重新解析时调用
                }
            }

        }
    })
</script>

<script>
    //使用 watch 或 computed 以实现列表过滤
    /*new Vue({
        el: "#root",
        data: function() {
            return {
                persons: [{
                    id: '001',
                    name: "马冬梅",
                    age: 18,
                    sex: "女"
                }, {
                    id: '002',
                    name: "周冬雨",
                    age: 100,
                    sex: "女"
                }, {
                    id: '003',
                    name: "周杰伦",
                    age: 23,
                    sex: "男"
                }, {
                    id: '004',
                    name: "温兆伦",
                    age: 24,
                    sex: "男"
                }],
                keyword: "",
                fillpersons: []
            }
        },
        computed:{
            fillpersons(){
                return this.fillpersons = this.persons.filter((p) => {
                        return p.name.indexOf(value) !== -1
            }
        },
        watch: {
            keyword: {
                immediate: true,
                handler(value) {
                    //console.log(value)
                    this.fillpersons = this.persons.filter((p) => {
                        return p.name.indexOf(value) !== -1
                    })
                }
            }
        }
    })*/
</script>

<script>
    new Vue({
        el: "#root",
        data: function() {
            return {
                n: 0
            }
        },
        methods: {
            add() {
                this.n++;
            }
        },
        beforeCreate() {
            //在此时没有数据挂载,数据检测
            //vue实例中的变量，方法都没有办法查询到
            console.log("aaaa")
                //debugger;

        },
        created() {
            //此时Vue实例已经创建完成
            //可以访问Vue中的data和methods
            //但页面还没有开始渲染
            console.log("bbb")
        },
        beforeMount() {
            //挂载之前
            //此时页面已经渲染
            //但是网页上的Vue模板并没有被解析
            //此时所有对DOM的操作最终都是不奏效的
            console.log("before")
        },
        mount() {
            //页面已经挂在了
            //页面完成加载的时候调用

            //用于进行一些数据初始化
            //可以使用this.数据名使得声明的数据绑定到vm去
            //这样这些属性就可以在其他的声明函数里面被使用
        },
        beforeUpdate() {
            //此时数据已经更新了
            //但是页面还是旧的
            //页面和数据尚未保持同步
        },
        updated() {
            //此时页面数据是新的
            //页面也是新的
        },
        beforeDestroy() {
            //此时页面的dom还在
            //vm中的data、methods指令等都可还可以使用
            //但数据不会再触发更新

            //用于解绑事件和关闭一些功能
            //可以使用this.数据名使得再vm中的数据解除绑定
        },
        destroyed() {
            //此时vue实例完全被销毁
            //在页面留下的是一个静态dom
        },
    })
</script>

<body>
    <div id="root">
        <school></school>
        <student></student>
    </div>
</body>
<!--
    使用组件的三个步骤：
    1、定义组件（创建）
    2、在Vue中注册
    3、使用组件

    定义一个组件：
        使用Vue.extend({...一个对象})来创建，其中配置项和Vue几乎相同，唯一不同在：
        1、不用写el属性
        2、data必须使用函数
        3、需要使用template属性以注册结构

    组件中需要注意的地方：
        定义组件的时候可以使用简写
        即const a=Vue.extend({})与const a={}等价

-->
<script>
    //创建一个school组件
    const sc = Vue.extend({
        template: `
        <div>
            <h2>I am at{{place}}</h2>
            <h2>I study in{{schoolname}}</h2>
            <button></button>
        </div>
        `,
        //el: "#root",          //组件不能写el配置项，此处由vm处理
        data: function() { //组件中数据data一定要写成函数式
            return {
                schoolname: "youou",
                place: "hlakjsd",
            }
        }
    })

    const st = Vue.extend({
        template: `
        <div>
            <h2>hell0,{{studentname}}</h2>
            <h2>I am {{age}} year old now</h2>
        </div>
        `,
        data: function() {
            return {
                studentname: "hahah",
                address: "color"
            }
        }
    })



    //创建一个Vue实例
    new Vue({
        el: "#root",

        //注册组件（局部注册）
        components: {
            school: sc,
            student: st
        }
    })
</script>

下周：

继续学习Vue,了解一下大型项目如何构建，复习一下ajax

A822089447

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二周学习笔记（vue）

本周学习了的知识点：1、列表过滤与排序2、自定义指令3、过滤器4、自定义指令5、生命周期函数6、挂载流程7、非单文件组件的使用以下是一些代码的截图，因为太多了，我就只放一部分<script> new Vue({ el: "#root", data: function() { return { n: 1, } },
复制链接

扫一扫