转载请标明出处：https://blog.csdn.net/men_ma/article/details/106847165.
本文出自 不怕报错 就怕不报错的小猿猿 的博客

Vue入门之vue框架简介&库和框架的区别&MVVM介绍&安装vue&vue所管理的边界&双向数据绑定&vue事件&vue的生命周期

  • 1.vue框架简介
    • 1.1 什么是Vue.JS ?
    • 1.2 MVVM为什么要学习Vue框架 什么是框架？框架的作用？
    • 1.3 前端提高开发效率的发展历程：
  • 2.库和框架的区别
    • 2.1 库
    • 2.3 框架
    • 3.MVVM的介绍
  • 4.安装vue
    • 4.1 cdn下载(需连接网络)建议使用
    • 4.2 手动下载
  • 3.入门简单案例（代码）
    • 3.1 Vue所管理的边界（知识点）helloworld.html
    • 3.2 双向数据绑定（一定要有v-model属性才是双向绑定）
    • 3.3 Vue事件
    • 3.4 vue的生命周期

1.vue框架简介

1.1 什么是Vue.JS ?

Vue是目前最火最流行（在国内）的一个前端框架，与Angular.js、React.js并成为前端三大框架。Vue适用于分布式项目，百分之八九十的公司都会选择vue前端框架。 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。

Vue的官网：https://cn.vuejs.org/.

Vue的作者：尤雨溪/中国无锡

1.2 MVVM为什么要学习Vue框架 什么是框架？框架的作用？

框架：半成品的项目。提高开发效率。

1.3 前端提高开发效率的发展历程：

DOM：原生JS -> JQuery -> 前端模板引擎 （DOM操作，降低了ajax请求函数的复用性）

2.库和框架的区别

2.1 库

 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者代表：jQueryjQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

2.3 框架

框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码 代表：vue框架规定了自己的编程方式，是一套完整的解决方案使用框架的时候，由框架控制一切，我们只需要按照规则写代码框架的侵入性很高(从头到尾)

3.MVVM的介绍

MVVM：Angular、Vue、React这些框架。能够帮助我们减少不必要的DOM操作；提高渲染效率；数据双向绑定（通过框架提供的指令，我们只需要关心数据的业务逻辑，不需要关心DOM是如何渲染的）。在vue中，一个核心的概念就是不让用户去操作dom元素

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步MVVM ===> M / V / VMM：model数据模型V：view视图VM：ViewModel 视图模型   虚拟domV（修改数据） -> MM（修改数据） -> V数据是核心easyui=jquery+html4treenodes={id:1text:后勤管理children：【】}解析成json对象将json对象进行遍历for node in treenodes.children渲染菜单的功能是操作左侧页面的dom节点注1：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型注2：学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

4.安装vue

4.1 cdn下载(需连接网络)建议使用

 <!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

4.2 手动下载

<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="dist/vue.min.js"></script>

Vue的官网：https://cn.vuejs.org/.



3.入门简单案例（代码）

3.1 Vue所管理的边界（知识点）helloworld.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title>vue入门案例</title></head><body><!-- Vue所管理的边界 --><div id="app">{{title}}</div></body><script>// 通过Vue实例去渲染Vue所管理的边界 new Vue({el:'#app',data(){return{title:'hello world vue'};}})</script>
</html>

效果：

注意：边界不能有兄弟标签，边界一定是根标签

3.2 双向数据绑定（一定要有v-model属性才是双向绑定）

  3.2.1 数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化3.2.2 只有当实例被创建时data中存在的属性才是响应式的 3.2.3 用v-model指令在表单控件元素上创建双向数据绑定3.2.4 this在methods属性的方法里指向当前Vue实例      vm.name/vm.$data.name(外部访问)    this.name(内部访问)3.2.5 用v-once指令进行单向绑定注1：console对象可以使用printf风格的占位符。只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种注2：Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script><title>数据双向绑定</title></head><body><!-- Vue所管理的边界 --><div id="app">{{msg}}<br>{{msg}}<br>{{msg}}<br><input  v-model="msg" />{{msg}}<br>{{msg}}<br>{{msg}}<br><span id="ss"></span><input  v-model="msg" /></div></body><script>// 通过Vue实例去渲染Vue所管理的边界 new Vue({el:'#app',data(){return{msg:''};}})</script>
</html>

效果：动一处，多处修改

3.3 Vue事件

<!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><!-- Vue所管理的边界 --><div id="app">{{title}}<input v-model="title" /><br><!-- v-on代表的是vue指令：后面代表的是参数 --><!--   @是v-on的简写--><button v-on:click="getData">获取文本框中的值</button><button @click="getData">获取文本框中的值</button></div></body><script>// 通过Vue实例去渲染Vue所管理的边界  es6语法new Vue({el:'#app',// data有如下三种方式/* es6之前的写法之一data:function(){return{title:'默认值'};}, *//* es6之前的写法之二data:{title:'默认值'}}, */// es6语法方式(现在写法)data(){return {title:'默认值'};},methods:{getData(){console.log('getData方法被调用了');alert(this.title);//this指的是new Vuethis.title='你大爷的';}},created() {this.title='修改默认值'},beforeMount() {this.title='修改默认值2'}})</script>
</html>

