Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法
2024-10-20 07:53:20
课程地址:
https://study.163.com/course/courseMain.htm?courseId=1004711010
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Tutorials</title>
<link href="styles.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Multiple Vue instances</h1>
<div id="vue-app-one">
<h2>{{ title }}</h2>
<p>{{ greet }}</p>
<!--这里会同时在data和couputed里查找变量或者方法名,这两处的变量名不能冲突-->
<!--初始化时会调用couputed里的test方法,并拿到test方法return回来的字符串显示出来-->
<div v-text="test"></div>
<button >{{test}}</button>
<button @click="test()">test</button>
</div>
<div id="vue-app-two">
<h2>{{ title }}</h2>
<p>{{ greet }}</p>
<!--点击时会调用methods里的changeTitle方法-->
<button v-on:click="changeTitle">Change App One Title</button>
</div>
</body>
<script type="text/javascript">
var one = new Vue({
el: '#vue-app-one',
data: {
// 初始化时后自动执行赋值,会被最外层的js调用,
title: 'Vue App One',
},
//计算方法
computed: {
greet: function(){
return 'Hello, from app one :)';
},
//初始化时被body里的div和button调用执行
test(){
console.log(111111);
return 'test :)';
},
},
//初始化时,会自动执行 只是初始化时会执行一次
mounted(){
console.log('自动执行');
},
methods:{
//初始化时后自动执行,会被最外层的js调用,
methodstest1(){
console.log('自动执行1');
//可以用用下面的methodstest2()方法
//this.methodstest2();
},
//初始化时后自动执行,会被最外层的js调用,
methodstest2(){
console.log('自动执行2');
},
}
});
var two = new Vue({
el: '#vue-app-two',
data: {
title: 'Vue App Two'
},
computed: {
greet: function(){
return 'Yo dudes, this is app 2 speaking to ya';
},
},
methods: {
changeTitle: function(){
one.title = 'Title Changed';
},
}
});
// 初始化时可以自动调用执行操作one实例里methods下的方法
one.title = 'Changed from outside';
one.methodstest1();
one.methodstest2();
</script>
</html>
最新文章
- EF Code First 一对多、多对多关联，如何加载子集合？
- leetcode 155
- int型整数中2进制中含有1的个数。
- (转帖)C++中自己实现的split函数
- JS综合练习
- mysql 开发进阶篇系列 48 物理备份与恢复(xtrabackup 的增量备份与恢复，以及备份总结)
- DLCI 简介
- 浅析Linux服务器集群系统技术
- Noxim Overview
- Jfrog Maven jenkins pipeline 流水线 培训 简单实验
- MT【11】对数放缩题
- 在Windows安装运行Kafka
- Android--播放Gif的取巧办法
- 持续集成之三：搭建Maven私服Nexus
- Python3基础 set 删除list中的重复项
- 查看和修改mysql数据库的最大链接数据
- 一维的Haar小波变换
- Oracle中OEM的启动与关闭
- Ros学习——Python发布器publisher和订阅器subscriber
- 微信网页授权操作逻辑封装-C#实例