<!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. Hadoop集群(一) Zookeeper搭建

    作为Hadoop初学者,自然要从安装入手.而hadoop的优势就是分布式,所以,也一定要安装分布式的系统. 整体安装步骤,包括Zookeeper+HDFS+Hbase,为了文章简洁,我会分三篇blog ...

  2. vue 异步请求

    摘自 ECMAScript 6 简介: 大家习惯将 ECMAScript 6.0 简称为 ES6,它是 Javascript 语言的下一代标准,它的目标,是使得 Javascript 语言可以用来编写 ...

  3. html+js自定义颜色选择器

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>te ...

  4. OpenCV批量读入（处理）

    #include <windows.h> #include <iostream> #include <opencv2/opencv.hpp> using names ...

  5. Animator状态快速切换问题

    [Animator状态快速切换问题] 事情是这样的,我尝试在一帧内多次切换一些状态(当前状态为Idle的情况下): public Animator animator; void OnEnable() ...

  6. js 中的原型链与继承

    ECMAScript中将原型链作为实现继承的主要方法,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 1.原型链 先回忆一下构造函数和原型以及实例的关系:每个构造函数都有一个原型对 ...

  7. smtp扫描

    nc扫描 nc -nv ip号 25 nmap扫描

  8. 更新linux下python版本

    # 安装所有的开发工具包 yum groupinstall -y "Development tools" # 安装其它的必需包 yum install -y zlib-devel ...

  9. python 函数的动态参数 命名空间,作用域以及函数嵌套,global和nonlocal (重点)

    *** 坚持坚持,即使你不太强*** 1.函数的动态传参 2.函数的命名空间及作用域 3.函数嵌套 4.global和nonlocal关键字 一.函数的动态传参 1. *args: 位置参数动态传参, ...

  10. Pandas汇总和处理缺失数据

    汇总的函数 方法 说明 count 非NA的值数量 describe 针对Series和DataFrame列计算汇总统计 min.max 计算最小值和最大值 argmin.argmax 计算能够获取到 ...