vue学习笔记-指令篇

最新推荐文章于 2022-11-25 19:08:26 发布

置顶 VickQ

最新推荐文章于 2022-11-25 19:08:26 发布

阅读量349

点赞数

分类专栏： web前端-vue 文章标签： vue.js vue指令

本文链接：https://blog.csdn.net/qq_43069222/article/details/103347428

版权

web前端-vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue指令

v-text
v-html
v-pre
v-once
v-model
v-on
v-if
v-else
v-else-if
v-show
v-for
v-cloak
2.6.0+新增v-slot

`v-text`

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
相当于元素中的innerText属性

不会解析html标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>
<body>

    <div id="app">
        <!-- v-text  -->
        <span v-text="test"></span>
        
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                    test:'v-text'
                }
            })
        </script>
</body>
</html>

页面显示结果如下:
在这里插入图片描述
注意:v-text不会解析html标签
例如：修改vue实例中的data中的test属性为

  test:'<h1>v-text</h1>'

页面显示结果如下:
在这里插入图片描述

`v-html`

用法和v-text差不多，但是可以解析html标签，类似于元素中的innerHtml
注意:只在可信内容上使用v-html ，永不用在用户提交的内容上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>
<body>
    <div id="app">
         <!-- v-html  -->
        <span v-html="vHtml"></span>
        
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                     vHtml:'<h1>v-html</h1>'
                }
            })
        </script>
</body>
</html>

页面显示结果如下:

在这里插入图片描述

`v-pre`

显示原始数据，跳过编译阶段
跳过这个元素和它的子元素的编译过程。
在静态页面中数据不需要发生变化时使用，可以加快页面渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>

<body>

    <div id="app">
         <!-- v-pre -->
        <span v-pre>{{vPre}}</span> 
        
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                     vPre: 'v-pre',
                }
            })
        </script>
</body>
</html>

页面显示结果如下:

`v-once`

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>

<body>

    <div id="app">
          <!-- v-once -->
        <span v-once>{{vOnce}}</span> 
        
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                     vOnce:'v-once'
                }
            })
        </script>
</body>
</html>

页面显示结果如下:
在这里插入图片描述
尝试修改v-once属性，页面显示结果如下:

发现页面并没有变化，所以一般用于页面加载一次之后数据不用再次更新时使用

`v-model`

双向数据绑定
当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化
注意:限制在input、select、textarea、components 中使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>

<body>

    <div id="app">
        <!-- v-model -->
        <span>{{vModel}}</span>
        <input type="text" v-model="vModel"/>
        
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                     vModel:'v-model'
                }
            })
        </script>
</body>

</html>

页面显示结果如下:

在这里插入图片描述
在改变输入框内容时，会发现数据会随着输入框内容变化而变化
页面显示结果如下:

在改变vue实例中的v-model属性时，会发现输入框内容会随着数据变化而变化
页面显示结果如下:

`v-on`

用来绑定事件
形式如：v-on:click ，也可以缩写为@click

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>

<body>

    <div id="app">
         <!-- v-on -->
        <span v-on:click="handleClick">点我</span>
        <!-- 缩写形式-->
        <span @click="handleClick">点我缩写</span>
        
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                  //将需要的数据填入data属性中(data是一个对象)
                data: {
                   
                },
                //将事件处理函数写在methods属性中（methods是一个对象）
                //需要和事件处理函数名称一致，可以是带参也可以不带参
                methods: {
                    //对应事件函数名称
                    handleClick:function(){
                        alert('我是span')
                    }
                },
            })
        </script>
</body>
</html>

点击span,页面显示结果如下:
在这里插入图片描述
点击span缩写,依然可以触发，页面显示结果如下:

`v-bind`

用来响应地更新 HTML 属性
形式如：v-bind:href ，也可以缩写为:href

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>

