vue 实例化几种方式_Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法...

课程地址:

VueJS Tutorials

Multiple Vue instances

{{ title }}

{{ greet }}

{{test}}

test

{{ title }}

{{ greet }}

Change App One Title

var one = new Vue({

el: '#vue-app-one',

data: {

// 初始化时后自动执行赋值,会被最外层的js调用,

title: 'Vue App One',

},

//计算方法

computed: {

greet: function(){

return 'Hello, from app one :)';

},

//初始化时被body里的div和button调用执行

test(){

console.log(111111);

return 'test :)';

},

},

//初始化时,会自动执行 只是初始化时会执行一次

mounted(){

console.log('自动执行');

},

methods:{

//初始化时后自动执行,会被最外层的js调用,

methodstest1(){

console.log('自动执行1');

//可以用用下面的methodstest2()方法

//this.methodstest2();

},

//初始化时后自动执行,会被最外层的js调用,

methodstest2(){

console.log('自动执行2');

},

}

});

var two = new Vue({

el: '#vue-app-two',

data: {

title: 'Vue App Two'

},

computed: {

greet: function(){

return 'Yo dudes, this is app 2 speaking to ya';

},

},

methods: {

changeTitle: function(){

one.title = 'Title Changed';

},

}

});

// 初始化时可以自动调用执行操作one实例里methods下的方法

one.title = 'Changed from outside';

one.methodstest1();

one.methodstest2();