vue入门（猴子都能学会）
目录
一、 vue简介
1. Vue.js是什么？
2. 库和框架的区别
3. MVVM的介绍
二、Vue入门
1、导入js依赖
2、定义vue所管理边界
3、创建vue实例 挂载边界
三、 Vue事件
1.属性：v-on
2. @click
3.双向数据绑定
五、Vue的生命周期
1、所有的钩子函数有哪些
2、Vue初始化默认会触发的钩子函数有哪些
3. 生命周期图
本次目标：
- vue简介
- vue入门
- vue的生命周期
一、 vue简介
1. Vue.js是什么？
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
（也可以理解为库，相当于jQuery，市面上流行的ElementUI是基于Vue的前端框架）
Vue是遵循了MVVM模型-数据双向绑定
官网：Vue官网
2. 库和框架的区别
- 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
- 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
3. MVVM的介绍
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
M：model数据模型
V：view视图
VM：ViewModel 视图模型 虚拟dom
V（修改数据） -> M
M（修改数据） -> V
数据是核心
easyui=jquery+html4
二、Vue入门
1、导入js依赖
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>2、定义vue所管理边界
<div id="app"><!-- 定义边界 -->
</div>3、创建vue实例 挂载边界
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><!-- https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js --></head><body><div id="app"><!-- 定义边界 -->{{msg}}</div></body><script type="text/javascript">new Vue({el:'#app',data() {//设置vue所管理的边界可以使用的变量return{msg:'小小鸡'};}})</script>
</html>
三、 Vue事件
1.属性：v-on
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title></title></head><body><div id="app"><!--弹出输入框里的值 --><input v-model="msg"/><button v-on:click="send">打印</button><br>{{msg}}</div></body><script type="text/javascript">new Vue({el:'#app',data(){// 设置Vue所管理的边界中可以使用的变量return{msg:'hello 鸡哥~'};},methods:{send(){// 在方法区中是可以拿到变量区中的任意变量// this指的是Vue实例alert(this.msg);}}})</script>
</html>
2. @click
<button @click="send">打印2</button><br>
3.双向数据绑定
我们创建一个新的.html
将原来的代码进行修改
文本框里输入的内容是和外面的那行字同步变化的
我们可以也可以在div内放入字体标签，但是不能超出边界，不然就会失效
五、Vue的生命周期
1、所有的钩子函数有哪些
- beforeCreate
- created
- beforeMount
- beforeUpdate
- Updated
- beforeDestory
- destroyed
2、Vue初始化默认会触发的钩子函数有哪些
- beforeCreate
- created
- beforeMount
- mounted
3. 生命周期图
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script></head><body><div id="d1"><div>number:{{number}}</div><div>{{detail()}}</div><input type="text" v-model="number" /></div><script>var data = {number:999,msg:null};var vm = new Vue({el:'#d1',data:data,methods:{detail:function(){return "使用方法来插值："+this.msg;}},beforeCreate:function(){console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳') console.log(this.msg)//undefinedconsole.log(document.getElementsByClassName("myp")[0])//undefined},created:function(){console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')this.msg+='!!!'console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')},beforeMount:function(){console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')this.msg+='@@@'console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')console.log(document.getElementsByClassName("myp")[0])//undefinedconsole.log('接下来开始render，渲染出真实dom')},// render:function(createElement){// console.log('render')// return createElement('div','hahaha')// },mounted:function(){ console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')console.log(document.getElementsByClassName("myp")[0])console.log('可以在这里操作真实dom等事情...')// this.$options.timer = setInterval(function () {// console.log('setInterval')// this.msg+='!' // }.bind(this),500)},beforeUpdate:function(){//这里不能更改数据，否则会陷入死循环console.log('beforeUpdate:重新渲染之前触发')console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染') },updated:function(){//这里不能更改数据，否则会陷入死循环console.log('updated:数据已经更改完成，dom也重新render完成')},beforeDestroy:function(){console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')// clearInterval(this.$options.timer)},destroyed:function(){console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')}});</script></body>
</html>
vue入门（猴子都能学会）相关推荐
- 猴子都能学会的C语言教程
猴子都能学会的C语言教程#1--初识C语言 这是一个从零开始的C语言教程,只会讨论一些基础的C语言语法,大佬请绕行 笔者能力不足,如有错误之处,敬请指出 一.搭建开发环境 开发环境的搭建有很多方法,本 ...
- 带瀑布流的电钢琴_让人人都能学会弹钢琴——零基础入门的智能电钢琴 POP Piano...
原标题:让人人都能学会弹钢琴--零基础入门的智能电钢琴 POP Piano 前言 其实你一直希望成为一个会弹琴的人,只是一直没有机会开始. 如果是20世纪是网络纪元,那么21世纪就是AI纪元.当人类创 ...
- 人人都能学会的python编程教程1：第一行代码
前言 众所周知,现在IT行业很火,行业薪酬也很高,国家在2017年也发布了人工智能教育的推广计划,人人会编程的时代将要到来.不会编程.不懂编程可能有些跟不上时代的节奏,普通人不懂技术也许会觉得这个很难 ...
- Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件 实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
- 儿童编程Scratch入门课程都学习什么内容？
Scratch几乎是小孩学习编程,最先接触到的软件,与复杂的成人编程语言相比,Scratch更适合孩子理解编程的内在逻辑.孩子用Scratch进行图形化编程甚至不需要编码,而且图形化编程和音乐.图像. ...
- 一周Springboot+Vue入门（1）-- 什么是Springboot
1.什么是Springboot 回答这个问题,先看下面这段话 : "为了在Java项目开发中提供一种更为简便的开发方式,来取代繁琐的项目搭建工作,Spring推出了Springboot项目. ...
- 一周Spring Boot + VUE 入门（2） --VUE
前后端分离目前重要的前端技术是基于VUE技术的框架进行开发. 1.前后端分离的概念 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...
- Spring Cloud Alibaba基础入门，一周学会基操！
Spring Cloud Alibaba基础入门,一周学会基操! 服务拆分: 1．不同微服务,不要重复开发相同业务 2．微服务数据独立,不要访问其它微服务的数据库 3．微服务可以将自己的业务暴露为接口 ...
- vue入门（一）搭建vue项目，基础显示，指令
之前接触过vue,但是一直不是十分清晰,学的云里雾里,最近打算再次系统的整理一下,重新入门.还是根据vue官方文档一步一步的来,但是是属于简化的那种,会把我的学习过程都记录下来. 下一篇:vue入门( ...
最新文章
- 小小的Python编程故事
- POJ 1716 区间最小点个数
- 实时SLAM的未来及深度学习与SLAM对比
- LeetCode题组：第7题-整数反转
- IIS不能发布asp.net 应用程序
- 浅谈Spring注解
- 存储器间接寻址方式_8086中的数据存储器寻址模式
- java语言中json转换,JSON字符串和JAVA语言对象的相互转换教程
- 聚类算法的缺点_常用聚类算法
- jsp文字上下居中显示_jsp中怎样让文字居中 ?
- Smalltalk 语言的地位为何一落千丈？
- cocos2d-x常用工具-沈大海cocos2d-x教程23
- 树莓派进阶之路 (027) - 在Linux中增加swap空间
- [C# 基础知识系列]专题十一:匿名方法解析
- linux 检查文件更新,Linux系统文件系统优化及磁盘检查
- 在windows server 2008 R2上安装SVN的时候，提示安装kb2999226
- wowza 技术交流群/ wowza 流媒体软件交流群
- 计算机软件lumion的使用例子,Lumion怎么用？BIM软件教学：带你掌握Lumion实战应用...
- 无法获取链接服务器 XXX 的 OLE DB 访问接口 SQLNCLI10 的架构行集 DBSCHEMA_TABLES_INFO。该访问接口支持该接口，但使用该接口时返回了失败代码。...
- Markdown学习之(2)－绘制表格和流程图