Jzandth的博客

在我们学习vue的整个过程中，我们始终是按照上面这张图中的内容在进行学习逻辑：v-if、v-for事件：v-on、v-bind、自定义事件分发、v-model实现双向数据绑定视图：组件的定义和使用，主要还是用于显式的视图组件的模板的设置和数据模板的使用通信：axios实现vue中的异步通信在写第一个vue程序之前，我们学习了什么是MVVM模式，现在应该就已经知道了M：model，就是指的后端传递数据的模块，这一部分我们在学习的时候并没有涉及，我们主要是学习前端知识V：view，就..

目录1.路由模式2.处理4043.路由钩子4.路由钩子的使用5.在钩子函数中使用异步请求6.小结    前面我们实现的功能中，请求组件的时候它的url中总是有一个"#"符号，这显然和我们平时使用的习惯不符，所以我们需要解决这个问题；这个问题可以通过设置路由对象的路由模式解决1.路由模式vue的辅助类VueRouter的路由模式有两种hash：路径带 # 符号，如 http://localhost/#/loginhistory：路径不带 # 符号，如

目录1.参数传递2.怎么传递参数3.测试4.怎么实现重定向1.参数传递    参数传递在路由中的重要性不言而喻，我们就是需要通过传递的参数达到相同页面框架，不同用户展示不同数据的效果，如果没有参数的传递，那么页面对于各个用户来说就是相同的，这显然不是我们想要的2.怎么传递参数    vue中参数的传递还是遵循了原来的参数传递方式，即通过url传递参数，所以我们需要对组件绑定的url进行改进，使它可以接收参数，并将参数显

目录1.什么是路由嵌套2.怎么使用路由嵌套3.测试4.扩展elementUI的使用1.什么是路由嵌套    嵌套路由又称子路由，在实际应用中，一般由多层嵌套的组件组合而成。一样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：/user/foo/profile /user/foo/list+------------------+ +-----------------+|

    咱们采用实战教学模式并结合 ElementUI 组件库，将所需知识点应用到实际中，以最快速度带领你们掌握 Vue 的使用    下面我们将学习的vue知识点、创建vue工程都串起来回顾一遍1.创建vue项目结构建立一个名为 hello-vue 的工程 vue init webpack hello-vue安装依赖，咱们须要安装 vue-router、element-ui、sass-loader 和 n

说明    学习的时候，尽可能的打开官方的文档    Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的连接HTML5 历史模式或 hash 模式，在 IE9

目录0.vue-cli项目3大金刚1.vue文件和直接定义的组件之间的对象关系2.一些属性的作用3.index.html和main.js和App.vue之间数据怎么传递的4.index.html和main.js和App.vue的关系5.全局组件和局部组件的区别0.vue-cli项目3大金刚index.html：我们访问http://localhost:8080/ 返回的请求资源文件，这不就和javaweb项目的web文件夹下的index.jsp一个道理？整个项目只有这一个 html 文件，所以这是一

目录1.什么是webpack2.为什么要使用webpack3.安装webpack4.使用webpack5.小结1.什么是webpack    WebPack 是一款模块加载器兼打包工具，它能把各类资源，如 JS、JSX、ES六、SASS、LESS、图片等都做为模块来处理和使用2.为什么要使用webpack    因为现在很多浏览器都还停留在ES5规范，但是我们编写前端代码的时候需要使用到EES6的规范和新特性，所以这就

目录1.环境准备2.第一个 vue-cli 应用程序初始化并运行认识vue项目的目录结构1.环境准备    vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;    预先定义好的目录结构及基础代码，就比如我们在建立 Maven 项目时能够选择建立一个骨架项目，这个骨架项目就是脚手架,咱们的开发更加的快速;主要的功能统一的目录结构本地调试热部署单元测试集成打包上线须要的环境N

Vue 入门小结    核心 : 数据驱动 , 组件化    优点: 借鉴了 AngulaJS 的模块化开发 和 React 的虚拟Dom , 虚拟Dom就是把Dom操做放到内存中执行;    经常使用的属性:v-ifv-else-ifv-elsev-forv-on 绑定事件 , 简写@v-model 数据双向绑定v-bind 给组件绑定参数,简写 : 

目录1.什么是事件2.需求3.分析4.代码实现在上一篇博客中我们介绍了"v-bind:“的简写，为” : "这一篇博客介绍"v-on:“的简写，为” @ "1.什么是事件    事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行2.需求    在前面插槽的基础上，我们需要实现点击删除按钮就删除一个li的数据3.分析上图    经过以上代码不

目录1.什么是插槽2.怎么使用插槽小结1.什么是插槽    在 Vue.js 中咱们使用 slot 元素做为承载分发内容的出口，作者称其为 插槽，能够应用在组合组件的场景中2.怎么使用插槽<div id="vue" > <p>学习路线</p> <ul> <li>java</li> <li>spring框架</li&gt

目录1.什么是计算属性(vue的特色)2.怎么使用计算属性注意：methods 和 computed 里的东西不能重名3.结论1.什么是计算属性(vue的特色)    计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个可以将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；能够想象为缓存(内存中)！   &nbs

目录1.什么是Axios2.为何要使用 Axios3.第一个Axios程序1.生命周期2.代码实现3.数据渲染1.什么是Axios    Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通讯框架，它的主要做用就是实现 AJAX 异步通讯，其功能特色以下：从浏览器中建立 XMLHttpRequests从 node.js 建立 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自

1.什么是组件组件是可复用的 Vue 实例，说白了就是一组能够重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着殊途同归之妙；一般一个应用会以一棵嵌套的组件树的形式来组织：我们可以简单的将组件理解为我们在HTML文件中使用的标签2.怎么使用组件/怎么自定义组件在定义中说了，组件是用来提高复用的，且组件的内容就是我们在HTML文件中使用的标签使用语法 Vue.component("组件名称",{ templ

1.什么是双向数据绑定Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js 的精髓之处了值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定；单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突2.为什么要实现数据的双向绑定在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是

绑定事件其实Vue里面的绑定事件就和js里面原理一样，只是Vue使用形式不同js里面要绑定触发事件，我们直接在标签里面写上触发事件和执行的js方法即可；在Vue中，我们首先需要在Vue对象的构造函数传入的对象中新增一个属性methods，然后在这个对象里面定义一个个要执行的方法，最后在要绑定的元素上面写上v-on:触发事件=“methods中的函数名称”(这里的触发事件就是js里面的触发事件，其实我们只需要记住经常用的就行，甚至不用记，直接百度jQuery 事件.)<!DOCTYPE ht..

    我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的，我们在控制台操作对象属性，界面可以实时更新!    我们可以使用v-bind来绑定元素属性！...

目录1. 什么是MVVM2. 为什么要使用MVVM3.MVVM的组成部分1.View2.Model3.ViewModel4.MVVM模式的实现者5.为什么要使用Vue.js6.第一个Vue程序7.好处1. 什么是MVVM    MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet，简单点说就是在浏览器上

1.三端合一1.混合开发（Hybid App）    主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa )并能备够调用到底层件(如:传感器、GPS、 摄像头等)，打包方式主要有以下两种:云打包: HBuild -> HBuildX， DCloud出品; API Cloud本地打包: Cordova (前身是PhoneGap)2.后端技术    前端人员为了方便开发也需要掌握

目录1.什么是Vue2.前端3要素3.结构层（HTML）4.表现层（CSS）5.CSS预处理器6.行为层（JavaScript）TypeScript7.JavaScript框架1.什么是Vue    Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-