课程地址:
https://study.163.com/course/courseMain.htm?courseId=1004711010
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Tutorials</title>
<link href="styles.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Multiple Vue instances</h1>
<div id="vue-app-one">
<h2>{{ title }}</h2>
<p>{{ greet }}</p>
<!--这里会同时在data和couputed里查找变量或者方法名,这两处的变量名不能冲突-->
<!--初始化时会调用couputed里的test方法,并拿到test方法return回来的字符串显示出来-->
<div v-text="test"></div>
<button >{{test}}</button>
<button @click="test()">test</button>
</div>
<div id="vue-app-two">
<h2>{{ title }}</h2>
<p>{{ greet }}</p>
<!--点击时会调用methods里的changeTitle方法-->
<button v-on:click="changeTitle">Change App One Title</button>
</div>
</body>
<script type="text/javascript">
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();
</script>
</html>