Vue的简单指令使用方法及呈现

最新推荐文章于 2023-08-18 16:57:00 发布

汪广平

最新推荐文章于 2023-08-18 16:57:00 发布

阅读量322

点赞数

分类专栏：前端文章标签： vue 前端

本文链接：https://blog.csdn.net/w1217310848/article/details/107727602

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue的指令的简单使用

Vue介绍
Vue的第一程序
Vue的指令

Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2014年诞生,2013年react,09年angularjs
作者尤雨溪
核心概念: 组件化双向数据流 (基于ES5中的Object.defineProperty()来实现的),IE9才支持

Vue的第一程序

一、引入Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

二、Vue的程序演示

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--引入-->
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
</head>
    <body>
        <div id="app">{{msg}}</div>
        <script type="text/javascript">
        <!--当我们导入包之后，在浏览器的内存中，就多了一个vue构造函数-->
            var vm = new Vue({
                el:'#app',//表示当前我们new的这个vue实例，要控制哪个区域
                data:{//存放的是el中用到的数据
                    msg:'hello vue.js'
                }
            })
        </script>
    </body>
</html>

三、vue就是帮我们减少DOM操作，让我们更关注于逻辑层，所以vue框架不提倡操作DOM元素
我们通过{{}}插值表达式获取数据

<div id="app">{{msg}}</div>
这段代码算view层

new 出来vm对象就是viewModel层

data就相当于model层，数据层（后端的dao层）

Vue的指令

v-text 和 v-html

<h1 v-text="msg"></h1>

效果一样，如果因网络问题，用户刷新页面会看到{{}}，但是用v-text不会看到闪烁问题，因为标签内没有插值表达式

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--{{msg}} 插值表达式   先显示{{msg}}，然后找到msg变量去替换插值表达式 -->
        <p>{{msg}}</p>
        <!--相当于innerText-->
        <p v-text="msg"></p>
        <!--相当于innerHtml 可以读取变量里边写的html标签-->
        <p v-html="msg"></p>
        <!-- v-text和V-html 都是作用于标签上，是一个属性，呈现数值时覆盖该标签内部文本 -->
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"<h1>hello world!!!</h1>"
            }
        })
    </script>
</body>
</html>

呈现效果如下：
在这里插入图片描述

v-if和v-show指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-if false 隐藏 true 显示 if把元素给我删除了，show只是加了display:none的样式--> 
        <div v-if="msg" style="width: 800px;height: 200px;background-color: brown;">v-if</div>
        <!-- v-show -->
        <div v-show="msg" style="width: 800px;height: 200px;background-color:cadetblue;">v-show</div>

    </div>
    <Script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:false
            }
        })
    </Script>
</body>
</html>

呈现效果：
在这里插入图片描述

if把元素给我删除了，show只是加了display:none的样式
if有较高的切换性能消耗
show有较高的初始渲染消耗
v-bind指令

v-bind，v-on指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--v-bind:属性，应用于属性上，单项绑定-->
       <button v-bind:title="msg">按钮</button>
       <!--v-on：click   触发事件    v-on：事件名称="方法名"
            此时的v-on:click的方法对应下边methods中的方法，然后methods里的方法名去写逻辑 -->
       <button v-bind:title="msg" v-on:click="bClick">按钮</button>
       <!--简写-->
       <button :title="msg" @click="bClick">按钮</button>


    </div>
    <Script>
        var vm = new Vue({
            el:"#app",
            data:{//数据
                msg:"我是一个按钮"
            },
            methods:{//方法
                bClick(){//如果此时没有参数传入小括号可以不写 
                    alert("我是一个按钮")
                }
            }
        })
    </Script>
</body>
</html>

v-bind效果呈现：
在这里插入图片描述
v-on效果呈现：

v-on：简写效果呈现：

v-model指令双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <input type="text" name="" id="" v-model="msg">

    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello world!!!"
            }
        })
    </script>
</body>
</html>

