一、Vue对象的操作

1. 可以通过一个Vue对象操作另一个Vue对象

var v1 = new Vue({
el: "#app1",
data: {title:”hello vuw!”}
});
var v2 = new Vue({
el: "#app1",
methods:{
changev1title:function () {
v1.title = "hello python!"
},
}
});

2.Vue对象操作另一个Vue对象的内容,维度有两个,操作属性、操作方法

这些属性是data或computed里定义的
var v2 = new Vue({
el: "#app1",
methods:{
changev1title:function () {
v1.title = "hello python!"
},
v1upper: function () {
v1.toUpperCase()
}
}
});

 3.Vue的实例属性

直接通过对象的方式定义的属性,是来自于data或computed中的属性,但是vue对象中的el、data等等这些键也称为属性,这些属性是vue对象的实例属性!

注意:

1)ref的使用

在vue里面,往往使用ref属性来代替id属性的使用,那么就可以快速的通过的调用ref的值来获取页面中的某个元素。

<button type="button" ref="mybtn1" @click="showVueObject">点我</button>
showVueObject:function () {
this.$refs.mybtn1.innerHTML = "hello"
}

2)mount的使用

实现了页面元素与vue对象的动态绑定,之前都是通过el的方式绑定。

<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
var v1 = new Vue({
template:"<h1>hello template</h1",
});
v1.$mount('#app');
</script>

二、Vue的组件

Vue的一大特性:组件化。可以将vue对象作为一个组件,被反复的使用。

注册组件的方式有两种,全局注册和局部注册。

1.注册组件(全局注册)

Vue.component(“组件名”,{vue对象})

2.使用组件

在被vue对象绑定了的html元素中才可以使用组件,如果一个div没有被vue绑定,那么这个div中不能使用之前注册的组件。

<div id="app">
<model1></model1>
<model1></model1>
<model1></model1>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
Vue.component("model1",{
template:"<div>{{title}}<button type='button' @click='mybtn'>点我</button> </div>",
data:function(){
return {
title: "hello vue",
}
},
methods: {
mybtn: function () {
alert('hello vue!!!');
}
}
});
new Vue({
el: "#app",
})

3.作为组件的vue对象的注意事项

特点1:

Vue.component(“组件名”,{vue对象}),这个vue对象和之前的vue对象的data属性的写法是由区别的

new Vue({
el: "#app",
data: {
name: “xx”,
age: 23,
});
Vue.component("model1",{
data: function(){
return {
name: “xx”,
age: 23,
}
},
});

特点2:

组建中template的值是一个字符串,其有且仅有一个根元素

错误:

template:"<div>{{title}}</div><button type='button' @click='mybtn'>点我</button>",

正确:

template:"<div>{{title}}<button type='button' @click='mybtn'>点我</button> </div>",

4.Vue组件的本地注册(局部注册)

Vue的全局注册,意味着在页面中任意一个被vue绑定的div中都以使用用全局注册的vue组件。但是,如果是对vue组件进行本地注册,那么在其他被vue绑定的div中,不能使用该组件。

<div id="app">
<model11></model11>
</div>
<div id="app1">
<model11></model11>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
var model1 = {
template:"<div><h1>{{title}}</h1><button type='button' @click='mybtn'>点我</button></div>",
data:function(){
return {
title: "hello vue",
}
},
methods: {
mybtn: function () {
alert('hello vue!!!');
}
}
};
new Vue({
el: "#app", // 只有这个组件可以使用model11组件
components:{
"model11": model1,
}
});
new Vue({
el: "#app1", // 这个div对象不能使用model11组件
})
</script>  

三、Vue的生命周期

一个Vue对象会经历初始化、创建、绑定、更新、销毁等阶段,不同的阶段,都会有相应的生命周期钩子函数被调用,可以参考官方文档的生命周期示意图。

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
title:"this is title"
},
methods:{
changeTitle:function(){
this.title= "new title";
},
destroy:function(){
this.$destroy();
}
},
// ES5
beforeCreate:function(){
console.log("beforeCreate")
},
// ES6
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
// 3.一个页面中只有一个div,其他的都是vue组件
// vue组件里的data必须使用function的形式对{}对象进行封装,防止对其他数据的修改。 注意,template里必须有
// 一个根节点。
},
mounted(){
console.log("mounted")
},
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
},
beforeDestroy(){
console.log("beforeDestory")
},
destroyed(){
console.log("destory")
}
})
</script>

