尚硅谷vue学习p1-51

莫等闲白了少年头

已于 2023-05-14 23:27:38 修改

阅读量194

点赞数

分类专栏：笔记文章标签：学习 node.js npm

于 2022-05-25 01:21:18 首次发布

本文链接：https://blog.csdn.net/weixin_44229645/article/details/124957590

版权

笔记专栏收录该内容

68 篇文章 2 订阅

订阅专栏

p1 课程简介

在这里插入图片描述

ｐ2 vue简介

在这里插入图片描述

p03 vue官网使用指南

p04 搭建vue开发环境

下载vscode
在这里插入图片描述
下载vue.js

安装dev-tools

p05 HELLO小案例

安装插件
在这里插入图片描述
浏览器打开

有个报错找不到图标

因为插件会开启一个服务器,需要在目录里面添加图标

添加一个图标

插值表达式

在这里插入图片描述

p06 分析hello案例

在这里插入图片描述

p07模版语法

在这里插入图片描述

指令语法

在这里插入图片描述

p08 数据绑定

v-bind 单向绑定 v-model双向绑定
在这里插入图片描述

p09 el与data的两种写法

在这里插入图片描述

p10 理解 mvvm

在这里插入图片描述

p11 Object.defineProperty

给person对象定义age属性,并且把age和number关联起来
在这里插入图片描述

p12 理解数据代理

在这里插入图片描述

p13 vue中的数据代理

在这里插入图片描述
_data和data其实是相同的

在这里插入图片描述

重要

在这里插入图片描述

p14 事件处理

在这里插入图片描述

p15 事件修饰符

在这里插入图片描述

p16 键盘事件

在这里插入图片描述

p17 事件总结

p18姓名案例

可以使用插值表达式,也可以使用下面这种方法
在这里插入图片描述

p19计算属性

在这里插入图片描述

<body>

    <div id="root">
        姓:<input type="text" v-model="firstname">
        <br>
        名:<input type="text" v-model="lastname">
        <br>
        全名:<span>{{fullName}}</span>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",  //第一种挂载容器方式
            data: {
                firstname: '张',
                lastname: '三',
                age:'12'
            },
            computed: {
                fullName: {
                    //获取fullName的值的时候,会自动调用get方法
                    get() {
                        console.log('get方法调用了')
                        return this.firstname + '-' + this.lastname
                    },
                    //当修改fullName会自动调用set这个方法
                    set(param) {
                        console.log('set方法调用了')
                        const arr = param.split('-')
                        this.firstname = arr[0]
                        this.lastname = arr[1]
                    }
                }
            }


        })
    </script>
    </head>
</body>

p20 计算属性简写

在这里插入图片描述

p21 天气案例

在这里插入图片描述

p22 监视属性

在这里插入图片描述

在这里插入图片描述
另外一种写法

p23深度监视

在这里插入图片描述

<body>

    <div id="root">
       <h2>今天天气很{{info}}</h2>
       <button @click="changeWeather">切换天气</button>
       <button @click="numbers.a++">a++</button>
       <button @click="numbers.b++">b++</button>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",  //第一种挂载容器方式
            data: {
                isHot:true,
                numbers:{
                    a:1,
                    b:2
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            computed: {
                info:{
                    get(){
                        return this.isHot?'炎热':'凉爽'
                    }
                }
            },
            //监视isHot属性
            watch:{
                isHot:{
                    immediate:true,//初始化的时候 调用一下
                    //isHot发生变化时候,方法被调用
                    handler(newVal,oldVal){
                        console.log('isHot被修改了',newVal,oldVal)
                    }
                },
                //监视a属性
                'numbers.a':{
                    handler(newVal,oldVal){
                        console.log('number.a被修改了',newVal,oldVal)
                    }
                },
                //深度监视numbers整体
                numbers:{
                    deep:true,
                    handler(newVal,oldVal){
                        console.log('number被修改了',newVal,oldVal)
                    }
                }
            }


        })
    </script>
    </head>
</body>

p24 监视的简写形式

简写前提:除了handler方法没有其他结构
在这里插入图片描述

p25 watch对比computed

在这里插入图片描述

p26 绑定class样式

在这里插入图片描述

在这里插入图片描述

其他绑定样式的方法

p27 绑定style样式

在这里插入图片描述

p28条件渲染

在这里插入图片描述

p29 列表渲染

在这里插入图片描述

p30 key作用与原理

遍历时候,key属性尽量使用id而不是index
在这里插入图片描述

p31 列表过滤

实现模糊查询的效果
在这里插入图片描述

监视属性实现
在这里插入图片描述
计算属性实现

<div id="root">
        <h2>人员列表</h2>
        <!-- //遍历数组 -->
        <!-- key是绑定一个唯一属性 -->
        <input type="text" v-model="keyword">
        <ul>
            <li v-for="(p,index) in filerPersons" :key="p.id">
                {{p.id}}---{{p.name}}---{{index}}
            </li>
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",
            data: {
                keyword:"",
                persons: [
                    { id: "001", name: "马冬梅", age: "18" },
                    { id: "002", name: "周冬雨", age: "19" },
                    { id: "003", name: "周杰伦", age: "20" }
                ],
            },
            computed: {
                filerPersons(){
                    return this.persons.filter((p)=>{
                       return p.name.indexOf(this.keyword)!==-1
                    })
                }
            }
        })
    </script>

p32 列表排序

在这里插入图片描述

p33 更新时的一个问题

在这里插入图片描述

p34 vue监测数据的原理-对象

简单手写模拟vue
在这里插入图片描述

p35 Vue.set()方法

场景:需要添加一个不存在的属性
在这里插入图片描述

另外一种语法

缩写
nimg.cn/7aba1812f1e540aab7141b9d336b4331.png)

在这里插入图片描述
但是.这个set方法有个限制,不能直接在data上添加属性,而是要在data下的属性内部添加.

p36 vue监测数据的原理-数组

改变数组中的某个元素
vue里面的数组的push等方法并不是原生的数组push,而是包装过的

往数组头部添加元素
在这里插入图片描述

在这里插入图片描述

也可以直接使用vue的set方法
在这里插入图片描述

p37 总结 vue监视数据

不能直接修改数组的某一个元素,但是可以修改数组某个元素的属性,
原因:从下图可以看出,数组的0索引元素这个对象的属性是有get和set方法的,可以直接修改,但是不能直接替换0索引位置元素(因为数组元素本省没有get和set方法,而数组里元素对象的属性有get和set方法,这样可以感知到对象属性发生了变化)
在这里插入图片描述
不支持**this.student.friend[0]={}**这种语法,但是支持下面这种修改内部属性

总结: