Vue——学习笔记整理(继续整理中)

这篇博客详细整理了Vue的学习笔记,涵盖了从Vue2的基础到Vue3的Composition API,包括Vue2的Vue实例创建、数据绑定、事件处理、计算属性、监听属性、指令使用等内容,以及Vue3的setup函数、ref、reactive、Vue3响应式原理和生命周期等知识点。内容丰富,适合Vue初学者和进阶学习者阅读。
摘要由CSDN通过智能技术生成

目录

一、初始VUE

1.Vue2基础

2.本地应用

3.网络应用

3.1 axios的格式:

3.2 axios网络请求库

3.3 axios + vue

二、笔记——VUE2

01.认识Vue

02.Vue两大类模板语法

03.Vue数据绑定的2种方式

04.el与data的2种写法

05.MVVM模型

06.数据代理

06.1 Object.defineProperty方法

06.2 理解数据代理

06.3. Vue中的数据代理

07.事件处理

07.1 事件的基本使用

07.2 事件修饰符

07.3 键盘事件

08.计算属性

08.1 姓名案例——插值语法

08.2 姓名案例-methods

08.3 姓名案例-计算属性

08.4 姓名案例-计算属性简写

09.监视属性

09.1 天气案例

09.2 天气案例——监视属性

09.3 天气案例——深度监视属性

09.4 天气案例——监视属性简写

09.5 姓名案例——watch实现

10.绑定样式

10.1 绑定样式——绑定class样式(3种)

10.2 绑定样式——绑定style样式

11.条件渲染

12.列表渲染

12.1 基本列表

12.2 key的原理

12.3 列表过滤

12.4 列表排序

12.5 更新时的一个问题

12.6 Vue监测数据的原理—对象

12.7 模拟一个数据监测

12.8 Vue.set的使用

12.9 Vue监测数据的原理—数组

12.10 Vue监测数据总结

13.收集表单数据

14.过滤器(filter)

15.内置指令

15.1 v-text指令

15.2 v-html指令

15.3 v-cloak指令(没有值)

15.4 v-once指令

15.5 v-pre指令

16.自定义指令

16.1 自定义指令总结

17.生命周期

17.1 引出生命周期

--------------------------------------------------------继续整理ing

65.脚手架文件结构:

66.关于不同版本的Vue:

67.vue.config.js配置文件:

68.ref属性

69.配置项props

70.mixin(混入)

71.插件

71.scoped样式

72.组件化编码流程(通用)

73.总结TodoList案例

三、笔记——VUE3


一、初始VUE

黑马vue入门

1.Vue2基础

  • 简介:vue是JS框架;简化了DOM操作;可响应式数据驱动。
  • 第一个vue程序:导入开发版本的vue.js;创建vue实例,设置el属性和data属性;用模板语法{ {......}}
  • el挂载点:设置Vue实例挂载(管理)元素;管理el选项命中的元素及内部的后代元素;可使用其他选择器(但是还是建议使用ID选择器);可是使用其他双标签(但除了HTML、BODY)
  • date数据对象:vue的数据定义在data中;data可写复杂类型的数据;遵守js语法即可。

2.本地应用

《小黑记事本》

①.新增:生成列表结构(用v-for数组);  获取用户输入(v-model);  回车新增数据(v-on.enter)

②.删除:数据改变,绑定的元素也同步改变;事件的自定义参数;splice方法的作用

③.统计:基于数据的开发方式(v-text、length);v-text指令的作用

④.清空:点击清空所有信息(v-on、v-for(可省))

⑤.隐藏:没有数据时隐藏元素(v-show)

创建vue的三个要素:el(挂载点)、data(数据)、methods(方法)

  • (1)内容绑定,事件绑定
v-text 作用:设置标签的内容(textContent)。使用差值表达式{ {...}}可替换指定内容
v-html 作用:设置标签的innerHTML。内容中有html结构会被解析为标签;无论v-text指令是什么内容,都只会解析为文本。
v-on(基础)

作用:元素绑定事件。指令可简写为@事件名不需写on;绑定的方法定义在methods属性中。方法内部是通过this关键字访问定义在data中的数据

补:事件绑定方法写成函数调用的形式,可传入自定义参数。定义方法时,需定义形参来接收传入的实参,事件后面跟上.修饰符可对事件进行限制。(事件修饰符有很多种,eg:.enter可限制触发的按键为回车)

  • (2)显示切换,属性绑定
v-show

作用:真假切换元素的显示状态。

原理:修改元素display,实现显示和隐藏。

