vue-Study2

最新推荐文章于 2022-12-27 18:36:31 发布

Floatwor青舟

最新推荐文章于 2022-12-27 18:36:31 发布

阅读量476

点赞数

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

本文链接：https://blog.csdn.net/f944913628/article/details/109539322

版权

前端学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

v-model

在vue的指令中，v-bind只能实现数据的单向绑定，也就是从M（model）自动绑定到V（view），无法实现双向绑定。

使用v-model，可以实现表单元素和model中数据的双向绑定。

注意：v-model只能运用在表单元素中。

<body>
    <!-- v-bind 指令 只能实现数据的单向绑定 从M自动绑定到V 无法实现双向绑定 -->
    <!-- v-model 指令 可以实现表单元素和Model中数据的双向绑定 -->
    <!-- v-model只能运用在表单元素中 -->
    <div id="app">
        <!-- <input type="text" v-bind:value='msg'>; -->
        <input type="text" v-model:value='msg'>;

        <p>
            {{msg}}
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'Good good study ,day day up'
            },
            methods:{
                
            }
        })
    </script>
</body>

v-model

关于v-model的计算器小案例

<body>
    <!-- 计算器小案列 -->
    <div id="app">
        <input type="text" v-model='n1'>
        <select name="" id="" v-model='opt'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model='n2'>
        <input type="button" value="=" @click='calc'>
        <input type="text" v-model='result'>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                //传入初始的值
                n1:0,
                n2:0,
                opt:'+',
                result:0
            },
            methods:{
                calc(){
                    switch(this.opt){
                        case '+':
                        this.result=parseInt(this.n1)+parseInt(this.n2);
                        break;
                        case '-':
                        this.result=parseInt(this.n1)-parseInt(this.n2);
                        break;
                        case '*':
                        this.result=parseInt(this.n1)*parseInt(this.n2);
                        break;
                        case '/':
                        this.result=parseInt(this.n1)/parseInt(this.n2);
                        break;

                        default:
                        break;
                    }
                }
            }
        })
    </script>
</body>

给元素设置样式

在vue中给元素设置样式有两种方式。

：class （需要用v-bind做数据绑定）

<body>
    <!-- vue 给元素设置样式 -->
    <div id="app">
        <h1 class="red thin">标题标签，功能强大</h1>

    <!-- 第一种方法直接传递一个数组 注意：这里的class需要用v-bind做数据绑定 -->
    <h1 :class='["red","italic"]'> Food Food Good</h1>
    
    <!--在数组中 使用三元表达式 -->
    <h1 :class="['thin','italic',flag?'active':'']">Good Day</h1>

    <!-- 在数组中 使用对象代替三元表达式 提高代码的可读性 -->
    <h1 :class="['red','italic',{'active':flag}]">SN Win!!</h1>

    <!-- 在为class对象使用v-bind绑定对象的时候，对象的属性是类名 -->
    <!-- 对象的属性可以带引号 也可以不带引号 -->
    <h1 :class="classObj">DWG win? NO SN win!</h1>
 

    </div>


    <script>
        new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{
                    red:true,
                    thin:false,
                    italic:false,
                    active:true
                }
            },
            methods:{

            }
        })
    </script>
</body>

：style（需要用v-bind做数据绑定）

<body>
    <!-- :style -->
    <div id="app">
        <h1 :style='styleObj1'>冠军留在LPL</h1>

        <h1 :style="[styleObj1,styleObj2]">艾欧尼亚昂扬不灭</h1>

    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                styleObj1:{
                    color:'green',
                    fontWeight:800
                },
                styleObj2:{
                    fontStyle:'italic'
                }
            },
            methods:{

            }
        })
    </script>
</body>

v-for循环

用法：
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

<body>
    <!-- v-for 循环 -->
    <div id="app">
        <!-- <p>{{list[0]}}</p>
        <p>{{list[1]}}</p>
        <p>{{list[2]}}</p>
        <p>{{list[3]}}</p> -->

        <p v-for='(item,index) in list'>
            索引值：{{index}}------每一项：{{item}}
        </p>

        <p v-for='(use,i) in list'>
            id:{{use.id}}==姓名：{{use.name}}---索引：{{i}}

        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // list:[1,2,3,4],
                list:[
                    {id:1,name:'zs1'},
                    {id:2,name:'zs2'},
                    {id:3,name:'zs3'}
                ]
            },
            methods:{

            }
        })
    </script>
</body>

v-for

<body>
    <!-- :style -->
    <div id="app">
        <h1 :style='styleObj1'>冠军留在LPL</h1>

        <h1 :style="[styleObj1,styleObj2]">艾欧尼亚昂扬不灭</h1>

    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                styleObj1:{
                    color:'green',
                    fontWeight:800
                },
                styleObj2:{
                    fontStyle:'italic'
                }
            },
            methods:{

            }
        })
    </script>
</body>

