Vue知识点总结

最新推荐文章于 2024-07-15 17:15:41 发布

@Ri

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量67

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2202_75830286/article/details/134296466

版权

一.Vue.js基础

1.基础结构

<body>
    <!-- 引入vue文件 -->
    <script src="./vue .js"></script>

    <!-- div盒子区域  -->
    <div id="app"></div>

    <!-- vue语法编写区域 --> 
    <script>
        new Vue ({
            el:'#app',
            data:{
                
            }
        })
    </script>
</body>

2.插值语法

插值语法可以将数据绑定到 DOM 元素上，实现动态更新视图的功能。当数据发生变化时，文本插值会自动更新。插值语法为双括号：{{ }}，如以下示例

3.属性绑定

属性绑定是指将一个属性（例如控件的位置、大小、文字内容等）与另一个对象的属性或数据源之间进行关联。当绑定的属性发生变化时，绑定的对象的属性也会随之发生变化。

使用@click为标签绑定事件，使用methods设置要触发的行为

二.计算属性和侦听器

1.计算属性

可以在里面写一些计算逻辑的属性，他不像是普通函数那样直接返回结果，而是经过一系列计算之后再返回结果。同时只要在它当中应用了data中的某个属性，当这个属性发生变化时，计算属性可以触摸到这个变法，并自动执行。使用：在computed对象中定义计算属性，在页面中使用{{方法名}}来显示计算的结果

<body>
    <!-- 
        // 1.每一个技术属性都包含一个getter函数与setter函数
        // 2.计算属性会默认使用getter函数，setter函数并不常见，所以一般计算属性getter和setter都不写
        // 3.getter函数是默认用法，setter函数不是默认用法。如果要使用setter函数，必须手动写出setter函数
        // 4.setter函数内的形参是你要修改的值
     -->
     <!-- 准备好一个容器 -->
     <div id="app">
        姓: <input type="text" v-model="lastName"> <br>
        名: <input type="text" v-model="firstName"> <br>
        全民: <span>{{fullName}}</span> <br>
        <button @click="bth">修改计算属性的值</button>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
     <script>
        var app = new Vue({
            el:"#app",
            data(){
                return {
                    firstName:'图图',
                    lastName:'胡',
                }
            },
            computed:{
                fullName:{
                    // get:获取值时触发
                    // 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    get(){
                        return this.firstName + '-' + this.lastName;
                    },
                    // set 设置值时触发
                    // 当计算属性被修改时，调用set
                    set(value){
                        console.log('set',value);
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            },
            methods:{
                bth(){
                    this.fullName = '胡-英俊'
                }
            }
        })
     </script>
</body>

<body>
    <div id="app">
        {{ firstName }}
        {{ lastName }}
        {{ fullName }}
        <button @click="btn">按钮</button>
        </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                firstName: "图图",
                lastName: "胡"
            },
            methods: {
                btn() {
                    this.firstName = "英俊";
                }
            },
            computed: {
                fullName() {
                    console.log('调用了计算属性');
                    return this.lastName + this.firstName;
                }
            }
        })
    </script>
</body>

2.侦听器

侦听器（listener）是一种用于监听某种事件发生的程序或组件。它可以被添加到应用程序中来捕捉特定类型的事件，如鼠标点击、键盘输入、窗口关闭等等。当该类型的事件发生时，侦听器会自动执行相应的操作。语法如下：

<body>
    <script>
        // [侦听器]
        // 作用:用来侦听数据有没有变化，一旦有变化就调用函数。
        // 语法: 在和data、methods这些平级的位置写一个watch
        new vue({
            el: '',
            data: {},
            methods: {

            },
            // 侦听器
            watch: {
                // 参数一: 改变后的值。
                // 参数二:改变前的值。
                // 要侦听的数据
                (newValue, oldValue) {

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

三.结构渲染

1.v-if

2.v-for与v-if的区别

四.样式绑定

1.内联绑定

<body>
    <script src="../../Vue.js"></script>
    <div id="app">
        <button @click="qh">切换</button>
        <div class="demo" v-bind:class="{size:isSize,color:isColor,active:isActive}">
        // vue.js样式绑定
        </div>
    </div>
    <script>
        const name = new Vue({
            el:'#app',
            data:{
                isSize:true,
                isColor:true,
                isActive:true
            },
            methods:{
                qh:function(){
                    this.isActive =! this.isActive;
                }
            }
        })
    </script>
</body>

2.非内联绑定

<body>
    <script src="../../vue.js"></script>
 
    <div id="app">
        <button @click="classobject.size=false">切换</button>
        <div v-bind:class="classobject">vue.js样式绑定 </div>
    </div>
    
    <script>
        const name = new Vue({
            el:'#app',
            data:{
             classobject:{
                size:true,
                color:true,
                active:true
                }
            },
           
        })
    </script>
</body>

五.事件处理和事件流

1.事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象的比喻成把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生，一直向上传播,直到document对象。因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是

button-div-body-html-document

2.事件捕捉

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到具体的元素。

3.stop修饰符

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
 
        .inner {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
 
<body>
    <script src="../vue.js"></script>
 
    <div id="app">
        <!-- caputer更改事件传送的顺序 -->
        <div class="outer" @click.capture="outer">
            // 外层盒子
            <!-- stop 阻止子时间默认的冒泡行为 -->
            <div class="inner" @click.stop="inner">
            // 内层盒子
            </div>
        </div>
    </div>
 
    <script>
        new Vue  ({
            el: '#app',
            methods: {
                outer() {
                    console.log("父节点");
                },
                inner() {
                    console.log("子节点");
                }
            }
        })
    </script>
</body>
 
</html>

4.self修饰符

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .two{
            width: 300px;
            height: 300px;
            background-color: darkblue;
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="https://www.4399.com/">4399</a>
        <div class="one"@click="one">
            1
            <!-- 目标事件为当前元素时触发 -->
            <div class="two"@click.self="two">
                2
            </div>
            <div class="three"@click="three">
                3
            </div>
        </div>
    </div>
</body>
</html>

六.表单绑定

1.表单绑定

2.事件修饰符

<body>
    <script src="../vue .js"></script>

    <div id="app">
        <!-- 修饰符.lazy(懒惰)不会即时的将输入框的内容存入data -->
        <input v-model.lazy="msg">
        <span>{{mag}}</span>
        <br>
        <!-- 修饰符.number 把string字符串转为number数字 -->
        <input type="number" v-model.number="age">
        <span>{{age}}</span>

        <!-- ,trim 屏蔽空格  -->
        <input type="text " v-model.trim="text">
        <span>一共{{text.length}}个字符</span>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'',
                age:'',
                text:''
            }
        })
    </script>
</body>

@Ri

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue知识点总结

同时只要在它当中应用了data中的某个属性，当这个属性发生变化时，计算属性可以触摸到这个变法，并自动执行。使用：在computed对象中定义计算属性，在页面中使用{{方法名}}来显示计算的结果。当该类型的事件发生时，侦听器会自动执行相应的操作。属性绑定是指将一个属性（例如控件的位置、大小、文字内容等）与另一个对象的属性或数据源之间进行关联。当绑定的属性发生变化时，绑定的对象的属性也会随之发生变化。插值语法为双括号：{{ }}，如以下示例。与事件冒泡相反，事件会从最外层开始发生，直到具体的元素。
复制链接

扫一扫