首页 > 代码库 > vue11 vue实例方法

vue11 vue实例方法

2024-10-03 17:16:39   215人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
    </script>
</head>
<body>
    <div id="box">
        {{a}}
    </div>
    <script>
        var vm=new Vue({
            el:‘#box‘,
            data:{
                a:1
            }
        });
        console.log(vm.$el);//div元素
        vm.$el.style.background=‘red‘;//元素变红
        console.log(vm.$data.a);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

    </script>
</head>
<body>
    <div id="box">
        {{a}}
    </div>
    <script>
        var vm=new Vue({
            el:‘#box‘,
            data:{
                a:1
            }
        });

        console.log(vm.$data.a);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
    </script>
</head>
<body>
    <div id="box">
        <span v-text="a"></span>
    </div>
    <script>
        //angular.bootstrap
        var vm=new Vue({
            data:{
                a:1
            }
        });
        vm.$mount(‘#box‘); //手动挂载

        
        var vm=new Vue({
            data:{
                a:1
            }
        }).$mount(‘#box‘);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
    </script>
</head>
<body>
    <div id="box">
        <span v-text="a"></span>
        <br>
        {{aa}}
    </div>
    <script>
        var vm=new Vue({
            aa:11, //自定义属性,
            show:function(){//自定义方法，不再methods里面，
                alert(1);
            },
            data:{
                a:1
            }
        }).$mount(‘#box‘);

        vm.$options.show();//自定义方法
        console.log(vm.$options.aa);//自定义属性,
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
    </script>
</head>
<body>
    <div id="box">
        <span v-text="a"></span>
    </div>
    <script>
        var vm=new Vue({
            data:{
                a:1,
                b:2
            }
        }).$mount(‘#box‘);

        console.log(vm.$log());//{a:1,b:2}打印data
    </script>
</body>
</html>

 

vue11 vue实例方法


联系
我们