Vue简介

最新推荐文章于 2026-01-07 11:30:37 发布

原创最新推荐文章于 2026-01-07 11:30:37 发布 · 892 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html

javascript 同时被 3 个专栏收录

28 篇文章

订阅专栏

html

27 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文详细介绍了Vue.js的核心概念，包括实例化对象、MVVM模式、元素绑定、v-html与v-text的区别、事件处理v-on/v-bind、条件渲染v-if/v-show、v-model的双向绑定、v-pre与v-once的用法，以及事件监听和计算属性。同时讨论了自定义指令的全局与局部使用，以及指令简写的实践。

一、实例化对象

<script>
     // 第一步实例化对象
    new Vue({
        el:'#app',
        data:{
             msg:'hello vue'
        }
    })
</script>

二、绑定元素

     <body>
        <div id="app">
            <!-- 使用数据{{数据}} -->
            {{msg}}
            {{num}}
        </div>

        <!-- 外部不可以使用语法 -->
        {{msg}}
        <script src="js/vue.js"></script>
        <script>
            // 实例化对象
            new Vue({
                // 绑定元素，绑定该区域可以使用vue的语法
                el:'#app',
                // data内部书写数据
                data:{
                    // 书写数据
                    msg:'hello 小程序',
                    num:0
                }

            })
        </script>
    </body>

三、什么是MVVM

MVVM是一种设计模式，M指的是model数据层 V指的是view视图层 VM指的是控制层，把数据和视图联系起来

    <body>
        <!-- 指的是MVVM中的V -->
        <div id="app">
            {{msg}}
        </div>

        <script src="js/vue.js"></script>
        <script>
            // new Vue指的是VM把视图和数据联系起来。
            new Vue({
                el:'#app',
                // 指的是MVVM中的M
                data:{
                    msg:'hello'
                }
            })
        </script>
    </body>

四、绑定元素

在vue中el进行绑定元素，其中绑定的一般id，因为id是唯一的，即使有很多id但是只是绑定以一个id
其中el也可以绑定标签名/类名，其中不可以绑定body或者html(因为vue后面一般使用的是模块化开发，最终spa单页面开发，防止范围设置过大)
可以实例化多个对象，但是不建议这么做，因为在后期开发中一般情况下是一个页面是一个模块，如果外侧已经实例化在实例化内部标签也不会生效。

    <body>
        <main>
            <div class="box">
                {{msg}}
            </div>
            <div class="one">
                {{msg}}
            </div>
        </main>
        <script src="js/vue.js"></script>
        <script>
            new Vue(
                el:'main',
                data:{
                    msg:'hello'
                }
            })
            new Vue({
                el:'.one',
                data:{
                    msg:'sdljfdl'
                }
            })
        </script>
    </body>

五、v-html、v-text

在vue中变量一般可以作为标签的属性，当变量作为标签的属性的时候不需要{{}}
v-html作为标签的属性可以识别标签，xss风险可以通过识别html标签来攻击应用程序
v-text作为标签的属性不可以识别标签，把标签当做字符串

    <body>
        <div id="app">
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <div v-html="msg"></div>
            <div v-text="msg"></div>
            <div>
                {{msg}}
            </div>

            <!-- <script>
                for(var i=0;i>-10;i++){
                    alert(1)
                }
            </script> -->
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'<h1>jdlfjlsdjf</h1>'
                }
            })
        </script>
    </body>

六、v-on/v-bind

事件结构：v-on:事件类型click mouseenter mouseleave blur focus keydown keyup="方法"
属性结构：v-bind:属性="变量" 动态控制标签属性
v-bind:class="one" 添加class属性
v-bind:class="[one,two]" 如果有多个变量可以用数组的形式进行书写
如果控制多个属性的时候 {k:v,k:v}k代表的是类名 v是表达式如果v是true说明k这个类是存在的

七、v-for

