vue——事件、样式绑定&条件、循环渲染&MVC和MVVM的区别

最新推荐文章于 2024-04-01 01:20:41 发布

哈哈ha~

最新推荐文章于 2024-04-01 01:20:41 发布

阅读量166

点赞数 1

分类专栏： vue.js 文章标签： vue.js 前端 javascript 数据绑定事件绑定

本文链接：https://blog.csdn.net/qq_56668869/article/details/126601714

版权

vue.js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、事件绑定

(一)方法

在methods中写方法,供事件或别的方法内部调用

方法的写法：

所有的函数写法都可以：如下

  function fn4() {console.log("fn4")}
  var fn5 = () => {console.log("fn5")}
  var fn6 = function () {console.log("fn6")}

        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                fn: function () {
                    console.log(1)
                },
                fm: () => {
                    console.log("鼠标移入 事件触发了")
                },
                fb() {
                    fn(),
                    fm()
                    //绑定一个事件执行两个事件
                },
                fn4,
                fn5,
                fn6
            },
        })

(二)事件绑定

v-on:event 和 @ 都是绑定事件的指令
指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加

 <div id="eg1">
        <h1> {{title}}</h1>
        <button v-on:click="fn()">change</button><br><br>
        <!-- <button v-on:click="fn">方法不带小括号</button><br> -->
        <button @click="fm1" @mouseenter="fm">hover打印-onclick弹窗</button><br><br>
        <button @click="fb">一个事件绑多个程序(change+onclick弹窗)</button>
    </div>
    <hr>

    <script>
        var vm = new Vue({
            //传入的data和method都被vm对象(this)劫持了 this===vm
            el: "#eg1",
            data: {
                title: "方法"
            },
            methods: {
                fn: function () {//es5
                    this.title = "事件"
                },
                fm: () => { //es6箭头函数
                    console.log("鼠标移入 事件触发了")
                },
                fm1: () => {
                    alert("弹窗啦")
                },
                fb() {//es6的方法
                    //绑定一个事件执行两个事件
                    this.fm1()
                    this.fn()
                },
            },
        })
    </script>

结果显示：

(三)事件修饰符

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

.prevent 阻止默认事件

.capture 添加事件侦听器时让事件在捕获阶段触发

.self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素

.once 事件只触发一次,触发完之后,事件就解绑

多修饰符可以一起使用:直接连点

    <div id="eg3">
        <!-- 阻止事件冒泡 -->
        <div class="box1" @click.capture.once="box1">1
            <div class="box2" @click.self.stop="box2">2
                <div class="box3" @click.stop="box3">3</div>
            </div>
        </div>
        <!-- 阻止a标签的默认事件 -->
        <a @click.prevent="fa" href="http://www.baidu.com">点击弹窗且不跳转百度</a>
    </div>

    <script>
        new Vue({
            el: "#eg3",
            data: {

            },
            methods: {
                box1() {
                    console.log(1)
                },
                box2() {
                    console.log(2)
                },
                box3() {
                    console.log(3)
                },
                fa(){
                    alert("阻止a标签的默认事件--跳转")
                }
            }
        })
    </script>

结果显示：

二、样式绑定

(一)style绑定

<div id="eg1">
        <button @click="btnclicked">show/hidden</button>
        <div :style="{display:n,color:color}">{{msg}}</div>
        <div :style="obj">红色字体 30号字</div>
        <div :style="[a,b,{color:'lightblue',background:'pink'}]">{{msg1}}</div>
</div>
    <script>
        new Vue({
            el: "#eg1",
            data: {
                msg: "hello",
                msg1:"数组可以将多个样式绑定到同一对象上",
                flag: true,
                n: "block",
                color: "blue",
                obj: {
                    color: "red",
                    fontSize: "30px"
                },
                a: {
                    fontSize: "30px"
                },
                b: {
                    width: "200px",
                    height: "200px",
                },
            },
            methods: {
                btnclicked() {
                    this.flag = !this.flag
                    if (this.flag) {
                        //显示
                        this.n = "block"
                        this.color = "pink"
                    } else {
                        //隐藏
                        this.n = "none"
                    }
                }
            },
        })
    </script>