内容最后都会解析为布尔值(true为显示,false为隐藏)

v-if

作用:真假切换元素的显示状态。

本质:操作dom元素来切换显示状态(与v-show的区别)

(true,元素存在dom树中;false,元素从dom树中移除)

v-bind

(单向绑定)

格式为v-bind:属性名=表达式,简写为:属性名=表达式

作用:为元素绑定属性,eg:src

需动态增删class时,建议用对象的方式。

  • (3)列表循环,表单元素绑定
v-for

作用:根据数据生成列表结构

语法:(item,index) in 数据

经常和数组一起使用,也可结合其他指令一起使用。数组长度更新会同步到页面上(是响应式的)

v-model

(双向绑定,用于表单元素)

作用:便捷设置和获取表单元素的值。

绑定的数据会和表单元素值相关联。

绑定的数据    <——>(双向绑定)    表单元素的值

3.网络应用

和本地应用的区别:改变了数据来源。

3.1 axios的格式:

①.axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})

②.axios.post(地址,{key=value,key2=value2}.then(function(response){},function(err){})

3.2 axios网络请求库

axios中文网|axios API 中文文档 | axios

  1. 需要先导入才能使用。
  2. get或用post即可发送对应的请求。
  3. then方法中,回调函数会在请求成功或失败时触发。通过回调函数的形参可获取响应内容,或错误信息。

3.3 axios + vue

可以把this保存起来,回调函数中直接使用保存的this即可。

二、笔记——VUE2

尚硅谷vue2+vue3全家桶

01.认识Vue

        1.让Vue工作,必须创建一个Vue实例,且传入一个配置对象;

        2.root容器里的代码依然符合html规范,混入了特殊的Vue语法而已;

        3.root容器里的代码被称为【Vue模板】

        4.Vue实例和容器是一一对应的;

        5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;

        6.{ {xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;

        7.一旦data中的数据发生改变,则页面中用到该数据的地方也会自动更新。

    注意区分:js表达式 和 js代码(语句)

            (1).js表达式:一个表达式会生成一个值,可放在任何一个需要值的地方;

         eg:(1).a

                 (2).a+b

                 (3).demo(1)

                 (4).x === y ? 'a' : 'b'

           (2).js代码(语句)

                (1).if(){}

                (2).for(){}

01.1 Vue的特点:

1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 可以引入其它第三方库开发项目

01.2:Vue与其它 JS 框架的关联

1. 借鉴 Angular 的 模板 数据绑定 技术
2. 借鉴 React 的 组件化 虚拟 DOM 技术

01.3 Vue 周边库

1. vue-cli: vue 脚手架
2. vue-resource
3. axios
4. vue-router: 路由
5. vuex: 状态管理
6. element-ui: 基于 vue 的 UI 组件库(PC 端)

01.4 Vue的官方文档

Vue.js 介绍 — Vue.js 中文文档

02.Vue两大类模板语法

    (1).插值语法:

        功能:用于解析标签体内容。

        写法:{ {xxx}}       其中xxx是js表达式,可直接读取到data中的所有属性。

    (2).指令语法:

        功能:用于解析标签(包括:标签属性、标签体内容、绑定事件......)。

        eg:v-bind:href="xxx"  或简写为   :href="xxx"  。其中xxx同样要写js表达式

        注:Vue中有很多的指令,且形式都是:v-???? 

03.Vue数据绑定的2种方式

  •     1.单向绑定(v-bind):

        数据只能从data流向页面

  •     2.双向绑定(v-model):

        数据既可以从data流向页面,也可以从页面流向data

        注:①.双向绑定一般都用在表单类元素上(eg:input、select等)

               ②.v-model:value   因为v-model默认收集value值,所以可简写为v-model  ,

04.el与data的2种写法

        (1).el的2种写法:

        ①.new Vue时,配置的el属性

new Vue({
    el: '#root',//el的第(1)种写法
    data: {
    name: 'jack',
    }
})

        ②.先创建Vue实例,后再通过vm.$mount('#root')指定el的值

const v = new Vue({
    data: {
        name: 'jack',
    }
})
console.log(v)
v.$mount('#root') //el的第(2)种写法

        (2).data的2种写法:

        ①.对象式:new Vue时,配置的data{ A : B }

new Vue({
    el: '#root',
    data: { //data的第(1)种写法:对象式
    name: 'jack',
    }
})

        ②.函数式(Vue所管理的函数)

//data的第(2)种写法:函数式(vue所管理的函数)
new Vue({
    data() {
        console.log('@@@', this) //此处的this是Vue实例对象
        return {
            name: 'hello'
        }
    }
})

        注:Vue所管理的函数,一定不要写箭头函数。若写了箭头函数,则this不再是Vue实例,而是window的实例.

        如何选择:目前哪种写法都可;之后学习到组件时,复用的data必须用函数式,否则会报错。

05.MVVM模型

        (1).M:模型(Model):data中的数据

        (2).V:视图(View):模板代码

        (3).VM:视图模型(ViewModel):Vue实例( eg:new Vue({...}) )

    观察:

        ·data中所有的属性,都出现在了vm身上。

        ·vm身上所有的属性以及Vue原型上所有属性,在Vue模板中都可以直接使用。 

06.数据代理

06.1 Object.defineProperty方法

语法:Object.defineProperty(obj, prop, descriptor)

参数:obj要定义属性的对象。prop要定义或修改的属性的名称。descriptor要定义或修改的属性描述符。

返回值:被传递给函数的对象。

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
</script> 
<script>
    let number = 18
    let person = {
        name: 'jack',
        sex: 'man',
    }

    Object.defineProperty(person, 'age', {
        /*   value: 18,
        enumerable: true, //enumerable控制属性是否可以枚举,默认值是false
        writable: true, //writable控制属性是否可以被修改,默认值是false
        configurable: true, //configurable控制属性是否可以被删除,默认值是false
        */
    
    //当读取person的age属性时,get函数(即:getter)就会被调用,且返回值是age的值
        get() {
            console.log('有人读取了age属性')
            return number
        },

    //当修改person的age属性时,set函数(即:setter)就会被调用,且会收到修改age的具体值
        set(value) {
            console.log('有人修改了age属性,且值为:', value)
            number = value
        },
    })

    console.log(person)
</script>

06.2 理解数据代理

数据代理:通过一个对象对另一个对象中属性的操作(读/写

    <script type="text/javascript">
        let obj = {
            x: 100
        }
        let obj2 = {
            y: 100
        }
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            },
        })
    </script>

06.3. Vue中的数据代理

Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)。

        优点:更加方便的操作data中的数据。

