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 ...
随机推荐
- (转)Linux之split命令详解
Linux之split命令详解 原文:http://m.jb51.net/article/73632.htm Linux split命令用于将一个文件分割成数个,该指令将大文件分割成较小的文件,在默认 ...
- mysql日常使用总结（持续更新中）
记录一些日常的mysql常用的使用, 方便随用随查. 一.表结构 1.1 查看表结构 方式1: 可以查看建表语句,完整的表结构. show create table table_name; 方式2:可 ...
- mysql双主互备
mysql主从同步使得数据可以从一个数据库服务器复制到其他服务器上,在复制数据时,一个服务器充当主服务器(master),其余的服务器充当从服务器(slave),备服务器从主服务器同步数据,完成数据的 ...
- flask之jinja2模板语言
一.jinja2简单介绍 Jinja2是Python里一个被广泛应用的模版引擎,他的设计思想来源于Django的模板引擎,并扩展了其语法和一系列强大的功能.其中最显著的一个是增加了沙箱执行功能和可选的 ...
- Linux常用操作2
第1章 find命令扩展 转自:https://www.cnblogs.com/clsn/p/7520333.html 1.1 方法一 |xargs 通过|xargs将前面命令的执行结果传给后面. [ ...
- Vue-mixins选项
Vue-mixins选项 Mixins用于: 1.已经写好了构造器,还要增加方法或者临时的活动时使用的方法,用混入能减少源代码的污染. 2.公用方法,用混入的方法可以减少代码量,实现代码重用.(使用全 ...
- Oracle 用户相关
1.查询所有未修改过密码的Oracle用户 SELECT * FROM dba_users_with_defpwd d, dba_users du WHERE du.account_status = ...
- 软件测试Lab 1 Junit and Eclemma
首先安装eclipse 然后下载hamcrest-core-1.3.jar,下载地址:http://mvnrepository.com/artifact/org.hamcrest/hamcrest-c ...
- Git 团队常用命令操作指南
命令如下: git clone -b <branch name> [remote repository address] 主要就是在clone的时候,后面添加branch的信息. 报错: ...
- logback的configuration
logback的<configuration>只有三个属性: 1.scan[boolean]:当scan被设置为true时,当配置文件发生改变,将会被重新加载.默认值为true. 2.sc ...