vue,js入門（14）例項化多個vue物件

阿新 • • 發佈：2019-02-14

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	
</head>
<body>
<div id="vue-one">
{{ title }}<br/>
{{ greet }}<br/>		
</div>

<div id="vue-two">
{{ title }}<br/>
{{ greet }}<br/>
<button @click="change">press</button>
</div>
	<script src="app.js"></script>
</body>

//app.js

var one=new Vue({
	el:"#vue-one",
	data:{	
		title:"i am one"
	},
	methods:{
	},
	computed:{
		greet:function(){return "hello one";}
	}
});
var two=new Vue({
	el:"#vue-two",
	data:{	
		title:"i am two"
	},
	methods:{
		change:function(){one.title="change one";}
	},
	computed:{
		greet:function(){return "hello two";}
	}  
});

two.title="change two"

效果圖：

1.多個物件可以以var命名，容器名跟著el改變即可

2.可以通過第二個vue物件對第一個vue物件的值進行改變

3.可以直接在外面把vue2的值直接改變

ps：寫外面的可以不用接任何符號

vue,js入門（14）例項化多個vue物件

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link

Vue2.0--14.小白入門教程--例項化多個vue物件,可初始化操作幾種方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueJS Tutorials</title> <link href="styles.c

vue.js入門（22）事件傳值（子向父傳值）

上一節講的是父向子傳值首先我們在Header.vue檔案先加入一個方法來改變title值，首先註冊一個事件methods:{ changetitle:function() { this.$emit("titlechange","子向父傳值");//

vue.js入門（13）實戰demo

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link

【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

建立多個Vue例項物件這裡在同一個js檔案中建立了兩個Vue例項物件，它們各自能完成前面學的那些功能，同時使用物件名稱也可以互相訪問，協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-

例項化多個vue物件

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <lin

vue-cli入門（三）——人員管理例項

前言在開始開發例項前，應首先了解一下vue-cli的專案結構。接著我們一起來實現一個小demo——人員管理，功能簡單，通過這個例項讓大家熟悉使用vue-cli開發專案的一些操作，加深對vue-cli專案結構的印象。http://www.jianshu.com/p/5d

vue.js入門（3-4）（methods，屬性繫結）

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <scri

vue-cli入門（二）——人員管理例項小demo

前言在開始開發例項前，應首先了解一下vue-cli的專案結構。接著我們一起來實現一個小demo——人員管理，功能簡單，通過這個例項讓大家熟悉使用vue-cli開發專案的一些操作，加深對vue-cli專案結構的印象。例項功能簡述人員管理專案，有兩個頁面，首頁和管理

vue-cli入門（三）——vue-resource登入註冊例項

<template> <div> <div class="login-wrap" v-show="showLogin"> <h3>登入</h3> <p v-show="s

vue-cli入門（二）——項目結構

常用作用寫到 www. 簡單的端口 server 標簽 emp 前言在上一篇項目搭建文章中，我們已經下載安裝了node環境以及vue-cli，並且已經成功構建了一個vue-cli項目，那麽接下來，我們來梳理一下vue-cli項目的結構。總體框架一個vue-c

Vue.js 學習（二）

blank -o 找到 type con 不能 tex ogg 分享計算屬性和監聽屬性 <div id="root"> <label>姓：</label><input v-model="firstName" type="

vue.js筆記（二）

ceo fad cli ani -s animate nbsp tran rip animate.css動畫 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

Vue.js 筆記（二）模板語法

指令 1. 以 v- 開頭常見有：v-bind(資料單向輸出),v-html(顯示html),v-model(資料雙向繫結),v-if(條件，是否插入元素)，v-on(事件) 2. 引數，指令後加冒號，如：v-bind:class='class1' 將

Vue.js 筆記（一）起步

快速入門 <!DOCTYPE html> <html lang="zh" dir="ltr"> <head> <meta charset="utf-8"> <title>vue test </titl

大資料入門（14）hadoop+yarn+zookeeper叢集搭建

1、右鍵clone虛擬機器，進入圖形介面，修改虛擬機器ip即可，相關環境變數配置都存在 2、叢集規劃：（必須設定主機名，配置主機名和ip的對映關係，每個檔案都需要配置對映關係）主機名 &

大資料入門（10）序列化機制，mr流量求和

public class FlowBean implements WritableComparable<FlowBean>{ private String phoneNB; private long u

vue.js總結---（2）指令

vue指令 1、插值表示式：{{}} 注意：不能在屬性節點中使用，只能在內容節點中使用 2、v-cloak 解決插值表示式閃爍問題 {{msg}} style裡需要設定：display：none；應用場景：網路比較卡時候可以在最外層的元素新增v-cloak，防止客戶看到插值表示式 3、

vue快速入門（一）

vue是什麼？是一個漸進式框架，什麼是漸進式？漸進式框架，入手簡單，引入js，很快上手達到效果，使用元件，甚至整個框架都可以慢慢用元件來搭建。由小到大，專注於每個小元件，拼拼和和成一個大的模組。 MVVM: M: V VM

大資料入門（23）kafka的第一個例項

匯入kafka下lib的jar #################生產者：直接右鍵執行，weekend05的consumer會接收到################################# public class ProduceTest { public static void

vue,js入門（14）例項化多個vue物件

相關推薦