基本原理

        通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。 

<body>
    <div id="root">
        <h2>名字:{
  {_data.name}}</h2>
        <h2>地址:{
  {address}}</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    </script>
</body>
<script>
    /* 此时可用数据代理。通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。 
        let data = {
                name: 'jack',
                address: 'beijing'
            } */
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'jack',
            address: 'beijing'
        }
    })
</script>

07.事件处理

07.1 事件的基本使用

    事件基本使用:

  1. 绑定事件用v-on:xxx 或 @xxx  其中xxx为事件者
  2. 事件的回调需要配置在methods对象中,最终会在vm上
  3. methods中配置的函数,不要用箭头函数!否则this就不是vm
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象
  5. @click="demo" 和 @click="demo($event)"  效果一样,但后者可以传参!
<body>
    <div id="root">
        <h2>welcome to {
  {name}}</h2>
        <button @click="show1(666,$event)">点击提示信息1</button>
        <!-- 若需要传参,则加括号(),在括号中输入参数 -->
        <button @click="show2">点击提示信息2</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    </script>
    <script>
        // vm为实例对象
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'GX'
            },
            methods: {
                show1(event, number) {
                    console.log(event, number),
                        alert("one_Hello!")
                },
                show2(number) {
                    alert("two_Hello!")
                },

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

07.2 事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用)
  2. stop:阻止事件冒泡(常用)
  3. once:事件只触发一次(常用)
  4. capture:使用事件的捕获模式,(只有捕获,阻止了冒泡事件的发生)
  5. self:只有event.target是当前操作的元素才是触发事件,在一定程度上阻止了冒泡
  6. passive:事件的默认行为立即执行,无序等待事件回调执行完毕     
    • 滚动事件: ①.scroll 鼠标滚轮、滚动条       ②.wheel 鼠标滚轮 
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>Welcome to {
  {name}}</h2>

        <!-- 1.prevent:阻止默认事件(常用) -->
        <a href="https:baidu.com" @click="show">点击一下会有弹出框,但是不会跳转噢!</a>

        <!-- 2.stop:阻止事件冒泡(常用) -->
        <div class="demo1" @click='show'>
            <button @click.stop='show'>按钮2</button>
        </div>

        <!-- 3.once:事件只触发一次(常用) -->
        <div>
            <button @click.once='show'>按钮3</button>
        </div>

        <!-- 4.capture:使用事件的捕获模式 (只有捕获,阻止了冒泡事件的发生)-->
        <div class="box1" @click.capture="showmsg(1)">
            div1
            <div class="box2" @click="showmsg(2)">
                div2
            </div>
        </div>

        <!-- 5.self:只有event.target是当前操作的元素才是触发事件 -->
        <!-- 在一定程度上阻止了冒泡 -->
        <div class="demo1" @click.self='show'>
            <button @click='show'>按钮5</button>
        </div>

        <!-- 6.passive:事件的默认行为立即执行,无序等待事件回调执行完毕 -->-->
        <!-- 
            滚动事件:  ①.scroll 鼠标滚轮、滚动条      
                        ②.wheel 鼠标滚轮 
        -->
        <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul @wheel="demo1" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    </script>

    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'NN'
            },
            methods: {
                show(e) {
                    alert("Hello!")
                },
                showmsg(msg) {
                    console.log(msg)
                },
                demo() {
                    // for (let i = 0; i < 10000; i++) {
                    //     console.log('@')
                    // }
                    // console.log('tried')
                    console.log('scroll')
                },
                demo1() {
                    console.log('wheel');
                }
            },


        })
    </script>
