vue学习笔记-指令篇

程序员文章站 2022-04-24 09:01:07

...

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

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>

页面显示结果如下:
vue学习笔记-指令篇
注意:v-text不会解析html标签
例如：修改vue实例中的data中的test属性为

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

页面显示结果如下:
vue学习笔记-指令篇

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>

页面显示结果如下:

vue学习笔记-指令篇

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>

页面显示结果如下:

vue学习笔记-指令篇

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>

页面显示结果如下:
vue学习笔记-指令篇
尝试修改vOnce属性，页面显示结果如下:

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

双向数据绑定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学习笔记-指令篇
在改变输入框内容时，会发现数据会随着输入框内容变化而变化
页面显示结果如下:

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

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,页面显示结果如下:
vue学习笔记-指令篇
点击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>

页面显示结果如下:
vue学习笔记-指令篇
点击百度，页面显示结果如下:

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

vue学习笔记-指令篇

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>

页面显示结果如下:
vue学习笔记-指令篇

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 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>

页面显示结果如下:
vue学习笔记-指令篇

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 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>

页面显示结果如下:
vue学习笔记-指令篇

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>

页面显示结果如下:
vue学习笔记-指令篇

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>

页面显示结果如下:
vue学习笔记-指令篇
遍历对象

<!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>

页面显示结果如下:
vue学习笔记-指令篇
不推荐同时使用 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>

vue学习笔记-指令篇

v-text

v-html

v-pre

v-once

双向数据绑定v-model

v-on

v-bind

v-if

v-else

v-else-If

v-show

v-for

v-cloak

Vue2.5笔记：v-if 和 v-show指令

vue学习指南：第十篇(详细) - Vue的动画

vue学习指南：第十一篇(详细) - Vue的路由第一篇 ( router )

vue学习指南：第九篇(详细) - Vue的 Slot-插槽

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

ORACLE学习笔记-新建用户及建表篇

ORACLE学习笔记-添加更新数据函数篇

ORACLE学习笔记-查询篇

Vue.js学习笔记之 helloworld

java学习笔记(基础篇)—关键字static和final

vue学习笔记-指令篇

v-text

v-html

v-pre

v-once

双向数据绑定v-model

v-on

v-bind

v-if

v-else

v-else-If

v-show

v-for

v-cloak

Vue2.5笔记：v-if 和 v-show指令

vue学习指南：第十篇(详细) - Vue的 动画

vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

vue学习指南：第九篇(详细) - Vue的 Slot-插槽

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

ORACLE学习笔记-新建用户及建表篇

ORACLE学习笔记-添加更新数据函数篇

ORACLE学习笔记-查询篇

Vue.js学习笔记之 helloworld

java学习笔记(基础篇)—关键字static和final

vue学习指南：第十篇(详细) - Vue的动画

vue学习指南：第十一篇(详细) - Vue的路由第一篇 ( router )