尚硅谷天禹老师 Vue学习笔记总计（自己复习用）

最新推荐文章于 2024-09-19 01:10:17 发布

zhengqiqiqinqin

最新推荐文章于 2024-09-19 01:10:17 发布

阅读量2.4k

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zhengqiqiqinqin/article/details/122953221

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

004 Vue环境搭建

如何关掉这2个提示？

关闭第一个提示，下载Vue的开发者工具

安装 — Vue.js

Vue开发者工具GitHub下载地址：

https://github.com/vuejs/vue-devtools#vue-devtools

或者直接在这个地方下载：

Vue开发者工具扩展链接：
【下载开发者工具】：
https://pan.baidu.com/s/1MtYvMPew4lb14piIrs9x6w
提取码：6666

阻止Vue在启动时生成生产提示

005 Vue 小案例

006 Vue 分析hello案例

008 Vue 数据绑定

Vue中有2种数据绑定的方式：

1.单向数据绑定：v-bind 数据只能从data流向页面

2.双向数据绑定：v-model 数据不仅能从data流向页面，也能从页面流向data

备注：

1.双向数据绑定一般都应用在表单磊元素上（如input ，select 等有value值的）

2. v-model:value 可以简写为v-model 因为v-model默认收集的就是value的值。

举例

HTML代码

    <div id="root">
        单项数据绑定v-bind：<input type="text" v-bind:value="name" ><br>
        双项数据绑定v-model：<input type="text" v-model:value="name" >
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"abc"
            }
        })
    </script>

对应的界面效果：

修改单向数据绑定v-bind所在的文本框中的值，Vue下的name的值不会改变，v-model里面的值也不会改变。

但是修改双向数据绑定v-bind 所在文本框中的值，Vue下name的值会跟着同步改变，而且会影响到v-bind中文本框的值（看如上代码v-bind也调用的是Vue中name值）

009 Vue el，data的2种写法

011 Object.defineProperty讲解

具体内容参考如下代码。有案例详解

<script type="text/javascript">
        let number=39
        let person={
            name:"zhangsan",
            sex:"男",
            // age:19
        }
        Object.defineProperty(person,"age",{
            // value:20,
            // enumerable:true //控制属性是否可以枚举，默认值是false
            // writable:true ,//控制属性是否可以被修改，默认值是false
            // configurable:true, //控制属性是否可以被删除，默认值是false
            get(){
                console.log("有人读取了age属性")
                return number
            },
            set(value){//如果不设置set函数，哪怕前台修改了person.age ，立马再去读取的时候，person.age的属性还是修改前的值
                console.log("有人修改了age属性，且值是",value)
                number=value
            }
        })
        console.log(person)

012 数据代理

数据代理：通过一个对象代理对另一个对象的属性的操作（读，写）

<script>
        let obj1={x:100}
        let obj2={y:100}
        Object.defineProperty(obj2,"x",{
            get(){
                return obj1.x
            },
            set(val){
                obj1.x = val
            }
        })

    </script>

014 事件处理（直接看代码）

事件的基本使用，总结：

1.使用v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数，不要用箭头函数，否则this就不是vm（如果是箭头函数，自身没有this，会往上一层找，一般会找到window）

4.methods中配置的参数，都是被Vue所管理的函数，this的指向是vm或者组件的实例对象

5.@click="demo" 和 @click="demo($event)" 效果一样，但是后者可以传参，$event是关键词写法

<head>    <script src="vue.js"></script> </head>
<div id="root">
  <!-- <button v-on:click="showInfo">点我提示信息</button> //v-on 用法 -->
  <!-- <button @click="showInfo">点我提示信息</button>  v-on 简写为@ 函数名不加括号，不传参可以不加括号,也可以加 -->
        <button @click="showInfo()">点我提示信息</button> <!-- v-on 简写为@ -->
        <button @click="showInfo2(233,$event)">点我提示信息-有传参</button> 
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
          },
            methods: {
                showInfo() {
                    alert("nihao~")
                },
                showInfo2(val,event) {
                    //console.log(event.target,innerText)
                    alert("参数是"+val)
                },
            },
        })
    </script>

015 事件修饰符

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="vue.js"></script>
    <style>
        *{
            padding: 10px;
            margin: 10px;
        }
        .demo1{
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!--
        Vue中的时间修饰符：
        1.prevent：阻止默认事件（常用）
        2.stop：阻止事件冒泡（常用）
        3.once：事件只触发一次（常用）
        4.capture：使用事件的捕获模式。
        （正常情况：事件先捕获，然后冒泡。事件的处理是在冒泡阶段处理的。
        如果加了capture，时间的处理在捕获阶段就开始处理）
        5.self:只有event.target 是当前操作的元素时才触发事件
        6.passive：事件的默认行为立即执行，无须等待事件回调完毕再执行。
    -->

    <div id="root" >
        <!--Vue里面阻止默认行为 @click.prevent-->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

        <!--Vue里面阻止事件冒泡 意思点击button 也会把事件冒泡到父级元素-->
        <div  @click="showInfo" class="demo1">
            <button @click.stop="showInfo">阻止冒泡</button>
        </div>

        <!--事件只触发一次-->
        <button @click.once="showInfo">once让事件只触发一次</button>
        <!--事件先捕获，然后冒泡。事件的处理是在冒泡阶段处理的。capture-->
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
            },
            methods:{
                showInfo(){
                    //showInfo(e) e.preventDefault()//原生的这个函数也可以用来阻止默认行为
                    //showInfo(e) e.stopPropagation() //原生的这个函数也可以用来阻止冒泡
                    alert("阻止行为！")
                }
          }
        })
    </script>
</body>
</html>