<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link rel="stylesheet" type="text/css" href="vue.css">
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
     <style type="text/css">
         .cr{
             color:red;
         }
     </style>
 </head>
 <body>
     <h3>初始化多个Vue 实例对象</h3>
     <div id="vue-app-one">
         <h2 id ='colorred' v-bind:class="{cr:ended}">{{ msg }}</h2>
         <p>{{ greet }}</p>
     </div>

     <div id="vue-app-two">
         <h2>{{ msg }}</h2>
         <p>{{ greet }}</p>
         <button v-on:click="changMsg" >修改vmOne.msg信息</button>
     </div>

     <script src="app.js"></script>
 </body>
 </html>

HTML

 var vmOne=new Vue({
     el:'#vue-app-one',
     data:{
         msg:'你妹的',
         ended:false
     },
     methods:{

     },
     computed:{
         greet:function(){
             return 'hello world！';
         }
     }
 });

 var vmTwo=new Vue({
     el:'#vue-app-two',
     data:{
         msg:'你哥的'
     },
     methods:{
         changMsg:function(){
             vmOne.msg='修改消息';
             vmOne.ended=true;
         }
     },
     computed:{
         greet:function(){
             return 'hello world！';
         }
     }
 });

Vue.js

Vue 初始化多个Vue 及之间的相互修改的更多相关文章

  1. vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法

     <div id="main" > <button id='but1' type="button" v-on:click="save ...

  2. vue子组件，同级组件之间的相互引用，以及传值交互

    博客地址:http://blog.csdn.net/wang_meiwei/article/details/75948844

  3. vue 2.0源码学习笔记—new Vue ( Vue 初始化过程 )

    new Vue(Vue 初始化) 一个vue实例化到底经历了什么?已下是博主自己的总结,不正确的地方请指出,谢谢~ 一.简述 从使用角度来看,挂载的顺序如下 1. $slots 2. $scopedS ...

  4. vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

    vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...

  5. Vue初始化过程

    用vue也有一两年了,始终对vue一知半解,不怎么了解内部的执行过程,最近在看vue源码,还是不少收获的,其中不乏浏览器事件轮询机制.闭包.设计模式等,还是非常值得一读.本篇简要记录下vue的初始化过 ...

  6. 无法执行vue初始化命令

    无法执行vue初始化命令:https://www.jianshu.com/p/9eb3cf854aa8 今天vue 初始化项目时提示错误 执行命令: npm install -g vue-cli 执行 ...

  7. 百度地图的初始化应当在vue的mounted()函数里执行

    今天使用百度地图出现了一个问题,百度地图初始化后宽.高都是0,但是地图容器宽高都设置好的, 一开始怎么都排除不出问题,后来无语了,把布局直接复制进入百度地图的示例里运行发现没有问题, 所以想到不是百度 ...

  8. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

  9. vue初始化页面闪动问题

    使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们 ...

随机推荐

  1. [PHP]PHP的session机制，配置与高级应用

    ---------------------------------------------------------------------------------------------------- ...

  2. Ajax接收后台发送过来的布尔值以及指定的字符串

    后台: aContext.getResponse().getWriter().println("" + result); 前端: $.ajax({ url:encodeURI(en ...

  3. Jupyter notebook 文件路径

    Jupyter notebook 文件路径 1. 默认工作路径:C:\Users\think 2. 修改工作路径: C:\Users\think\.jupyter路径下,无配置文件 打开命令提示符:( ...

  4. Java学习01 (第一遍)

    java se - 桌面 java ee - 网页 Jdk :Jre 区别Jdk-开发环境必要Jre-运行环境需要Jdk包含Jre,安装完Jdk就可以了 Javac Demo1.java-Javac ...

  5. 吴裕雄 08-MySQL创建数据表

    MySQL 创建数据表创建MySQL数据表需要以下信息:表名表字段名定义每个表字段 语法以下为创建MySQL数据表的SQL通用语法:CREATE TABLE table_name (column_na ...

  6. mab算法

    https://zhuanlan.zhihu.com/p/21388070?refer=resyschina 专治选择困难症——bandit算法 改善:https://zhuanlan.zhihu.c ...

  7. centos6 7 yum安装mongodb 3.6

    配置MongoDB的yum源 # 编辑文件 vim /etc/yum.repos.d/mongodb-org-3.6.repo # 添加以下内容 [mongodb-org-3.6] name=Mong ...

  8. pyhanlp python 脚本的demo补充

    java demo https://github.com/hankcs/HanLP/tree/master/src/test/java/com/hankcs/demo github python de ...

  9. linux shell 学习笔记01

    1.命令历史记录history !$     :调用上一条命令的执行结果 !100   :运行history记录里的第100条命令 !ser   :调用以ser开头的最后一次执行的命令 ctrl+r  ...

  10. Python __init__ 特殊方法

    在Python中有很多以双下划线开头且以双下划线结尾的固定方法.他们会在特定的时机被触发执行. __init__ 就是其中之一,它会在实例化之后自动被调用.以完成实例的初始化. >>> ...