目录
1.什么是Vue
2.vue的设计思想MVVM
2.1快速入门抓包处理
2.2注意事项及其说明
3.数据单/双向渲染技术
3.1数据单向渲染
3.2数据双向渲染
3.2.1数据双向渲染练习题
4.事件绑定机制
4.1演示案例
4.2抓包处理
4.3注意事项
4.4事件绑定机制的练习题
5.修饰符
6.条件渲染(v-if/v-else-if/v-else/v-show)
6,1 用例题帮大家理解
6.2 v-if 和v-else的区别
6.3 相关案例练习(有兴趣可以试试看)
7.列表渲染 (v-for)
7,1 列表渲染相关方法
7.2列表渲染应用实例
8.组件化编程
8.1 全局组件
编辑
8.2局部组件
8.3注意事项
9.生命周期和钩子函数
对重要阶段的钩子函数进行案例分析
10.vue Cli脚手架模块化开发
10.1用webpack来创建vue Cli脚手架项目
编辑10.2 Vue Cli中项目结构的分析 (如图所示)
!!!10.3Vue请求页面的执行流程
11. vue-ElementUI
11.1安装Element-ui的指令
10.2初步使用Element-UI应用实例
希望小伙伴多多关注！
本文章-由韩顺平教育视频学习所得。供大家一起学习进步 ！
就是渐进式的JavaScript！
1. Vue(读音/vju:/,类似于 view)是一个前端框架,易于构建用户界面。
2.Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合。
3.支持和其它类库结合使用。
4.开发复杂的单页应用非常方便。
5.Vue是Vue.js的简称。
官网文档：https://cn.vuejs.org/v2/guide/index.html
-M∶即Model，模型，包括数据和一些基本操作
-V:即View,视图,页面渲染结果
·VM∶即View-Model，模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作 Model 渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据, 然后同步到Model中。
-而MVM中的VM要做的事情就是把DOM操作完封装起来,开发人员不用再关心 Model和View之间是如何互相影响的
-只要我们Model发生了改变,View上自然就会表现出来
-用户修改了View，Model中的数据也会跟着改变。。
·结果:把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上,大大提高开发效率
实现的数据和显示分离的技术，比JQuery更加的简洁！
代码演示：
结果展示：
抓包分析：
改变Model的数据改变可直接修改前端
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div。
2. 因为div更加适合做布局容器。
3. id 不是必须为app , 是程序员指定,一般我们就使用app
4.注意代码的顺序，我们要求div在前，script在后，否则无法进行一个绑定。
5.Vue.js采用简洁的模板语法来声明式地将数据渲染进 DOM的系统,做到数据和显示分离
6. Vue没有繁琐的 DOM操作，如果使用jQuery，我们需要先找到 div节点，获取到 DOM 对象,然后进行节点操作,显然Vue更加简洁
1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
2. v-model指令 是数据的双向渲染,
(1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
1.v-bind指令可以用来绑定元素的属性
2.v-bind指令可以完成基本的数据渲染和绑定
3.v-bind指令的简写形式就是一个冒号(:)
举例：
前端结果展示：
代码展示：
3.2.1数据双向渲染练习题
要求：当在输入框中输入1.jpg/2.jpg/3.jpg的时候会显示不同的图片，用到数据绑定机制来实现
代码展示
使用v-on进行事件处理,比:v-on:click表示处理鼠标点击事件。
事件调用的方法定义在vue对象声明的 methods节点中。
v-on:事件名可以绑定指定事件。
要求点击不同按钮，在控制台输出不同的信息 ，如下图
代码展示：
我们上述案例中通过按钮，可以在控制台输出不同的内容，那么他和我们的传统js编程有什么区别呢？其实不然，他的核心底层依然是用传统的JavaScript实现的，不过不需要我们程序员去操作。下面我带大家去分析抓包处理一下。
控制台输入vm对象，可以看到vm对象的所有内容
如果方法没有参数,可以省略()[需要浏览器支持]
v-on指令的写形式@[需要览器支持]
去相应挂载的vue实例下，查看可以绑定的事件
代码展示
题目2:当点击按钮过后，会弹窗出对应的书名：运用到双向绑定。
代码如下：
1.修饰符(Modifiers)是以(.)指明的后缀,指出某个指令以特殊方式绑定。
2.例如, .prevent修饰符告诉 v-on指令对于触发的事件调用 event.preventDefault()即阻 止事件原本的默认行为
例如：
.stop 组织事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进 行处理
.self 当在 event.target当前元素自身时触处理函数
.once 事件将会触一次
.passive 告诉浏览器你不想阻止事件的默认行为
案例：
演示 v-on:submit.prevent 的使用, 如果没有输入名字，控制台输出 "请输入名
字"，否则输出 "提交表单"
代码展示：
解释一下条件渲染： v-if="awesome" 的时候，会去挂载到这个容器的vue的实例，去对应的数据池里面寻找awesome是否为真，如果为真就会显示h1标签相应的内容。就是我们编程中的if-else语句。
注意！在js中，false的情况有：0 undifine null “” 这些都是为false的情况。
写一个案例：
当点击或不点击复选框的时候，会显示出不同的内容。
代码展示如下：
如果将v-if 用v-show去实现，如下代码所示：
1、v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
2、v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
3、使用建议：如果要频繁地切换，建议使用 v-show ；如果运行时条件很少改变，使用 v-if 较好
下面对我们的区别进行抓包的详细解释：
对于v-if是真正的实现组件的销毁和重建，所消耗的性能比较大【只有一个h1标签】
对于v-show 仅仅就是css样式的改变(也可以调用相应的vue实例去看底层的属性，加强理解)
【这里有两个h1标签】
输入不同的成绩显示不同的优秀程度，并且当超出输入值的范围，进行文本框中的值进行修改
这里我们会去官网上查看
1.输出列表相应的值，包括索引
2.遍历输出数组中各个对象的属性值
组件 (Component) 是 Vue.js 最强大的功能之一 ( 可以提高复用性 [1. 界面 2. 业务处理 ]) 组件也是一个 Vue 实例，也包括∶ data 、 methods 、生命周期函数等 组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 对于全局组件，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件 data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象 / 数据
全局组件就相当于java中的一个类，当你用到该组件的时候，就相当于创建了一个实例，里面的数据是独占的，不是共享的，用的vue实例的数据池是共享的。
有许多微小的差别具体代码如下
局部组件：不同于全局组件，局部组件是要引入到某个vue实例中，由挂载了这个vue实例的容器去使用（可以将局部组件放入到js文件中，当我们要用到该组件的时候就导入包即可）
1. 如果方法体 , 只有简单的语句 , 比如 count++, 那么可以进行简写 如：< button v-on :click ="count++" > 点 击 次 数 = {{count}} 次< button>2. 组件定义需要放置在 new Vue() 前，否则组件注册会失败3. 组件也是一个 Vue 实例，因此它的定义是也存在∶ data、methods、生命周期函数等
4. data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象/数据
5. 组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板6. 全局组件是属于所有vue实例，因此，只有被vue实例挂载了过后才能使用全局组件
1. Vue 实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载DOM 、渲染 - 更新 - 渲染、卸载等一系列过程，我们称为 Vue 实例的生命周期2. 钩子函数 ( 监听函数 ): Vue 实例在完整的生命周期过程中 ( 比如设置数据监听、编译模板、将实例挂载到 DOM 、在数据变化时更新 DOM 等 ), 也会运行叫做生命周期钩子的函数3. 钩子函数的作用 就是在某个阶段 , 给程序员一个做某些处理的机会
解释生命周期图：
1 在new vue()的时候，vue实例被创建，他会在内存里面维护一个编译模版。此时在beforeCreate只有比如data数据池，methods方法池的加载，但此时并没有具体数据的初始化。
2 在created的时候里面的数据才被真正的初始化
3 接下来判断vue实例是否有el属性，并且有template模版，有的话，在内存的编译模版里面，先将template模版进行解析，形成内存编译模版结构，也就是vue在内存里面维护了一个这样的模版，但是此时并没有将内存模版挂载到div上所以用户看不到。
如果没有template就会编译一些vue的一些基础的属性。
在beforeMount前都没有挂载到div上，前端界面看不到，但是在内存里面已经编译好了
4 在Mount过后，将内存的模版挂载到前端界面，此时用户看到了渲染后的结果
5. 在Mount时，会时刻监听vue实例中的数据池是否发生变化，如果发生变化在beforeUpdate函数中，就会将内存中的数据加以改变，在重新将模版挂载到div上，updated函数进行更新渲染。
6.就是实例销毁时，调用beforeDestory，和destory函数。
以上就是一个完整的vue的生命周期，请参照链接的图理解，讲的不好，多多指教！
下面是老师解读！
1) new Vue()
new 了一个 Vue 的实例对象，此时就会进入组件的创建过程。
2) Init Events & Lifecycle
初始化组件的事件和生命周期函数
3) beforeCreate
组件创建之后遇到的第一个生命周期函数，这个阶段 data 和 methods 以及 dom 结构都未
被初始化，也就是获取不到 data 的值，不能调用 methods 中的函数
4) Init injections & reactivity
这个阶段中, 正在初始化 data 和 methods 中的方法
5) created
- 这个阶段组件的 data 和 methods 中的方法已初始化结束，可以访问，但是 dom 结构未
初始化，页面未渲染
- 老师说明：在这个阶段，经常会发起 Ajax 请求
6) 编译模板结构(在内存)
7) beforeMount
当模板在内存中编译完成，此时内存中的模板结构还未渲染至页面上，看不到真实的数据
8) Create vm.$el and replace ‘el’ with it
这一步，再在把内存中渲染好的模板结构替换至真实的 dom 结构也就是页面上
9) mounted
此时，页面渲染好，用户看到的是真实的页面数据， 生命周期创建阶段完毕，进入到了运
行中的阶段
10) 生命周期运行中
10.1 beforeUpdate
当执行此函数，数据池的数据新的，但是页面是旧的
10.2 Virtual DOM re-render and patch
根据最新的 data 数据，重新渲染内存中的模板结构，并把渲染好的模板结构，替换至页面
上
10.3 updated
页面已经完成了更新，此时，data 数据和页面的数据都是新的
11) beforeDestroy
当执行此函数时，组件即将被销毁，但是还没有真正开始销毁，此时组件的 data、methods
数据或方法 还可被调用
12) Teardown…… 注销组件和事件监听
13) destroyed
组件已经完成了销毁
抓包分析
目前开发模式的问题1. 开发效率低2. 不够规范3. 维护和升级 , 可读性比较差vue Cli脚手架可以帮我们搭建框架，程序员只需要将框架的内容写完就好了。易于开发和维护。
最后看到的界面如下所示：
由上述三个图片，可以了解vue Cli脚手架请求页面的流程：
首先就是main,js是程序的入口，创建了一个vue的实例，并将该实例挂载到id=app的容器中。
再去router路由找到目录router/index,js：上面导出默认的路由（可以看成组件默认导出），路由中的component组件去HelloWord.vue中寻找里面就是对文字及其内容的一个渲染、。最后渲染后的路由界面，会以路由视图的形似返回到vue实例中。
vue实例中的component和template模版是这个vue实例的渲染模版，在里面就是一张图片。当vue实例在内存中维护的编译模版完成后，将vue实例挂载到index.html前端界面中进行挂载。
ElementUI 是组件库，网站快速成型工具
安装 element-ui 组件库, cmd 下进入到项目，指令 npm i element-ui@2.12.0
1. 首先第一步，要引入Element-UI
2. 比如我要引用提供的icon图标
3. 在vue组件的代码中引入上述代码运行即可得到
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.bianchenghao6.com/java-jiao-cheng/6523.html