Vue的系统指令

2023-10-08 16:45:22

v-text

v-html

{{}}，v-text，v-html的优缺点

指令:采用v- 开始的,一般称之为指令.指令通常在属性中-

v-text

 <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 指令:采用v- 开始的,一般称之为指令.指令通常在属性中-->
        <div v-text="name"></div>
        <div v-text="desc"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'vue',
                desc:`
                <div>
                        <ul>
                            <li>海淀</li>
                            <li>昌平</li>
                            <li>朝阳</li>
                        </ul>
                        <img src="https://gw.alicdn.com/tps/TB1x2eZLVXXXXbCXVXXXXXXXXXX-1130-500.jpg_570x10000Q75.jpg_.webp" alt="">
                    </div>
                
                `
            }
        })
    </script>

v-html

  <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 指令:采用v- 开始的,一般称之为指令.指令通常在属性中-->
        <div v-html="name"></div>
        <div v-html="desc"></div>
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'vue',
                desc:`
                <div>
                        <ul>
                            <li>海淀</li>
                            <li>昌平</li>
                            <li>朝阳</li>
                        </ul>
                        <img src="https://gw.alicdn.com/tps/TB1x2eZLVXXXXbCXVXXXXXXXXXX-1130-500.jpg_570x10000Q75.jpg_.webp" alt="">
                    </div>
                
                `
            }
        })
    </script>

{{}}，v-text，v-html的优缺点

优点	缺点	作用
{{}}	在项目中方便书写	会出现闪屏问题	插值表达式
v-text	不会出现闪屏问题	--	解析数据
v-html	1.不会出现闪屏问题2,可以解析富文本内容及动态数据	可能会出现xss攻击	解析数据

应用:
   一般情况下,在实际开发中建议使用{{}},如果是确定的字符串内容可以使用{{}}和v-text
   如果是富文本内容或者是动态请求的数据,可以使用v-html.

   缺陷:
   使用{{}}会出现闪屏问题,

v-on事件绑定

事件:
普通事件:click
键盘事件
鼠标事件
滚轮事件

事件绑定语法:
v-on:事件名称 = "事件函数/表达式"
等号右侧的事件函数为函数的调用.()可有可无
简写:
@事件名称 = "事件函数/表达式"

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 
            事件绑定语法:
                v-on:事件名称 = "事件函数/表达式"
                等号右侧的事件函数为函数的调用.()可有可无
            简写:
                @事件名称 = "事件函数/表达式"

         -->
        <button v-on:click="login">登录</button>
        <hr>
        <button v-on:click="login()">登录</button>
        <hr>
        <button @click="reg">注册</button>

    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性

            },
            methods:{//方法
                login(){
                    console.log('登录成功');
                },
                reg(){
                    console.log('注册成功');
                }
            }
        })
    </script>

v-once

只渲染一次
v-once:将当前元素以及下面的所有子元素只渲染一次

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <div>
            <h3>商品的名称:{{name}}</h3>
            <div>单价为:{{price}}</div>
            <button @click="changePrice">修改单价</button>
        </div>
        <hr>
        <!-- v-once:将当前元素以及下面的所有子元素只渲染一次 -->
        <div v-once>
            <h3>商品的名称:{{name}}</h3>
            <div>单价为:{{price}}</div>
            <button @click="changePrice">修改单价</button>
        </div>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                name:'iphone13',
                price:6999,
            },
            methods:{//方法
                changePrice(){
                    this.price =  7000;
                }
            }
        })
    </script>

v-if条件渲染

条件渲染:
v-if
v-else-if
v-else
注意事项:使用以上三个指令时,必须连续使用,中间不能出现其他内容

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 
            条件渲染:
                v-if
                v-else-if
                v-else
            注意事项:使用以上三个指令时,必须连续使用,中间不能出现其他内容

         -->    
         <div v-if="score < 60">不及格</div>
         <!-- <span>哈哈哈</span> -->
         <div  v-else-if="score <= 80">及格</div>
         <div v-else>优秀</div>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                score:88,
            },
            methods:{//方法

            }
        })
    </script>

v-show(条件展示)

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 
            v-show
         -->
        <div class="box" v-show="isShow"></div>
        <!-- @click="事件函数/表达式" -->
        <button @click="hide">隐藏</button>
        <button @click="show">显示 </button>
        <button @click="isShow=!isShow">切换</button>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                isShow:true,
            },
            methods:{//方法
                hide(){
                    this.isShow = false;
                },
                show(){
                    this.isShow = true;
                }
            }
        })
    </script>

v-if和v-show区别:

v-if和v-show区别:
   相同点:
       1.都是来控制元素的显示与隐藏
       2.当表达式的结果为真时,元素为显示
   不同点:
       当表达式的结果为假时,v-if指令控制的元素直接消失,v-show指令控制的元素是通过display:none来显示
应用:
   1.页面加载完成之后的一次性判断使用v-if
   2.页面之间频繁切换时,使用v-show, eg:选项卡

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景

v-model

  <title>Document</title>
    <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
         <!-- v-model:只用于表单
            v-model:可以实现双向数据绑定
        -->
        <input type="text" v-model="name">
        <div>name的值为:{{name}}</div>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                name:'杨志远'
            },
            methods:{//方法

            }
        })
    </script>

v-bind

