<!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. iptables学习

    droidwall.sh #!/system/bin/sh IPTABLES=iptables BUSYBOX=busybox GREP=grep ECHO=echo # Try to find bu ...

  2. Delphi XE3通过ADOConnection 连接 MySQL 5.5.27 数据库

    Delphi XE3通过ADOConnection 连接 MySQL 5.5.27 数据库 unit Unit1; interface uses Winapi.Windows, Winapi.Mess ...

  3. MyBatis动态SQL中trim标签的使用

    My Batis 官方文档 对 动态SQL中使用trim标签的场景及效果介绍比较少. 事实上trim标签有点类似于replace效果. trim 属性 prefix:前缀覆盖并增加其内容 suffix ...

  4. Python模块和类.md

    模块的定义 代码的层次结构 对于python的层次结构一般为包->模块 包也就是文件夹,但是文件夹下必须有文件"init.py"那么此文件夹才可以被识别为包."in ...

  5. MS SQL大值数据类型varchar(max)、nvarchar(max)、varbinary(max)

    在MS SQL2005及以上的版本中,加入大值数据类型(varchar(max).nvarchar(max).varbinary(max) ).大值数据类型最多可以存储2^30-1个字节的数据. 这几 ...

  6. 利用原生态的(System.Web.Extensions)JavaScriptSerializer将mvc 前台提交到controller序列化复杂对象

    主要代码如下: public JsonResult Test() { string s = Request.Form.ToString(); JavaScriptSerializer jss = ne ...

  7. ELK日志平台

    1.ELK平台能够完美的解决我们上述的问题,ELK由ElasticSearch.Logstash和Kibana三个开源工具组成,不过现在还新增了一个Beats,它是一个轻量级的日志收集处理工具(Age ...

  8. Java读取.properties配置文件并连接数据库

    1.读取配置文件 //Properties集合 流对象读取键值对 public static void getNum() throws Exception { Properties p=new Pro ...

  9. 进制转换&数据类型（1）

    一: 进制转换 在计算机中, 数据都是以0和1来表示的 进制: 进位制 十进制: 数字由0~9这10个数字来表示, 逢10进1位 0 1 2 3 4 5 6 7 8 9 10 二进制: 数字由0和1这 ...

  10. 算法之二分查找PK线性查找

    列表查找(线性查找) 本质就是列表的index() 顺序查找 也叫线性查找,从列表第一个元素开始,顺序进行搜索,知道找到元素或搜索到列表最后一个元素为止. 以下是示例代码: def line_sear ...