Vue实例的简单方法

来源：互联网发布：油墨配色软件编辑：程序博客网时间：2024/05/29 11:33

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/Vue.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data: {                    a: 1,                },            });            vm.$el.style.background='red';        }    </script></head><body><div id="box">    {{a}}</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/Vue.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data: {                    a: 1,                },            });            console.log(vm.$data.a);        }    </script></head><body><div id="box">    {{a}}</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/Vue.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){//            var vm = new Vue({//                data:{//                    a:1//                }//            });//            vm.$mount('#box');            var vm = new Vue({                data:{                    a:1                }            }).$mount('#box');        }    </script></head><body><div id="box">    {{a}}</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/Vue.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                aa:11,                show:function(){                    alert(1);                },                data:{                    a:1                }            }).$mount('#box');            vm.$options.show();            console.log(vm.$options.aa);        }    </script></head><body><div id="box">    <span v-text="a"></span>    <br>    {{a}}</div></body></html>

0 0