Vue和Jquery.js一起使用

1、下载并引入jquery框架下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。1<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js">&a

xiaohanzhu000

8645人浏览 · 2018-07-03 12:33:15

xiaohanzhu000 · 2018-07-03 12:33:15 发布

1、下载并引入jquery框架

下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。

  
        1
       
        <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>

试着作一个案例，在DOM被挂载后修改里边的内容。

  
        1
       
        2
       
        3
       
        4
       
        5
       
        6
       
        7
       
        8
       
        9
       
        10
       
        11
       
        12
       
        13
       
        14
       
        15
       
        16
       
        17
       
        18
       
        19
       
        20
       
        21
       
        22
       
        23
       
        24
       
        25
       
        26
       
        27
       
        28
       
        29
       
        <!DOCTYPE html>
       
        <html lang="en">
       
        <head>
       
            <meta charset="UTF-8">
       
            <script type="text/javascript" src="../assets/js/vue.js"></script>
       
            <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
       
            <title>Early Examples Demo</title>
       
        </head>
       
        <body>
       
            <h1>Early Examples Demo</h1>
       
            <hr>
       
            <div id="app">
       
                {{message}}
       
            </div>
       
            <script type="text/javascript">
       
                var app=new Vue({
       
                    el:'#app',
       
                    data:{
       
                        message:'hello Vue!'
       
                    },
       
                    //在Vue中使用jQuery
       
                    mounted:function(){
       
                        $('#app').html('我是jQuery!');
       
                    }
       
                })
       
            </script>
       
        </body>
       
        </html>