<body>
    <div id="app">
        <label for="">ID:
            <input type="text" v-model="id">
        </label>
        <label for="">Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click='add'>
        <!-- 注意：v-for循环时，key属性只能使用number或者string -->
        <!-- 注意：key在使用的时候 必须使用v-bind属性绑定的形式 指定key值 -->
        <!-- 如果 v-for有问题在使用v-for的同时，指定唯一的字符串/数字 类型：key值 -->

        <p v-for='item in list' :key='item.id'>
            <input type="checkbox">{{item.id}}---{{item.name}}
        </p>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[
                {id:1,name:'李斯'},
                {id:2,name:'赵高'},
                {id:3,name:'嬴政'},
                {id:4,name:'韩非子'},
                {id:5,name:'荀子'}
                ]
            },
            methods:{
                add(){
                    this.list.unshift({id:this.id,name:this.name})
                }
            }
        })
    </script>
</body>

在这里插入图片描述

v-if与v-show

v-if的特点：
每次都会重新删除或者创建元素。

v-show的特点：每次不会重新进行DOM的删除和创建操作。只是切换了元素的display：none的样式。

使用场景：
若元素涉及频繁的切换最好不要使用v-if，推荐v-show。
若元素可能永远也不会显示出来被用户看到则推荐v-if。

<body>
    <div id="app">
        <!-- 两种写法都可以 -->
        <input type="button" value="toggle" @click="toggle">
        <input type="button" value="toggle" @click='flag=!flag'>

        <h1 v-if="flag">这是使用v-if控制的元素</h1>
        <h1 v-show="flag">这是使用v-show控制的元素</h1>

    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                flag:false
            },
            methods:{
                toggle(){
                    this.flag=!this.flag
                }
            }
        })
    </script>
</body>

员工管理系统小demo

实现功能：

