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

POOPE

课程地址:
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>

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

相关帖子

教你VUE中的filters过滤器2种用法

Glide源码解析二---into方法

【FAQ】接入HMS Core推送服务，服务端下发消息常见错误码原因分析及解决方法

K8s提权之RBAC权限滥用

apple 为什么要改 objc

C++引用10分钟入门教程

详解 SSL（二）：SSL 证书对网站的好处

开源 | WLock：高可用分布式锁设计实践

uniapp & vue 父子、子父、兄弟组件之间的传值

vue图片剪裁上传组件

POOPE LV4