<body>

    <div id="app">
         <!-- v-on -->
        <span v-on:click="handleClick">点我</span>
        <!-- 缩写形式-->
        <span @click="handleClick">点我缩写</span>
        
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new  Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                  //将需要的数据填入data属性中(data是一个对象)
                data: {
                   
                },
                //将事件处理函数写在methods属性中（methods是一个对象）
                //需要和事件处理函数名称一致，可以是带参也可以不带参
                methods: {
                    //对应事件函数名称
                    handleClick:function(){
                        alert('我是span')
                    }
                },
            })
        </script>
</body>
</html>

页面显示结果如下:
在这里插入图片描述
点击百度，页面显示结果如下:

点击百度缩写，依然可以跳转，页面显示结果如下:

`v-if`

根据表达式的值的真假条件渲染元素

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>vue指令</title>
</head>

<body>

   <div id="app">
        <!-- v-if -->
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="scope>85">分数:{{scope}},优秀</span>
       
       <!--引入vue.js文件  -->
       <script src="./vue.js"></script>
       <script>
           //创建一个vue实例
           var app = new  Vue({
               el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                 //将需要的数据填入data属性中(data是一个对象)
               data: {
                     scope:90
               },
               //将事件处理函数写在methods属性中（methods是一个对象）
               //需要和事件处理函数名称一致，可以是带参也可以不带参
               methods: {
                 
               },
           })
       </script>
</body>
</html>

页面显示结果如下:

`v-else`

v-else必须紧跟在v-if

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>vue指令</title>
</head>

<body>

   <div id="app">
        <!-- v-if-else-->
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="scope>85">分数:{{scope}},优秀</span>
        <span v-else>分数:{{scope}},不够优秀</span>
       <!--引入vue.js文件  -->
       <script src="./vue.js"></script>
       <script>
           //创建一个vue实例
           var app = new Vue({
               el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                 //将需要的数据填入data属性中(data是一个对象)
               data: {
                     scope:70
               },
               //将事件处理函数写在methods属性中（methods是一个对象）
               //需要和事件处理函数名称一致，可以是带参也可以不带参
               methods: {
                 
               },
           })
       </script>
</body>
</html>

页面显示结果如下:

`v-else-If`

根据表达式的值的真假条件渲染元素
v-else-if必须紧跟在v-if或v-else-if后

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>vue指令</title>
</head>

<body>

   <div id="app">
        <!-- v-else-if -->
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="scope>85">分数:{{scope}},优秀</span>
        <span v-else-if="scope>70">分数:{{scope}},良好</span>
        <span v-else>分数:{{scope}},不及格</span>
       <!--引入vue.js文件  -->
       <script src="./vue.js"></script>
       <script>
           //创建一个vue实例
           var app = new  Vue({
               el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                 //将需要的数据填入data属性中(data是一个对象)
               data: {
                     scope:50
               },
               //将事件处理函数写在methods属性中（methods是一个对象）
               //需要和事件处理函数名称一致，可以是带参也可以不带参
               methods: {
                 
               },
           })
       </script>
</body>
</html>

页面显示结果如下:

`v-show`

根据表达式之真假值，切换元素的 display CSS 属性。

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>vue指令</title>
   <style>
   		 div {
   	        width: 100px;
   	        height: 100px;
   	        background: red
 		   }
   </style>
</head>

<body>

   <div id="app">
        <!-- v-show -->
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <div v-show="isShow"></div>
        
       <!--引入vue.js文件  -->
       <script src="./vue.js"></script>
       <script>
           //创建一个vue实例
           var app = new  Vue({
               el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                 //将需要的数据填入data属性中(data是一个对象)
               data: {
                     isShow:true
               },
               //将事件处理函数写在methods属性中（methods是一个对象）
               //需要和事件处理函数名称一致，可以是带参也可以不带参
               methods: {
                 
               },
           })
       </script>
</body>
</html>

页面显示结果如下:
在这里插入图片描述

`v-for`

用于循环的数组里面的值可以是对象，也可以是普通元素

遍历数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>

