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 ...
随机推荐
- HDU 5734 A - Acperience
http://acm.hdu.edu.cn/showproblem.php?pid=5734 Problem Description Deep neural networks (DNN) have s ...
- C#实现对EXCEL指定单元格进行操作
using System; using System.Collections.Generic; using System.Text; using Microsoft.Office.Interop.Ex ...
- [Environment Build] 工作中遇到的关于Git的问题
修改已经提交的commit中的author, commit git commit --amend --author 'Your Name <Your Email>' git commit ...
- css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- 自己动手实现STL 03：内存基本处理工具(stl_uninitialized.h)
一.前言 前面两篇已经编写了内存配置器和建构解构工具函数.这里,就准备编写并介绍下内存基本处理工具函数.比如uninitialized_copy().uninitialized_copy和 unini ...
- websocket的加密和解密
补充个小知识点:按位与运算 按位与运算是同位都为1才为1,有一个不为1就是0 websocket_hand import socket, base64, hashlib import websocke ...
- angular 学习笔记（3） ng-repeat遍历json并且给样式
视图: <div ng-app="myapp" ng-controller="myctrl"> <ul> <li ng-repea ...
- Oracle 用户相关
1.查询所有未修改过密码的Oracle用户 SELECT * FROM dba_users_with_defpwd d, dba_users du WHERE du.account_status = ...
- Android rxjava2的disposable
rxjava+retrofit处理网络请求 在使用rxjava+retrofit处理网络请求的时候,一般会采用对观察者进行封装,实现代码复用和拓展.可以参考我的这篇文章:rxjava2+retrofi ...
- DB错误代码大全
db2错误代码大全 sqlcode sqlstate 说明000 00000 SQL语句成功完成01xxx SQL语句成功完成,但是有警告+012 01545 未限定的列名被解释为一个有相互关系的引 ...