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>
Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法的更多相关文章
- Vue2.0 探索之路——vuex入门教程和思考
Vuex是什么 首先对于vuex是什么,我先引用下官方的解释. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可 ...
- 1.0 Android基础入门教程
1.0 Android基础入门教程 分类 Android 基础入门教程 本教程于2015年7月开始撰写,耗时半年,总共148节,涵盖了Android基础入门的大部分知识,由于当时能力局限,虽已竭尽全力 ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- Vue2.0 【第二季】第3节 Vue.set全局操作
目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...
- Vue2.0 【第二季】第2节 Vue.extend构造器的延伸
目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- 2018最新Python小白入门教程，30天学会Python
随着Python的技术的流行,Python在为人们带来工作与生活上带来了很多的便捷,因为Python简单,学起来快,也是不少新手程序员入门的首选语言.作为一名Python爱好者,我也想跟大家分享分享我 ...
- lucene3.6.0 经典案例 入门教程
第一步:下载并导入lucene的核心包(注意版本问题): 例如Lucene3.6版本:将lucene-core-3.6.0.jar拷贝到项目的libs 文件夹里. 例如Lucene4.6版本:将l ...
随机推荐
- .net 记录
Stack Overflow 2016最新架构探秘 http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi#rd N ...
- Python3.5 调用Ansible 执行命令
ansible.py #!/usr/bin/env python3 # -*- coding: utf-8 -*- import os import tempfile from collections ...
- 处理 wait millis 60009, active 50 ，maxactive 200 异常 过程
处理 wait millis 60009, active 50 ,maxactive 200 异常 过程2018年04月19日 16:48:46 守望dfdfdf 阅读数:1910 标签: druid ...
- java-jsch实现sftp文件操作
(曾在天涯)的文章详细讲解了jsch中的函数以及用法 http://www.cnblogs.com/longyg/archive/2012/06/25/2556576.html http://www. ...
- 《C++面向对象程序设计》之变量的生存期
<C++面向对象程序设计>之变量的生存期 静态生存期 (1)全局静态生存期:在函数体外声明,作用域从声明处开始到文件结尾处结束,称其有文件作用域,相当于全局变量 . (2)局部静态生存期: ...
- 爱加密so保护简单脱壳测试
1. 最近研究so文件的保护,在网上搜索发现爱加密支持对so文件的保护,然后联系客户,本来是想让客户保护一个自己的so文件来做测试的,结果客户各种不愿意,说要签什么XX协议后才能给so保护,各种蛋 ...
- 【Mood-13】Android --如何从初级工程师进化为高级工程师
一 明确自我定位 现在你是初级工程师,但是你想当个高级工程师,所 以,你就要给自己定个目标,即:我是要成为高级工程师的男人.有了这个定位,并且努力朝着这个目标去努力,然后内心深处就会有一个感觉,这个 ...
- swagger + springboot
参考文章: https://blog.csdn.net/xupeng874395012/article/details/68946676/ https://blog.csdn.net/hry2015 ...
- SpringBoot常用应用属性配置表
#========================================= #COMMON SPRING BOOT PROPERTIES # #This sample file is pro ...
- 分布式缓存memcached介绍，win7环境安装，常用命令set,get,delete,stats， java访问
一.memcached是什么? 二.memcached不互相通信的分布式 三.安装步骤 四.本文介绍的命令主要包括: 存入命令(Storage commands) 取回命令(Retrieval com ...