Vue.js基本知识总结

一、v-cloak

当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码,使用v-cloak能够解决插件表达式的闪烁问题。

二、v-text

  1. 默认v-text是没有闪烁问题的
  2. v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的占位符,不会把整个元素的内容清空

三、v-html

  1. v-html不仅可以渲染数据,而且可以解析标签。 
  2. 如果要输出真正的 HTML,需要使用v-html指令,v-text仅渲染标签,不能解析 HTML 代码。

四、v-bind

  1. vue中提供的用于绑定属性的指令,当作Js表达式解析执行
  2. v-bind可以被简写为   :要绑定的属性

  3. v-bind中可以写合法的js表达式 

五、v-on: vue中提供了v-on事件绑定机制 ,缩写是@

在Vue中使用事件绑定机制为元素处理函数的时候,如果添加了小括号,就可以给函数传参了

 <div id="app">
        <!-- 使用v-cloak能够解决插件表达式的闪烁问题 -->
        <p v-cloak>{{msg}}</p>
        <h1 v-text="msg"></h1>
        <!-- 默认v-text是没有闪烁问题的· -->
        <!-- v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的占位符,不会把整个元素的内容清空 -->
        <div v-html="msg2"></div>

        <!-- v-bind是vue中提供的用于绑定属性的指令,当作Js表达式解析执行 -->
        <!-- v-bind可以被简写为:要绑定的属性 -->
        <!-- v-bind中可以写合法的js表达式 -->
        <input type="button" value="按钮" v-bind:title="mytitle+'123'">
        <input type="button" value="按钮" :title="mytitle+'123'">

        <!-- vue中提供了v-on事件绑定机制 -->
        <input type="button" value="按钮" @click="show">

    </div>

 

 var vm=new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈哈哈哈哈哈哈</h1>',
                mytitle:'自己定义'
            },
            methods:{//这个methods中定义了当前vue实例所有可用的方法
                show:function(){
                    alert('msg');
                }
            }
        })

注意在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问,这里的this,就表示我们new出来的vue实例对象。

简单的跑马灯案例:

 <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">

        <h1>{{msg}}</h1>
    </div>
var vm=new Vue({
        el:'#app',
        data:{
            msg:'猥琐发育,别浪',
            intervalId:null
        },
        methods:{
            lang(){ 
                if(this.intervalId!=null)
                {
                    return;
                }             
                this.intervalId=setInterval(()=>{
                    console.log(this.msg);
                    //获取头的一个字符
                    var start=this.msg.substring(0,1);
                    //获取所有得到的字符串,并复制给this.msg
                    var end=this.msg.substring(1);

                    this.msg=end+start;
                },400)
            },
            stop(){
                clearInterval(this.intervalId);
                //每当清除要重新把定时器设置为Null
                this.intervalId=null;
            }   
                //vm实例会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把
                //最新的数据从data上同步到页面中去,好处:程序员只需要关心数据,而不需要考虑如何渲染dom页面     
        }
    })
 //1.给浪起来按钮绑定一个点击事件
    //2.在按钮的事件处理函数中,写相关的业务逻辑代码,拿到msg字符串,然后调用字符串的substring来进行字符串的截取操作
    //把第一个字符截取出来,放到最后一个位置即可
    //3.为了实现点击下按钮,自动截取的功能,需要把2步骤中的代码放到一个定时器中来截取

六、事件修饰符

默认情况:不使用事件修饰符,button时触发事件,则会有冒泡机制,先执行button的绑定事件,再执行外层div的绑定事件。

<div class="inner" @click="div1handler">
       <input type="button" value="戳他" @click="btnhandler">
</div>
               btnhandler(){
                   console.log('这是触发了btn的点击事件');
               },
               div1handler(){
                   console.log('这是触发了Inner div的点击事件');
               },

 stop:阻止冒泡,只会执行btn绑定的事件,不会再冒泡执行上级的事件了

        <div class="inner" @click="div1handler">
            <input type="button" value="戳他" @click.stop="btnhandler">
        </div>

