<!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. 编译Linux内核（Mac OS平台）

    操作系统第一次实验需要编译Linux内核,我之前在Mac上一直使用的都是Parallels Desktop这个软件,所以这次也将课程网站上提供的Ubuntu安装在了PD上,但是编译完内核后无法进入Ub ...

  2. Myeclipse2017 安装反编译插件和SVN插件

    亲测有效 2018年1月22日10:36:33 https://www.cnblogs.com/liuyk-code/p/7519886.html

  3. Struct2.0学习笔记1

    为了更好的配合队友写项目 现在学习如下 1.目录 2. 3. Struct2-Action 配置环境 4. 改action 名字 不用重启服务器(从上面粘贴) 改成true 即开发模式 5.想看源码 ...

  4. Centos7.x Docker桥接网络

    基于Centos7.x构建Docker桥接网络, 配置bridge桥接网络可以直接设置网卡配置文件: 自定义桥接网络设置如下: 关掉docker0 ifconfig docker0 down 删除do ...

  5. js高级-原型链

    JavaScript是基于原型的面向对象的语言(相当于一个基类,父类),而不是像Java通过类模板构造实例,通过原型实现属性函数的复用 函数都有 prototype属性 指向函数的原型对象 只有函数根 ...

  6. asyncio的核心概念与基本架构

    https://blog.csdn.net/qq_27825451/article/details/86218230    虽然有部分运行错误,但是还是有参考价值.

  7. redis 存储java对象 两种方式

    根据redis的存储原理,Redis的key和value都支持二进制安全的字符串 1.利用序列化和反序列化的方式存储java对象我们可以通过对象的序列化与反序列化完成存储于取出,这样就可以使用redi ...

  8. Centos7 安装mysql5.7.24

    从mysql官网下载 mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz 拷贝到Centos的/opt目录下 1. 解压缩 tar -xzvf mysql-5.7.2 ...

  9. 重工单001800020505在IN表IN_SFCHEADER被过滤 TEMP_REMOVED_ID_IN_DATA

    select * from SAP_AFKO WHERE AUFNR='001800020505';  ---有数据SELECT * FROM IN_SFCHEADER WHERE MO_ID ='0 ...

  10. .resources文件转为可视化.resx文件

    ResGen.exe启动闪退.--方法不对 参考:http://www.opdown.com/soft/101205.html 在cmd中启动ResGen.exe. 打开cmd:输入 C:\Windo ...