<!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搜索中的sql注入

    ----------------------------------------------------------------------------------------- 防止查询的sql攻击 ...

  2. Structs复习 ActionMethod

    action在执行的是时候 可以不执行excute方法 可以由自己制定 可以在action标签里指定  也可以在方法里动态指定 推荐使用后者 jar包 web.xml <?xml version ...

  3. Android计时器和倒计时

    Android计时器和倒计时 计时器两个核心类 Timer 和 TimerTask 1) Timer核心方法 Java代码  //Schedules the specified task for ex ...

  4. 学习JS的心路历程-类型

    前言 之前学JS时候都是靠着谷狗一路跌跌撞撞的学过来,从来没有去翻过MDN的文件,导致留了许多技术债给自己. 最近有幸遇到一位前辈并开始从头学JS,前辈表示学程序不看文件是想作死自己?于是我的第一份功 ...

  5. jquery val() text() html()的区别

    value()主要用在表单元素上,如果其他的元素获取value是通过attract()的方法,text()是获取元素的纯文本,如果text(“content”)就会更改元素的文本内容:html()获取 ...

  6. iptables禁止别人，允许自己

    这里举个例子,以ping为案例:禁止别人ping自己,但允许自己ping别人. [root@localhost ~]# iptables -A INPUT -p icmp --icmp-type 8 ...

  7. HTTP 协议 详解

    一.HTTP简介 1.HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相 ...

  8. AssetBundle 策略

    [AssetBundle 策略] 1.Logical Entity Grouping.按逻辑功能分. Examples Bundling all the textures and layout dat ...

  9. flex-direction

    [flex-direction] The flex-direction CSS property specifies how flex items are placed in the flex con ...

  10. Excel表格如何保护单元格不被修改

    Excel如何保护单元格不被修改  有时使用Excel时希望保护单元格不被修改,这可以叫做单元格的“写保护”即把光标定位在一个不允许输入数据的区域内时,是无论如何也无法在里面输入数据的.下面咱们就一起 ...