prevent:使用prevent阻止默认行为

eg:阻止a链接跳转

<a href="http://www.baidu.com" @click.prevent="linkclick">百度</a>

capture:实现捕获触发事件的机制,capture先执行父级的函数,再执行子级的触发函数(一般用法),即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。

        <div class="inner" @click.capture="div1handler">
            <input type="button" value="戳他" @click="btnhandler">
        </div>

此时控制台输出情况:

self:使用self实现只有点击当前元素时候,才会触发事件处理函数

点击button只会执行btnhandler函数,不会再执行div1handler,只有点击div时才执行div1handler

        <div class="inner" @click.self="div1handler">
            <input type="button" value="戳他" @click="btnhandler">
        </div>

once: 使用.once只触发一次事件处理函数

 <a href="http://www.baidu.com" @click.prevent.once="linkclick">百度</a> 

stop与self区别:

self只会阻止自己身上冒泡行为的触发,并不会阻止真正的冒泡行为

        <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="div1handler">
                <input type="button" value="戳他" @click="btnhandler">
            </div>            
        </div>

 控制台输出:self只阻止了div1自己身上的冒泡行为,而不会组织button冒泡到最外层div的输出

stop:阻止了冒泡行为

        <div class="outer" @click="div2Handler">
            <div class="inner" @click="div1handler">
                <input type="button" value="戳他" @click.stop="btnhandler">
            </div>            
        </div>

此时点击button只会输出这一个语句 ,因为它阻止了冒泡行为

七、v-model

  •  使用v-model指令,可以实现表单元素和model中数据的双向绑定
  • 注意v-model只能运用在表单元素中:input,select,checkbox,textarea等等

  • v-bind只能实现数据单向绑定,从M自动绑定到V中去,无法实现数据的双向绑定

 <input type="text" style="width:200px;" v-model="msg"> 

 八、vue中使用class样式

    <div id="app">
        <!-- 第一种使用方式,直接传递一个数据,注意,这里的class需要使用v-bind进行数据绑定 -->
        <h1 :class="['thin','red']">这是一个大标题</h1>
        <!-- 在数组中使用三元表达式 -->
        <h1 :class="['thin','red',flag ? 'active' :'']">这是一个大标题</h1>
        
        <!-- 在数组中使用对象来代替三元表达式,提高代码可读性 -->
        <h1 :class="['thin','red',{'active':flag}]">这是一个大标题</h1>

        <!-- 在为class使用v-bind绑定对象的时候,对象的属性是类名,可以带引号也可能不带,所以这里没写,属性的值是一个标识符 -->
        <h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个大标题</h1>

        <h1 :class="classObj">这是一个大标题</h1>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{red:true,thin:true,italic:false,active:false}

            },
            methods:{

            }
        })
    </script>

九、vue中使用内联样式style

用法1:在 v-bind:style 直接设置样式

用法2:直接绑定到一个样式对象

用法3:v-bind:style 可以使用数组将多个样式对象应用到一个元素上

    <div id="app">
        <!-- 对象是无序键值对的集合 -->
        <!-- 如果属性里面有—,则必须加上单引号 -->
        <h1 :style="{color:'red','font-weight':200}">张子枫</h1>

        <h1 :style="styleObj1">这是一个大标题</h1>
        
        <h1 :style="[styleObj1,styleObj2]">这是一个大标题</h1>

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                styleObj1:{color:'red','font-weight':200},
                styleObj2:{'font-style':'italic'}
            },
            methods:{

            }
        })
    </script>

十、v-for指令

用法1:v-for循环普通数组

    <div id="app">
        <p v-for="(item,i) in list">索引值:{{i}} 每一项:{{item}}</p>
    </div>
        var vm=new Vue({
           el:'#app',
           data:{
               list:[1,2,3,4,5]
           },
           methods:{}
        });

 显示:

用法2:v-for循环对象

在遍历对象身上的键值对的时候,除了有val,key在第三个位置还有一个索引

    <div id="app">
        <!-- 注意,在遍历对象身上的键值对的时候,除了有val,key在第三个位置还有一个索引, -->
        <p v-for="(val,key,i) in user">键{{val}}-----值{{key}}----索引{{i}}</p>
    </div>
        var vm=new Vue({
           el:'#app',
           data:{
               user:{
                   id:1,
                   name:'李易峰',
                   gender:'男'
               }
           },
           methods:{}
        });

用法3:v-for循坏对象数组

    <div id="app">
        <p v-for="(user,i) in list">{{user.id}}  ---名字  {{user.name}}---索引{{i}}</p>
    </div>
        var vm=new Vue({
           el:'#app',
           data:{
               list:[
                   {id:1,name:'zs1'},
                   {id:2,name:'zs2'},
                   {id:3,name:'zs3'},
                   {id:4,name:'zs4'},
               ]
           },
           methods:{}
        });

用法4:v-for迭代数字

in后面放普通数组,对象数组,还可以放数字, 注意如果使用v-for迭代数字,前面count值从1开始的

 <p v-for="count in 10">这是第{{count}}次循坏</p>

注意:v-for属性中key属性的使用

  •  v-for循坏的时候,key属性只能使用number或string
  •  注意:key在使用的时候,必须使用v-bind属性绑定的形式,指定Key的值

  • 在组件中使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串,数字类型 

    <div id="app">
        <div>
            <label>Id:
                <input type="text" v-model="id">
            </label>
            <label>name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>
        <!-- 注意v-for循坏的时候,key属性只能使用number或string -->
        <!-- 注意:key在使用的时候,必须使用v-bind属性绑定的形式,指定Key的值 -->
        <!-- 在组件中使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串,数字类型 -->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox" >
            {{item.id}}-----{{item.name}}
        </p>
    </div>
           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});
               }
           }
        });

十一、v-if和v-show指令

比较:

  • v-if的特点是每次都会重新删除或创建元素
  • v-show的特点,每次不会进行dom的删除和创建操作,只是切换了元素的display:none元素
  • v-if有较高的切换性能消耗,v-show有较高的初始渲染消耗
  • 如果元素涉及到频繁的切换,最好不要使用v-if,而是使用v-show

  • 如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if

<!-- <input type="button" @click="toggle" value="toggle"> -->
<h3 v-if="flag">这是v-if元素</h3>
<h3 v-show="flag">这是v-show的元素</h3>
<input type="button" @click="flag=!flag" value="toggle">
       var vm=new Vue({
           el:'#app',
           data:{
               flag:true,
           },
           methods:{
            //    toggle(){
            //        this.flag=!this.flag;
            //    }
           }
        });

十二、过滤器

过滤器调用格式,{{name|nameope}}

举例:

    <div id="app">
        <p>{{msg|msgFormat}}</p>
    </div>
        Vue.filter('msgFormat',function(msg){
            return msg.replace('00000','11111');
        });
        var vm=new Vue({
            el:"#app",
            data:{
                msg:'00000'
            },
            methods:{

            }
        });

过滤器可以串联:

{{ message | filterA | filterB }}

 在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript 函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

 这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

举例:

    <div id="app">
        <p>{{msg|msgFormat('加油油','123')|test}}</p>
    </div>
        //定义一个Vue全局过滤器,名字叫msgFormat
        Vue.filter('msgFormat',function(msg,arg1,arg2){
            //字符串的replace方法,第一个参数,除了可写第一个字符串之外,还可以定义一个正则
           // return msg.replace('加油','加油油');
            return msg.replace(/加油/g,arg1+arg2);

        })
        Vue.filter('test',function(msg){
            return msg+'=====';
        })

        var vm=new Vue({
           el:'#app',
           data:{
               msg:'一定要加油,考上研究生,顺利毕业,加油加油加油'
           },
           methods:{}
        });