v-model呈现：当输入框内容改变外边的内容一同改变，相互影响
在这里插入图片描述

v-for指令

遍历普通数组

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
         <table>
             <!--相当于for（String Str ： StrList）{}-->
                 <!-- 遍历普通数组  id为数组索引-->
             <tr v-for="（item，id） in arr"><td>{{item}}</td></tr>
         </table>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                arr:[1,2,4,5,2,6,3,5,2,8]
            }
        })
    </script>
</body>
</html>

遍历普通数组结果：
在这里插入图片描述
遍历对象

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
         <table>
            
             <tr v-for="(value,key,id) in stu"><td>角标：{{id}}------ 键名: {{key}} ------ 值：{{value}}</td></tr>
         </table>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                stu:{name:'zhangsan',age:20,tel:12731238,sex:'女'}
            }
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

遍历对象时，对象的key和value一定看清，对应清楚，负责容易理解偏差
遍历对象数组

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
         <table>
             <tr v-for="(item,id) in stu1"><td>角标：{{id}}------ {{item.name}} ------ {{item.age}}------{{item.sex}}</td></tr>
         </table>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                stu1:[
                    {name:'zhangsan',age:20,tel:12731238,sex:'女'},
                    {name:'李四',age:22,tel:12731238,sex:'男'},
                    {name:'王五',age:23,tel:12731238,sex:'男'}
                ]
            }
        })
    </script>
</body>
</html>

结果为
在这里插入图片描述
遍历数组对象时，是没有键值的概念的直接由数组点出对象的属性即可

添加功能

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
        姓名<input type="text" name="" id="" v-model="username">
        年龄<input type="text" name="" id="" v-model="userage">
        电话<input type="text" name="" id="" v-model="usertel">
        性别<input type="text" name="" id="" v-model="usersex">
        <button @click="adduser">添加</button>
         <table>
             <tr v-for="(item,id) in stu1"><td>角标：{{id}}------ {{item.name}} ------ {{item.age}}------{{item.sex}}</td></tr>
         </table>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:"",
                userage:"",
                usertel:"",
                usersex:"",
                stu1:[
                    {name:'zhangsan',age:20,tel:12731238,sex:'女'},
                    {name:'李四',age:22,tel:12731238,sex:'男'},
                    {name:'王五',age:23,tel:12731238,sex:'男'}
                ]
            },
            methods:{
                adduser(){
                	//push是把记录加在数组对象的最后一条
                    this.stu1.push({name:this.username,age:this.userage,tel:this.usertel,sex:this.usersex})
                }
            }
        })
    </script>
</body>
</html>

结果为：

在这里插入图片描述
把对象数组的最新一条记录加在最后一条没有问题，但是如果把这条记录加在千遍就会出现问题

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
        姓名<input type="text" name="" id="" v-model="username">
        年龄<input type="text" name="" id="" v-model="userage">
        电话<input type="text" name="" id="" v-model="usertel">
        性别<input type="text" name="" id="" v-model="usersex">
        <button @click="adduser">添加</button>
         <table>
             <tr v-for="(item,id) in stu1"><td>角标：{{id}}------ {{item.name}} ------ {{item.age}}------{{item.sex}}</td></tr>
         </table>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:"",
                userage:"",
                usertel:"",
                usersex:"",
                stu1:[
                    {name:'zhangsan',age:20,tel:12731238,sex:'女'},
                    {name:'李四',age:22,tel:12731238,sex:'男'},
                    {name:'王五',age:23,tel:12731238,sex:'男'}
                ]
            },
            methods:{
                adduser(){
                	//unshift是把记录加在数组对象的第一条
                    this.stu1.unshift({name:this.username,age:this.userage,tel:this.usertel,sex:this.usersex})
                }
            }
        })
    </script>
</body>
</html>