v-for遍历代码，用来获取动态的标签
v-for="(item,index) in data中的数据" item代表的是数组中的元素 index数组下标item和index都可以自己命名

    <body>
        <div id="app">
            <ul>
                <li v-for="(it,index) in list" v-on:click="del(index)">
                    {{it}}-{{index}}
                </li>
            </ul>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    list:['这是天气','这是裙子','这是被子','这是被子','这是被子']
                },
                methods:{
                    del(n){
                       this.list.splice(n,1)
                    }
                }
            })
        </script>
    </body>

八、v-if/v-show

v-show="变量或者表达式"控制的是标签的显示与隐藏 true的时候显示 false的时候隐藏效率高
v-if="变量或者表达式"控制的是标签是否存在 true的时候存在 false的时候不存在

    <body>
        <div id="app">
            <button v-on:click="change()">按钮</button>
            <p v-show="1==1">show</p>
            <p v-if="show">if</p>
       </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    show:true
                },
                methods:{
                    change(){
                        this.show=!this.show
                    }
                }
            })
        </script>
    </body>

九、v-else

如果书写if-else语句所有的语句必须紧挨着

    <body>
        <div id="app">
            <button v-on:click="change()">按钮</button>
            <!-- show为真的时候执行代码 -->
            <!-- <p v-if="show">条件a</p> -->
            <!-- <p>sdfsd</p> -->
            <!-- if条件为假的时候执行 else需要紧挨着if语句否则就会报错-->
            <!-- <p v-else>条件b</p> -->
            <!-- 如果书写if-else语句所有的语句必须紧挨着 -->
            <p v-if="num=='A'">A</p>
            <p v-else-if="num=='B'">B</p>
            <p v-else-if="num=='D'">D</p>
            <p v-else-if="num=='F'">F</p>
            <p v-else>C</p>
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    show:true,
                    num:'A'
                },
                methods:{
                    change(){
                        var arr=['A','B','C','D','F']
                        // this.show=!this.show
                        var n=parseInt(Math.random()*arr.length);
                        this.num=arr[n];
                    }
                }
            })
        </script>
    </body>

十、v-model

v-model获取表单元素的值 v-model="变量" v-model中的变量会随着表单元素值的变化而变化变量中存储的是表单元素的值
v-model双向绑定,即可以获取表单的值，修改表单的值，在表单中的值变化，其中的值也跟着变化

    <body>
        <div id="app">
            <textarea name="" v-model="msg" id="" cols="30" rows="10"></textarea>
            <button v-on:click="send">发布</button>
            <ul>
                <li v-for="(item,index) in list" v-on:click="del(index)">
                    {{item}}
                </li>
               
            </ul>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    list:['昨天天气很好','快要国庆了'],
                    msg:''
                },
                methods:{
                    send:function(){

                        if(this.msg==''){
                            alert('请输入数据，才可以发布')
                        }else{
                            this.list.unshift(this.msg);
                            this.msg=''
                        }
                    },
                    del(n){
                        this.list.splice(n,1)
                    }
                }
            })
        </script>
    </body>

十一、 v-clock

v-cloak绑定在标签身上，直到编译结束 v-cloak属于指令，同样也属于标签的属性在一些浏览器上，看不到中间渲染过程。浏览器已经处理

    </head>
    <body>
        <div id="app" v-cloak>
            {{Math.random()}}
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app'
            })
        </script>
    </body>
         <style>
            /* 解决用户可以看到中间的编译过程 */
            [v-cloak]{
                display: none;
            }
        </style>

十二、v-per/v-once

v-pre不解析代码，直接以插值{{}}的形式去展示即不读取其中变量，将其作为字符串处理
v-once 以数据初始值为准，后期数据变化也不会重新渲染

十三、冒泡和默认行为

