Vue基础知识点

最新推荐文章于 2024-07-14 08:31:17 发布

鲸是鲸鱼的鲸

最新推荐文章于 2024-07-14 08:31:17 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

文章标签： vue基础知识点

本文链接：https://blog.youkuaiyun.com/weixin_44195250/article/details/97233822

Vue 专栏收录该内容

53 篇文章

订阅专栏

后续有更新 Vue基础知识点n
https://blog.youkuaiyun.com/weixin_44195250/article/details/97239922

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
       <div id="app">
           {{msg}}
       </div>

   
</body>
</html>
<script src="vue.js"></script>
<script>
   let vm = new Vue({
       //代表Vue作用的范围
        el:"#app",
        //当前Vue所需要的一些属性。   当前组件所需要的一些状态
        data:{
            msg:1910
        }
   })
</script>

br
v-text与v-html区别

   v-html:值为data中的数据
            1、解析data中的数据 
            2、可以解析JS的表达式 

        v-html的底层原理是应用的innerhtml
		 v-text的底层原理是应用的innerText
        v-html与v-text其实是一样的  只不过v-html可以解析html标签
       
    v-text简写：{{}}


<h2 v-text="p"></h2>
        <h2 v-html="p"></h2>

在这里插入图片描述

在这里插入图片描述
v-if

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
                <h2 v-show="flag">{{msg}}</h2>
                <h2 v-if="flag">{{msg}}</h2>
                <hr>
    
            <div v-if="num==1">111</div>
            <div v-else-if="num==2">222</div>
            <div v-else>333</div>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"1910",
            flag:true,
            num:10
        }
    })

    /*
        v-show:显示/隐藏
            当值为true的时候为显示 false的时候为隐藏

            底层原理是操作元素的display属性

        v-if:显示/隐藏
            当值为true的时候为显示 false的时候为隐藏

            底层是操控元素的创建/销毁


        配合v-if使用的指令
            v-else
            v-else-if
            当使用v-else / v-else-if的时候必须要使用v-if



        面试题：
            v-if与v-show的区别？以及使用的场景？
            v-show底层是操作元素的display属性,v-if底层是操控元素的创建/销毁

            场景：
                v-if：场景--》权限校验的时候
                v-show:展示页面 类似于一些选项卡等
    
    */


</script>

v-bind 简写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-bind:id="myId" :title="name" :class="myclass3" :style="myStyle"></div>
        <img v-bind:src="mySrc"  :alt="des">
        <a :href="link">百度</a>
        <input :type="type">
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            myId:"box",
            mySrc:"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
            link:"http://www.baidu.com",
            name:"1910",
            type:'password',
            des:"百度",
            myclass:"box box1",
            myclass2:["box111","box222"],
            myclass3:{
                boxA:true,
                boxB:false
            },
            myStyle:{
                width:"100px",
                height:"100px",
                background:"red"
            }
        }
    })

    /*
        v-bind:
            用来给元素绑定属性


            语法：v-bind:属性 = 属性值


            简写：   :属性


            常用的属性有哪些？
                class
                id
                src
                href
                title
                type
                alt

    
    */


</script>