Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法
课程地址:
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>
[Haima的博客]
http://www.cnblogs.com/haima/
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构