默认行为eg:a标签的跳转 form表单的提交 v-on:事件类型(一般情况下是click).prevent
冒泡：父级和子级有同样的事件的时候，如果触发子级的事件，会把父级同样的事件也触发解决冒泡的方法 v-on:事件.sotp阻止冒泡

    <body>
        <div id="app">
            <!-- 默认行为eg:a标签的跳转 form表单的提交 v-on:事件类型(一般情况下是click).prevent -->
            <a v-on:click.prevent href="https://pages.tmall.com/wow/a/act/tmall/dailygroup/1570/wupr?wh_pid=daily-195370&ali_trackid=2:mm_47506526_14142864_111478500391:1632749023_137_261868679&union_lens=lensId:OPT@1624950594@21057729_07ee_17a569a5b84_40eb@01;eventPageId:20150318020004341;recoveryid:1632749023_137_261868679&muqid=wps_7723e37fe6c20ddc38f713d9731e2de1&bxsign=tbkfgL+nY8Pop5VMHEM17bIw/3SsBnyoatxizg+hZmBJN/P4s7hWFEoGgbIvteuk9wrpL+BQvjAH4JUm5C7IEcWaIuuL8q+st1e4a2gorybQhE=">百度</a>
            <form action="09v-pre和v-once.html" v-on:click.prevent>
                <input type="text">
                <button>提交</button>
            </form>

            <div v-on:click="div">
                <p v-on:click.stop="p"></p>
            </div>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                methods:{
                    p(){
                        console.log('点击了p.....')
                    },
                    div(){
                        console.log('点击了div')
                    }
                }
            })
        </script>
    </body>

十四、watch

watch监听事件

    <body>
        <div id="app">
            <button v-on:click="change()">按钮</button>
            {{msg}}
            {{num}}
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:0,
                    num:1
                },
                // watch放置所要监听的数据
                watch:{
                    // 监听格式
                    // 所要监听的变量(){
                    //     变量发生变化以后执行的方法
                    // }
                    // msg发生变化了会触发该方法
                    msg(){
                        console.log('msg发生变化了')
                    },
                    num(){
                        console.log('xxxx')
                    }
                },
                methods:{
                    change(){
                        this.msg++;
                        this.num--
                    }
                }
            })
        </script>
    </body>

十五、computed

普通算法：页面中只要有一个数据发生变化，就会促使整个页面重新更新渲染
computed计算属性：一般用来执行多个数据的计算，效率比较高。数据在缓存里面，如果数据没有变化，直接读取缓存数据，不会更新

    <body>
        <div id="app">
            <button v-on:click="change()">修改数据</button>
            <br>
            <!-- 页面中只要有一个数据发生变化，就会促使整个页面重新更新渲染 -->
            {{num}}
            <br>
            {{Math.random()}}
            <br>
            {{msg+Math.random()}}
            <br>
            {{t}}
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    num:0,
                    msg:0
                },
                methods:{
                    change(){
                        this.num++
                    }
                },
                computed:{
                    // t虽然写成的是函数的形式，但是是一个数据。直接在页面中使用不用加()
                    t(){
                        return this.msg+this.num+Math.random();
                    }
                }
            })
        </script>
    </body>

十六、全局指令

使用指令 v-指令名字:参数(参数当做常量处理)，其中参数不加引号作为常量处理，加上引号后作为变量处理。
Vue.directive('指令名字',钩子函数(钩子函数，对外提供接口，可以直接进行操作代码) bind
autofoucs可以自动聚焦，但是在一些手机上不兼容，可以通过获取标签.focus()聚焦，自定义一个全局指令v-focus实现聚焦

十七、局部指令

自定义局部指令,局部指令放在实例化对象里面的，所以只能在当前实例化对象内部使用
指令名字:{钩子函数}

    <body>
        <div id="app">
            <button v-color:red>按钮</button>
            <button v-color="red">按钮</button>
        </div>

        <div id="box">
            <button v-color:red>sajdlf</button>
        </div>
        <script src="js/vue.js"></script>
        <script src="js/library.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    red:'blue'
                },
                directives:{
                    color:{
                        // 钩子函数和全局指令定义的时候一样
                        inserted(el,obj){
                            console.log(obj)
                            if(obj.arg){
                                el.style.color=obj.arg
                            }else{
                                el.style.color=obj.value
                            }
                        }
                    }

                }
            })
            new Vue({
                el:'#box'
            })
        </script>
    </body>

十八、指令的简写