当把原有的第一条打上勾，那么对勾就会跑到新添加上来的这一条上
在这里插入图片描述
这个问题想要解决需要给这个td 绑定一个唯一的值

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <title>Document</title>
</head>
<body>
    <div id="app">
        姓名<input type="text" name="" id="" v-model="username">
        年龄<input type="text" name="" id="" v-model="userage">
        电话<input type="text" name="" id="" v-model="usertel">
        性别<input type="text" name="" id="" v-model="usersex">
        <button @click="adduser">添加</button>
         <table>
             <tr v-for="(item,id) in stu1" :key="item.name">
                 <td><input type="checkbox" name="" id="" >
                     角标：{{id}}------ {{item.name}} ------ {{item.age}}------{{item.sex}}</td>
                </tr>
         </table>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:"",
                userage:"",
                usertel:"",
                usersex:"",
                stu1:[
                    {name:'zhangsan',age:20,tel:12731238,sex:'女'},
                    {name:'李四',age:22,tel:12731238,sex:'男'},
                    {name:'王五',age:23,tel:12731238,sex:'男'}
                ]
            },
            methods:{
                adduser(){
                    this.stu1.unshift({name:this.username,age:this.userage,tel:this.usertel,sex:this.usersex})
                }
            }
        })
    </script>
</body>
</html>

问题就解决了
在这里插入图片描述

删除搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p class="bg-primary">添加品牌</p>
        编号:
        <input type="text" name="" id="" v-model="id">
        品牌名称：
        <input type="text" name="" id="" v-model="name">
        <button type="button" class="btn btn-primary" @click="add">添加</button>
        搜索
        <input type="text" name="" id="" v-model="keyWord">
        <table class="table table-hover">
           <tr>
               <td>编号</td>
               <td>品牌名称</td>
               <td>添加时间</td>
               <td>操作</td>
           </tr>
           <tr v-for="(item,i) in search(keyWord)" :key="item.id">
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td>{{item.date|dateFormate}}</td>
               <td><a href="" @click.prevent="del(i)">删除</a></td>
           </tr>
        </table>
    </div>
    <script>

        var vm = new Vue({
            el:"#app",
            data:{
                id:"",
                name:"",
                keyWord:"",
                arr: [
                    { id: 1, name: '小米',date:new Date()},
                    { id: 2, name: '华为',date:new Date()}
                ],
            },
            methods: {
                //添加品牌
                add(){
                    this.arr.push({id:this.id,name:this.name,date:new Date()})
                },
                //搜索
                search(keyWord){
                    var newList=[]
                    this.arr.forEach(data=>{
                        if(data.name.indexOf(keyWord)!=-1){
                            newList.push(data)
                        }    
                    })
                    return newList
                },
                //删除  
                del(i){
                    this.arr.splice(i,1)
                }
            },
            filters:{
                //私有过滤器
                dateFormate:function(val){
                    var date = new Date(val);
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    m = m<10?"0"+m:m;
                    var d = date.getDate();
                    d = d<10?"0"+d:d;
                    var hour = date.getHours();
                    hour = hour<10?"0"+hour:hour;
                    var minutes = date.getMinutes();
                    minutes = minutes<10?"0"+minutes:minutes;
                    var seconds = date.getSeconds();
                    seconds = seconds<10?"0"+seconds:seconds;
                    return `${y}-${m}-${d} ${hour}:${minutes}:${seconds}`;
                }
            }
        })
    </script>
</body>
</html>

案例中搜索是通过keyWord筛选员数组中符合条件的元素，当符合的时候在吧搜索到的元素放在新的数组内，然后返回这个新的数组

通过删除中，拿想要删除的数组对象的角标，通过删除方法进行删除，splice(i,1)是从哪条开始删，第二个参数是删几条

汪广平

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的简单指令使用方法及呈现

Vue的指令的简单使用Vue介绍Vue的第一程序Vue的指令v-text 和 v-htmlv-if和v-show指令v-bind，v-on指令v-model指令双向数据绑定v-for指令Vue介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应
复制链接

扫一扫