Vue.js基本知识总结

最新推荐文章于 2024-07-24 11:11:41 发布

不可以smirk

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量271

点赞数 2

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39512601/article/details/104861129

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、v-cloak

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

二、v-text

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

三、v-html

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

四、v-bind

vue中提供的用于绑定属性的指令，当作Js表达式解析执行
v-bind可以被简写为 :要绑定的属性
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：是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

钩子函数：

指令定义函数提供了几个钩子函数（可选）：

bind：每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
inserted：inserted表示元素插入到DOM中的时候，会执行inserted函数,触发一次（和js行为有关的操作，最好在inserted中去执行，防止这个js行为不生效）
updated：当VNode更新的时候，会执行updated,可能会触发多次
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
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
})

十五、生命周期函数

不可以smirk

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js基本知识总结

1.v-vloak：使用v-cloak能够解决插件表达式的闪烁问题当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。2.v-text默认v-text是没有闪烁问题的 v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会把整个元素的内容清空 3.v-html：v-html不仅可以渲染数据，而且可以...
复制链接

扫一扫