v-bind:绑定现有属性和自定义属性
语法:
v-bind:属性名="表达式"
简写
:属性名="表达式"

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- v-bind:绑定现有属性和自定义属性 
            语法:
                v-bind:属性名="表达式"
            简写
                :属性名="表达式"

        -->
        <a v-bind:href="url">淘宝</a>
        <div v-bind:a="10">hello</div>
        <hr>
        <img v-bind:src="imgUrl" alt="">
        <hr>
        <img :src="imgUrl" alt="">

    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                url:'http://www.taobao.com',
                imgUrl:'https://img.alicdn.com/imgextra/i1/652263516/O1CN01SmV0Mf1bqNCUVTKNJ_!!652263516-0-daren.jpg_300x300.jpg',
            },
            methods:{//方法

            }
        })
    </script>

动态类名class

方式一

语法:
:class="变量"

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .active{
            background-color: aquamarine;
        }
        .select {
            background-color: palevioletred;
        }
    </style>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 原生写法 -->
        <!-- 
            语法:
                :class="变量"
         -->
        <div :class="classN">2035去*</div>
        <button @click="changeBg">修改背景</button>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                classN:'active'
            },
            methods:{//方法
                changeBg(){
                    this.classN = 'select'
                }
            }
        })
    </script>

方式二

:class="三目运算符"

  <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 原生写法 -->
        <!-- 
            语法:
                :class="三目运算"
         -->
        <div :class="1>1 ? 'active' : 'select'">2035去*</div>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                classN:'active'
            },
            methods:{//方法
              
            }
        })
    </script>

方式三

:class="{类名1:提交判断,类名2:条件判断...}"

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
    <style>
        .active{
            background-color: aquamarine;
        }
        .select {
            background-color: palevioletred;
        }
        .one{
            color:white;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 原生写法 -->
        <!-- 
            语法:
                :class="{类名:条件判断}"
         -->
        <div :class="{active:true,select:true,one:true}">2035去*</div>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                classN:'active'
            },
            methods:{//方法
              
            }
        })
    </script>

动态样式style

  <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 原生写法 -->
        <div style="width:100px;height: 100px;background: palevioletred;"></div>
        <hr>
        <!-- 动态style -->
        <div :style="styleN"></div>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                styleN:{
                    width:'100px',
                    height:'200px',
                    backgroundColor:'red',
                }
            },
            methods:{//方法

            }
        })
    </script>

v-for

遍历数组 | 对象 | 数值 | 字符串
语法:
v-for="遍历的每一项的变量 in 数组"

遍历数组

   <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 遍历数组 -->
        <ul>
            <!-- item:遍历的每一项 index:遍历的下标 -->
            <li v-for="(val,index) in brand">{{val}}==={{index}}</li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                brand:['大宝SOD蜜','海澜之家','mac','蜜丝佛陀','阿玛尼']
            },
            methods:{//方法

            }
        })
    </script>

遍历数值

<!-- 遍历数值 -->
        <ul>
            <li v-for="item in 10">{{item}}</li>
        </ul>

遍历字符串

 <!-- 遍历字符串 -->
<div v-for="item in '杨志远'">{{item}}</div>

遍历对象

  <div v-for="(val,key) in person">{{val}}==={{key}}

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <!-- 遍历数组 -->
        <ul>
            <!-- item:遍历的每一项 index:遍历的下标 -->
            <li v-for="(val,index) in brand">{{val}}==={{index}}</li>
        </ul>
        <hr>
        <!-- 遍历数值 -->
        <ul>
            <li v-for="item in 10">{{item}}</li>
        </ul>
        <hr>
        <!-- 遍历字符串 -->
        <div v-for="item in '杨志远'">{{item}}</div>
        <hr>
        <!-- 遍历对象 -->
        <div v-for="(val,key) in person">{{val}}==={{key}}</div>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                brand:['大宝SOD蜜','海澜之家','mac','蜜丝佛陀','阿玛尼'],
                person:{
                    name:'杨志远',
                    age:20,
                    sex:'男',
                    girlFriend:['翠花','翠芬','...'],
                }
            },
            methods:{//方法

            }
        })
    </script>

v-for遍历时key的作用

在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

在v-for遍历的元素上需要绑定key值,且key值必须是唯一的, key值的类型只能是string/number

 <!-- 1.引入vue -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.创建DOM元素 -->
    <div id="app">
        <ul>
            <!-- 在v-for遍历的元素上需要绑定key值,且key值必须是唯一的, key值的类型只能是string/number -->
            <li v-for="(item,index) in brand" :key="item.id">
                {{item.name}}
                <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        let  vm  = new Vue({
            el:'#app',
            data:{//属性
                brand:[
                    {id:1,name:'玛莎拉蒂'},
                    {id:2,name:'宝马'},
                    {id:3,name:'劳斯莱斯'},
                    {id:4,name:'奥迪'},
                ]
            },
            methods:{//方法
                del(index){
                    this.brand.splice(index,1);
                }
            }
        })
    </script>

码农公寓

v-text

v-html

{{}}，v-text，v-html的优缺点

v-on事件绑定

v-once

v-if条件渲染

v-show(条件展示)

v-if和v-show区别:

v-model

v-bind

动态类名class

动态样式style

v-for

v-for遍历时key的作用

相关文章