1、录入员工
2、删除员工
3、根据条件筛选员工
4、展示所有员工

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo9</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
  
         <div id="app">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加员工</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Id:
                        <input type="text" class="form-control" v-model="id">
                    </label>
    
                    <label>
                        Name:
                        <input type="text" class="form-control" v-model="name">
                    </label>
    
                    <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
                    <input type="button" value="添加" class="btn btn-primary" @click='add'>
    
                    <label>
                        搜索名称关键字：
                        <input type="text" class="form-control"  v-model='keywords'>
                    </label>
                </div>
            </div>
    
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 现在,我们自己定义个search方法,同时, 把所以的关键字, 通过传参的形式, 传递给search方法 -->
                    <tr v-for='item in search(keywords)' :key='item.id'>
                        <td>{{item.id}}</td>
                        <td v-text='item.name'></td>
                        <td>{{item.ctime | dateFormat('yyyy-MM-DD')}}</td>
                        <td>
                            <a href="" @click.prevent='del(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
    
        </div>
            
        </div>
    <script>
           //定义全局过滤器 放在实例上面
           Vue.filter('dateFormat',(dateStr,pattern='')=>{
             //根据给定的时间字符串，得到特定的时间
            // console.log(dateStr);

            var dt=new Date(dateStr);
            // console.log(dt);

            //yyy-mm-dd
            var y=dt.getFullYear();
            var m=dt.getMonth()+1;
            var d=dt.getDate();
               if(pattern.toLowerCase()=='yyyy-mm-dd'){
                return`${y}年${m}月${d}日`
               }else{
                   var hh=dt.getHours();
                   var mm=dt.getMinutes();
                   var ss=dt.getSeconds();
            return`${y}年${m}月${d}日${hh}时${mm}分${ss}秒`
               }

            
        })
        new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'张无忌',ctime:new Date()},
                    {id:2,name:'周芷若',ctime:new Date()}
                ]
            },
            methods:{
                add(){
                    var car={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(car)
                },
                del(id){
                    // console.log(id+'===');
                    //分析：根据传递的id 在list中找到 从而实现删除
                    //如果找到了索引，直接调用数组的splice方法

                    //第一种删除方式
                    // this.list.some((item,i)=>{
                    //     if(item.id==id){
                    //         this.list.splice(i,1);
                    //         return true;
                    //     }
                    // })

                    //第二种删除方式
                    var index=this.list.findIndex((item)=>{
                        if(item.id==id){
                            return true;
                        }
                    });
                    console.log(index);
                    this.list.splice(index,1)
                },
                //筛选方法
                search(key){
                    // var name='fzh';
                    // console.log(name.indexOf(''));
                    // var newList=[];
                    // this.list.forEach(item => {
                    //     //判断传递进来的key是否在每个对象的name中存在
                    //     //如果不存在则返回-1
                    //     console.log(item.name.indexOf(key));
                    //     if(item.name.indexOf(key)!=-1){
                    //         newList.push(item);
                    //     }
                    // });
                    // console.log(newList);
                    // return newList;

                    //第二种方法
                    return this.list.filter(item=>{
                        //filter()方法创建一个新数组，其包含通过所提供的函数实现的测试的所有元素
                        if(item.name.includes(key)){
                            return item;
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

定义全局过滤器

vue中可以自定义过滤器，过滤器可以对一些常见的文本进行格式化的处理，还可以对敏感词汇进行过滤等等。

过滤器可以用在两个地方：
mustache插值表达式和v-bind表达式。

过滤器应该添加在js表达式中，由管道符 |指示。

定义全局过滤器的语法结构：

Vue.filter('过滤器的名称'，function(){})

过滤器中function第一个参数已经规定死了，永远都是过滤器管道符前面传递过来的数据。

注意：全局过滤器写在Vue实例的外部。

<body>
 
<div id="app">
    <p>{{msg | msgFormat('gg','jj') | test}}</p>
</div>

 <script >
   
     //定义全局过滤器的语法结构
     //Vue.filter('过滤器的名称'，function(){})

     //过滤器中function第一个参数已经规定死了，永远都是过滤器管道符前面传递过来的数据

     Vue.filter('msgFormat',(msg,arg,arg1)=>{
         console.log(msg);
         //替换字符串中的 字符 replace
         //还可以定义正则表达式
        //  return msg.replace('大家','特朗普');
        // return msg.replace(/大家/g,'特朗普');
        return msg.replace(/大家/g,arg+arg1)
     })

     Vue.filter('test',(msg)=>{
         return msg+'====='
     })
     new Vue({
         el:'#app',
         data:{
            msg:'大家好才是真的好大家快乐才是真的快乐'
         },
         methods:{

         }
     })

 </script>

</body>

全局过滤器
时间过滤器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间过滤器</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>
            {{msg | dateFormat}}
        </p>
    </div>

    <div id="app1">
        {{msg | dateFormat}}
    </div>
    <script >
        //定义全局过滤器 放在实例上面
        Vue.filter('dateFormat',(dateStr)=>{
            //根据给定的时间字符串，得到特定的时间
            // console.log(dateStr);

            var dt=new Date(dateStr);
            // console.log(dt);

            //yyy-mm-dd
            var y=dt.getFullYear();
            var m=dt.getMonth()+1;
            var d=dt.getDate();

            return`${y}年${m}月${d}日`

            
        })
      var vm = new Vue({
            el:'#app',
            data:{
                msg:new Date(),
            },
            methods:{

            }
        })
        var vm1= new Vue({
            el:'#app1',
            data:{
                msg:new Date(),
            },

        })
    </script>
</body>
</html>

在这里插入图片描述

定义私有过滤器

filters属性。定义私有过滤器。

过滤器有两个条件：过滤器名称和处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私有过滤器</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>{{dt | dateFormat}}</p>
    </div>
    <script>
     var vm =  new Vue({
            el:'#app',
            data:{
                dt:new Date()
            },
            methods:{
                
            },
    filters:{
        dateFormat:(dateStr,pattern)=>{
            var dt=new Date(dateStr);
            // console.log(dt);

            //yyy-mm-dd
            var y=dt.getFullYear();
            var m=(dt.getMonth()+1).toString().padStart(2,'0');
            var d=dt.getDate().toString().padStart(2,'0');

            var hh=dt.getHours().toString().padStart(2,'0');
            var mm=dt.getMinutes().toString().padStart(2,'0');
            var ss=dt.getSeconds().toString().padStart(2,'0');
            return `${y}年${m}月${d}日 ${hh}:${mm}:${ss}`
        }
            
    }
})  


    </script>
</body>
</html>

私有过滤器

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义全局指令</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
	<p>页面载入时，input 元素自动获取焦点：</p>
	<input v-focus>
</div>

<script>
// 注册一个全局自定义指令 v-focus
 // 注意: 在每个 函数中 第一个参数 永远都是el,表示 被绑定了指令的那个元素,这个el参数 是一个原生的JS对象
// 在元素 刚绑定了指令的时候  还没有插入到DOM中去,这时候, 调用focus方法 没有作用
// 因为一个元素 只有插入DOM 之后才能 获取焦点
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

全局指令

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义私有指令</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p v-fontweight='900' v-fontsize=50>
            这是一个段落标签
        </p>
    </div>
    <script >
        new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },

            //自定义私有过滤器
            filters:{},
            //自定义私有指令
            directives:{
                'fontweight':{
                    bind:(el,binding)=>{
                        el.style.fontWeight=binding.value;
                    },
                   
                },
                'fontsize':{
                    bind:(el,binding)=>{
                        console.log(binding);
                        el.style.fontSize=binding.value+'px';
                }
                }
            }
        })
    </script>
</body>
</html>

自定义私有指令

Floatwor青舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-Study2

目录v-model关于v-model的计算器小案例给元素设置样式v-for循环v-if与v-show员工管理系统小demo定义全局过滤器定义私有过滤器自定义指令v-model在vue的指令中，v-bind只能实现数据的单向绑定，也就是从M（model）自动绑定到V（view），无法实现双向绑定。使用v-model，可以实现表单元素和model中数据的双向绑定。注意：v-model只能运用在表单元素中。<body> <!-- v-bind 指令只能实现数据的单向绑定从M
复制链接

扫一扫

专栏目录