</body>

07.3 键盘事件

  • 1.Vue中常用的按键别名:

回车 

——> enter
删除  ——> delete(捕获“删除”和“退格”键)
退出  ——> esc
空格  ——> space
换行 ——> tab (特殊按键之一,必须配合keydown使用)
上   ——> up
下   ——> down
左  ——> left
右  ——> right
  • 2.系统修饰键(特殊按键):ctrl、alt、shift、meta

    (1).配合keyup使用时:按下修饰键的同时,再按下其他键,随后释放其他键,事件才能被触发

    (2).配合keydown使用时:正常触发事件。

  • 3.Vue未提供别名的按键,可使用按键原始的key值去确定,但注意要转为kebab-case这样子的命名(A-B短横线命名)
  • 4.也可使用keyCode去指定具体的按键(eg:@keyup.13="show")【不推荐使用】
  • 5.定制按键别名的方法:    Vue.config.keyCodes.自定义键名 = 键码

08.计算属性

08.1 姓名案例——插值语法

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓:<input type="text" v-model="fname"><br/> 名:
        <input type="text" v-model="lname"><br/> 
        全名: <span>{
  {fname.slice(0,2)}}-{
  {lname}}<span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    </script>

    <script>
        new Vue({
            el: '#root',
            data: {
                fname: "张",
                lname: "三",
            },
        })
    </script>
</body>

08.2 姓名案例-methods

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓:<input type="text" v-model="fname"><br/> 
        名:<input type="text" v-model="lname"><br/> 
        全名:<span>{
  {fullname()}}<span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    </script>

    <script>
        new Vue({
            el: '#root',
            data: {
                fname: "张",
                lname: "三",
            },
            methods: {
                fullname(){
                    // return '小猪佩奇'
                    console.log('@',this.fname)
                    console.log('@',this.lname)
                    return this.fname + '-' +this.lname
                }
            }
        })
    </script>
</body>

08.3 姓名案例-计算属性

    计算属性:

        1.定义:要用的属性不存在,通过已有的属性计算得来的。

        2.原理:借助了Object.defineproperty方法提供的getter和setter

        3.get函数什么时候执行?

            (1).初次读取时会执行一次(因为有缓存机制,所以再读取就不调用。)

            (2).当依赖的数据发生改变时会被再次调用

        4.优势:与methods实现相比,内部有缓存机制(可复用),效率更高,调试方便

        5.注:

            (1).计算属性最终会出现在vm上,直接读取使用即可。

            (2).若计算属性要被修改,则必须写set函数去响应修改,且set中要引起计算时的数据发生改变。 

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓:<input type="text" v-model="fname"><br/> 
        名:<input type="text" v-model="lname"><br/> 
        全名:<span>{
  {fullName}}<span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    </script>

    <script>
        const vm=new Vue({
            el: '#root',
            data: {
                fname: "张",
                lname: "三",
            },
            computed: {
                fullName:{
                //get的作用? 当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
                //get什么时候被调用? 1.初次读取时。因为有缓存,所以再读取就不调用。  2.所依赖的数据发生变化时。
                    get(){
                        console.log('get被调用了',this)//此处的this是vm
                        console.log('fname')
                    return this.fname + '-' +this.lname
                    },

                    //
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值