效果：

3.4 vue的生命周期

此时博主花了一个多小时的时间把vue的生命周期图备注解释了，细看

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>vue的生命周期</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></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>

运行结果（没有v-model="number"时）：

console控制台打印的内容，大家根据上面的vue生命周期图的流程进行理一遍

运行结果（当有v-model="number"时）：

Vue入门之vue框架简介库和框架的区别MVVM介绍安装vuevue所管理的边界双向数据绑定vue事件vue的生命周期相关推荐

  1. 分析技术和方法论营销理论知识框架，营销方面4P、用户使用行为、STP，管理方面5W2H、逻辑树、金字塔、生命周期...

    原文:五种分析框架:PEST.5W2H.逻辑树.4P.用户使用行为 最近在一点点的啃<谁说菜鸟不懂得数据分析>,相当慢,相当的费脑力,总之,真正的学习伴随着痛苦:) 最初拿到这本书的时候, ...

  2. android java框架_Android 框架简介：java框架

    Android 框架简介:java框架 2015-10-15 14:43  来源: 正保IT教育网整理 这里简单的介绍了Android的java环境基础,在后面一节中会结合具体的实例来理解这一节的内容 ...

  3. 双向数据绑定原理（Vue）

    双向绑定的底层原理就是应用了发布订阅者模式结合数据劫持,通过Object.defineProperty()方法来劫持各个属性(需要数据绑定的属性,vue 双花括号里面的值就是需要双向数据绑定的属性,如 ...

  4. java日志框架简介（日志框架选型）

    目录 日志框架发展历程 实现框架 log4j1 JUL logback log4j2 门面日志 SLF4J JCL Spring-JCL Jboss-logging 日志框架选型 日志框架发展历程 现 ...

  5. 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）

    开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...

  6. vue双向数据绑定没有生效----vue强制更新dom结构

    vue中使用v-for渲染的页面无法通过v-if或v-show动态隐藏 当你的数剧层次太多,数据是变化了的,但是dom没有更新,没有自动双向数据驱动 这时候可以手动强制刷新 this.$forceUp ...

  7. 分布式电商项目十四：Vue前端框架简介及使用

    Vue前端框架简介及使用 就像是后端我们使用springboot来进行开发一样,前端需要使用Vue框架进行开发.由于前端不是我们的主要内容,所以只介绍简单的使用内容.具体更深的内容请参考Vue的官方网 ...

  8. vue从入门到进阶：简介（一）

    前言 用了这么久的vue了,但是一直没有时间写个系列文章,现在抽一定时间总结下vue的知识点. 首先,Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript ...

  9. vue入门（猴子都能学会）

    目录 一. vue简介 1. Vue.js是什么? 2. 库和框架的区别 3. MVVM的介绍 二.Vue入门 1.导入js依赖 2.定义vue所管理边界 3.创建vue实例 挂载边界 三. Vue事 ...

  10. Vue入门到上手（10）—— VueJs 填坑日记之在项目中使用Amaze UI

    Vue入门到上手(10)-- VueJs 填坑日记之在项目中使用Amaze UI 上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Ama ...

最新文章

  1. 注意了，又有企业因BTC费用高转向BCH
  2. 运行SSIS包的几种方式
  3. KMP(字符串匹配)算法 O(m+n)
  4. c++代码转为go_Go调用C/C++
  5. stm32cubemx中文_用 STM32 通用定时器做微秒延时函数（STM32CubeMX版本）
  6. 网站应该更注重内部链接还是外部链接？
  7. Maven 依赖冲突踩坑后，将依赖调解、类加载彻底整明白了
  8. python logging 工具
  9. C#获取C# DLL中的指定接口的所有实现实例 - qq_19759475的博客 - CSDN博客
  10. GAN的理论基础之KL散度与JS散度
  11. linux下解压rar文件
  12. js实现滑动拼图验证码
  13. vue结合vue-amap调用高德地图行政区划分
  14. 【数学建模】模型的评价、模型的推广与改进
  15. 用MeGUI压制720x480 MP4视频，详细教程[面向有一定基础者]
  16. 惊艳的基于nodejs的实时Web开发框架Meteor介绍
  17. IDA F5堆栈不平衡的处理
  18. 怎么安装redhat linux操作系统,Linux操作系统RedHat6.5安装
  19. 简易版计算器APP开发
  20. TVS二极管和稳压二极管应用有什么不同点

热门文章

  1. 冰桶挑战，正在朝功利化和畸形化方向“扩散”
  2. XP系统定时关机命令
  3. 网易云音乐实时数仓2.0进阶之路
  4. Leetcode 318. Maximum Product of Word Lengths
  5. ipad协议828版
  6. DPI vs DFI
  7. 光栅图形学-中点画线法
  8. Android桌面小插件——Widget
  9. 数学思维导图学习方法
  10. win10之缺少一个或者多个协议(只能上qq不能上网）