执行顺序:

ProductInfo.vue?ca1b:17 beforeCreate

ProductInfo.vue?ca1b:21 created

ProductInfo.vue?ca1b:24 beforeMount

ProductInfo.vue?ca1b:30 mounted

ProductInfo.vue?ca1b:30 beforeUpdate

ProductInfo.vue?ca1b:30 Update

ProductInfo.vue?ca1b:39 beforeDestory

ProductInfo.vue?ca1b:42 destory

Vue系列教程(二)之Vue进阶的更多相关文章

  1. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  2. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  3. 10min系列之二日志可视化进阶

    10min系列之二日志可视化进阶(作者原创,同步发布在github) 本文需要有一定的python和前端基础,如果没基础的,请关注我后续的基础教程系列博客 本文所有的demo,都是浏览器下展示的 原创 ...

  4. CRL快速开发框架系列教程二(基于Lambda表达式查询)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  5. C#微信公众号开发系列教程二(新手接入指南)

    http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...

  6. Android Studio系列教程二--基本设置与运行

    Android Studio系列教程二--基本设置与运行 2014 年 11 月 28 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处! 上面一篇博客,介绍了Studio的 ...

  7. NGUI系列教程二

    接下来我们创建一个Label,NGUI->Open the Widget Wizard,打开widgetTool对话框,在Template中选择Label,确定AddTo右侧选项为panel,点 ...

  8. 黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...

  9. 黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级) 企业库加密应用程序模块提供了2种方 ...

  10. Fastify 系列教程二 (中间件、钩子函数和装饰器)

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) 中间件 Fastify 提供了与 Express 和 Restify ...

随机推荐

  1. 使用wesocket从 rabbitMQ获取实时数据

    rabbitmq支持stomp组件,通过stomp组件和websocket可以从rabbitMQ获取实时数据.这里分享一个demo: 使用时需要引入的js ,用到了sock.js和stomp.js & ...

  2. mysql中索引,触发器,事务,存储引擎的理解

    网址:http://blog.51cto.com/760470897/1790460

  3. Sentry 监控 - 私有 Docker Compose 部署与故障排除详解

    内容整理自官方开发文档 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Map ...

  4. vue-cli4结合element-ui异常解决(前端小白,文摘取自网络)

    1:将vue-cli4版本退回到vue-cli3 2:使用element-plus 替换 element-ui 传送门 => https://element-plus.gitee.io/#/zh ...

  5. M-SOLUTIONS Programming Contest 2020 题解

    M-SOLUTIONS Programming Contest 2020 题解 目录 M-SOLUTIONS Programming Contest 2020 题解 A - Kyu in AtCode ...

  6. LuoguB2101 计算矩阵边缘元素之和 题解

    Content 给定一个 \(m\times n\) 的矩阵,求矩阵边缘元素之和. 数据范围:\(1\leqslant m,n\leqslant 100\). Solution 对于新手来说,看到这题 ...

  7. mysql 在删除数据出现Cannot delete or update a parent row: a foreign key constraint fails 这个该如何解决

    mysql 在删除数据出现Cannot delete or update a parent row: a foreign key constraint fails  这个该如何解决 可以这样解决: S ...

  8. restTemplate 接收list数据

    User[] users= restTemplate.getForObject(url, User[].class); 使用数组接收

  9. 【LeetCode】886. Possible Bipartition 解题报告(Python)

    [LeetCode]886. Possible Bipartition 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu ...

  10. 1479 小Y的数论题

    小Y喜欢研究数论,并且喜欢提一些奇怪的问题.这天他找了三个两两互质的数a, b, c,以及另一个数m, 现在他希望找到三个(0, m)范围内的整数x, y, z,使得 (xa+yb) Mod m=(z ...