<body>

    <div id="app">
        <!-- v-for -->
        <div>
           <ul>
                <!--item 是自己定义的一个名字  代表数组里面的每一项  
                         items对应的是 data中的数组-->
                <li v-for="item in items">
                    {{ item.text }}
                </li>
            </ul>
        </div>

        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                    items: [
                        {
                            id: 1,
                            text: '西瓜'
                        },
                        {
                            id: 2,
                            text: '草莓'
                        },
                        {
                            id: 3,
                            text: '葡萄'
                        }
                    ]
                },
                //将事件处理函数写在methods属性中（methods是一个对象）
                methods: {
                  
                },
            })
        </script>
</body>

</html>

页面显示结果如下:
在这里插入图片描述
遍历对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>

<body>

    <div id="app">
        <!-- v-for -->
        <div>
           <ul>
                 <!--  循环结构-遍历对象
                        v  代表对象的value
                        k  代表对象的键 
                        i  代表索引	
                --->
                <li v-for="(v,k,i) in obj" :key="v.id">
                        {{v + '---' + k + '---' + i}}
                </li>
            </ul>
        </div>

        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                     obj:{
                        id:1,
                        name:'张三'
                    }
                },
                //将事件处理函数写在methods属性中（methods是一个对象）
                methods: {
                  
                },
            })
        </script>
</body>

</html>

页面显示结果如下:
在这里插入图片描述

不推荐同时使用 v-if 和 v-for
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if更高的优先级。
使用v-for时一般需要带上key

key的作用

key用来给每个节点做一个唯一标识
主要是为了高效的更新虚拟DOM

`v-cloak`

防止页面加载时出现闪烁问题
有时候可能会发现页面加载时先出现插值表达式再显示该数据，这种体验不好，所以用该指令可以解决此问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>
<style>
    [v-cloak] {
        /* 元素隐藏    */
        display: none;
    }
</style>

<body>

    <div id="app">
        <!-- 渲染dom  -->
        <!-- 使用插值表达式渲染数据-->
        <!-- 在 数据渲染完成之后，v-cloak 属性会被自动去除， v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签也就是对应的标签会变为可见 -->
        <span v-cloak>{{content}}</span>
        <!--引入vue.js文件  -->
        <script src="./vue.js"></script>
        <script>
            //创建一个vue实例
            var app = new new Vue({
                el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                //将需要的数据填入data属性中(data是一个对象)
                data: {
                    content: 'hello world'//添加了一个名为content的属性
                }
            })
        </script>
</body>

</html>

`v-slot`

2.6.0新增指令，它取代了slot 和 slot-scope
提供具名插槽或需要接收 prop 的插槽
只能在template 组件 (对于一个单独的带 prop 的默认插槽)中使用
缩写形式:#

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件名称-->
        <my-component>

            <!-- 缩写形式v-slot 具名插槽使用-->
            <template #header>
                <h1>页面头部</h1>
            </template>
            <template #body>
                <h1>页面内容</h1>
            </template>
            <template #footer>
                <h1>页面底部</h1>
            </template>

            <!--独占默认插槽  作用域插槽使用-->
            <!-- <template v-slot:default="slotProps">
                姓名: {{slotProps.user.firstName+slotProps.user.firstName.lastName}}
            </template> -->

            <!--不带参数的 v-slot 被假定对应默认插槽：  -->
            <!--独占默认插槽缩写形式+对象解构更简单  -->
            <template v-slot="{user}">
                姓名: {{user.firstName+''+user.lastName}}
            </template>

        </my-component>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    //全局注册组件
    //第一个参数自定义标签名
    Vue.component('my-component', {
        data: function () {
            return {
                user: {
                    lastName: '肖战',
                    firstName: '李'
                }
            }

        },
        template: `
            <div>
                 <div class="container">
                    <header>
                        <slot name="header"></slot>
                    </header>
                    <main>
                        <slot name="body"></slot>
                        <div>
                            <span>
                                <slot :user="user">{{ user }}</slot>
                            </span>
                        </div>
                    </main>
                    <footer>
                        <slot name="footer"></slot>
                    </footer>
                </div>
            </div>
        `

    })
    //创建vue实例
    var vm = new Vue({
        el: '#app',

        methods: {

        }
    })


</script>

</html>