全局过滤器:所有的vm实例都能共享

问题:如何定义一个私有的过滤器

  • 定义私有过滤器,过滤器有两个条件,【过滤器名称和处理函数】

  • 过滤器调用的时候采用的是就近原则,如果私有和全局过滤器名称一致,这时候优先调用私有过滤器

举例:

    <div id="app2">
        <p>{{dt|dateFormt}}</p>
    </div>
        var vm2=new Vue({
            el:"#app2",
            data:{
                dt:new Date()
            },
            methods:{

            },
            filters:{//定义私有过滤器,过滤器有两个条件,【过滤器名称和处理函数】
            //过滤器调用的时候采用的是就近原则,如果私有和全局过滤器名称一致,这时候优先调用私有过滤器
                dateFormt:function(dateStr,pattern=''){
                    var dt=new Date(dateStr);
                    //根据给定的字符串得到特定的时间

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

                    //私有
                    if(pattern.toLowerCase()==='yyyy-mm-dd')
                        return `${y}-${m}-${d}`;
                    else{
                        //padStart第一个参数表示填充完位数,第二个参数表示用什么填充
                        //padStart()用于头部补全,padEnd()用于尾部补全。
                        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}`;
                    }
                }

            }
        })

十三、自定义键盘修饰符

通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:

Vue.config.keyCodes.f2 = 113;

 使用自定义的按键修饰符

<input type="text" v-model="name" @keyup.f2="add">

十四、自定义全局指令

  • vue中所有的指令,在调用的时候,都v-开头
  • 自定义指令:使用Vue.directive(id,definition)注册全局自定义指令,使用组件的directives选项注册局部自定义指令。

        参数1:指令的名称,在定义的时候指令的名称前面不需要加v-前缀,但是在调用的时候必须在指令名称前加v-前缀来进行调用

        参数2:是一个对象,这个对象身上有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作

  • 钩子函数:

指令定义函数提供了几个钩子函数(可选):

  1. bind:每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
  2. inserted:inserted表示元素插入到DOM中的时候,会执行inserted函数,触发一次(和js行为有关的操作,最好在inserted中去执行,防止这个js行为不生效)
  3. updated:当VNode更新的时候,会执行updated,可能会触发多次
  4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
  5. unbind:只调用一次, 指令与元素解绑时调用。

注意:在每个函数中,第一个参数永远是el,表示被绑定指令的那个元素,这个el参数,是一个原生的js对象

自定义一个focus指令

        Vue.directive('focus',{
            bind:function(el){//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
                //注意,在每个函数中,第一个参数永远是el,表示被绑定指令的那个元素,这个el参数,是一个原生的js对象
                //在元素刚绑定了指令的时候,还没有插入到DOM中去,这时候调用focus方法,没有作用
                //因为一个元素只有插入DOM之后,才能获取焦点
                //el.focus();

            },
            inserted:function(el){//inserted表示元素插入到DOM中的时候,会执行inserted函数,触发一次
                el.focus();
                //和js行为有关的操作,最好在inserted中去执行,防止这个js行为不生效
            },
            updated:function(el){}//当VNode更新的时候,会执行updated,可能会触发多次

        })

自定义一个设置字体颜色的指令

       //自定义一个设置字体颜色的指令
        Vue.directive('color',{
            bind:function(el,binding){
                //样式,只要通过指令绑定了元素,不管这个元素有没有插入到页面中去,这个元素肯定有了一个内联的样式
                //将来元素肯定会显示到页面中去,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素
                el.style.color=binding.value;
                //和样式相关的操作,一般都可以在Bind中执行
                // console.log(binding.value);
                // console.log(binding.expression);
            },
            inserted:function(){
            }

        })

 钩子函数参数

 

函数简写:想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

十五、生命周期函数

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值