结果显示：

(二)class绑定

 <div id="eg3">
        <button @click="btnclicked">{{title}}</button>
        <div :class="['mainbox',mode]">
            <p>切换阅读时的背景颜色</p>
            <p>字体颜色</p>
        </div>
</div>
<hr>

    <script>
        new Vue({
            el: "#eg3",
            data: {
                title: "护眼模式",
                flag: true,
                mode: "huyan",
            },
            methods: {
                btnclicked() {
                    //开关思想
                    this.flag = !this.flag
                    if (this.flag) {
                        this.title = "护眼模式",
                            this.mode = "huyan"

                    } else {
                        this.title = "夜间模式",
                            this.mode = "black"
                    }
                }
            },
        })
    </script>

结果显示：

三、条件渲染

在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果
使用的变量为true就显示,false就隐藏

v-if：删除节点(移除元素)，移除的元素不会创建到渲染树中，不会占用内存中

v-show：操作css的display:none来达到操作元素显示和隐藏的效果

根据它们底层的设计不一样有各自的使用场景

v-if具有较高的切换（渲染）消耗,常常用在不常切换的模块
v-show具有较高的性能（内存）消耗,常常用在频繁切换的模块中如tabbar

 <div id="eg1">
        <button @click="change">开关</button>
        <div v-if="condition">v-if的开关显示效果</div>
        <div v-show="condition">v-show的开关显示效果</div>
 </div>
   
    <script>
        new Vue({
            el: "#eg1",
            data: {
                //condition可以是任意表达式和值 ==> if(condition) 为false时解绑
                condition: false,
            },
            methods: {
                change() {
                    this.condition = !this.condition
                }
            },
        })
    </script>

v-if结果显示：

v-show结果显示：

四、循环渲染

v-for
v-for:所在的元素及其子元素都会被克隆（克隆次数为循环次数）

（1）第一层

<div id="eg1">
        <span v-for="(el,index) in arr">{{el}}</span>
        <hr>
        <div v-for="(el,index) in json">
            <span>{{el.name}}</span>
            <span>{{el.age}}</span>
        </div>
        <hr>
        <div v-for="(el,index) in qiantao">
            <h1>{{el.city}}</h1>
            <div v-for="el2 in el.area">{{el2}}</div>
        </div>
        <hr>
</div>

    <script>
        new Vue({
            el: "#eg1",
            data: {
                arr: ["hello", "!", "vue", ".", "js"],
                json: [{
                    name: "haha",
                    age: 21
                }, {
                    name: "xixi",
                    age: 22
                }, {
                    name: "yaya",
                    age: 23
                }, ],
                qiantao: [{
                    city: "重庆",
                    area: ["长寿", "江北"]
                }, {
                    city: "成都",
                    area: ["金牛", "锦江"]
                }, {
                    city: "昆明",
                    area: []
                }, ]
            },
        })
    </script>

结果显示：

（2）第二层

在vue2.0中，当v-if 和v-for 出现在一个标签时 v-for 的优先级更高

解决：1.写成嵌套关系把v-for写到v-if中会多一个空元素（v-if所在的）

2.“冰元素” template标签

在vue3.0中，不允许写到一排会直接报错

 <div id="eg3">
        <div v-for="(el,index) in json">
            <template v-if="el.age>21">
                <span>{{el.name}}</span>
            </template>
        </div> 
    </div>

    <script>
        new Vue({
            el: "#eg3",
            data: {
                json: [{
                    name: "haha",
                    age: 21
                }, {
                    name: "xixi",
                    age: 22
                }, {
                    name: "yaya",
                    age: 23
                }, ]
            },
        })
    </script>

结果显示：

五、MVC和MVVM(面试)

MVC与MVVM之间的区别

（1）MVC

在实际应用开发场景中，开发者常用的一种设计模式是MVC（eg：node（后端）中的MVC设计模式）：

M（Model）：数据模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据。
V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的。
C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

（2）MVVM

M（Model）：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
V（View）：视图层。就是展现出来的用户界面。
VM（ViewModel）：视图模型层。就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。