【我的Vue朝圣之路1】的更多相关文章

我的Vue朝圣之路2

1.创建第一个Vue案例 1. 引入Vue.js   2. 创建Vue对象      el : 指定根element(选择器)      data : 初始化数据(页面可以访问)  3. 双向数据绑定 : v-model  4. 显示数据 : {{xxx}}  5. 理解vue的mvvm实现 <div id="test"> <input type="text" v-model="msg"> <p>{{msg}}…

我的Vue朝圣之路1

1. Vue是什么? 1). 一位华裔前Google工程师开发的前端js库         2). 一个MVVM框架         3). 核心概念              * 数据绑定              * 组件              * 虚拟DOM        4). 借鉴angular的模板和数据绑定技术        5). 借鉴react的组件化和虚拟DOM技术        6). 体积小, 运行效率高, 编码简洁, PC/移动端开发都合适        7). 它…

Vue 编程之路（三）—— Vue 中子组件在父组件的 v-for 循环里，父组件如何调取子组件的事件

(标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计页面如下: 图 1 - 1 UI 设计图.png UI 理解:每个 Tab 点击后展现的页面都是这样的管理表格,所以这一部分表格写成组件.一开始采用的写法是下面这样的: 图 1 - 2 前期实现.png 写完觉得代码很繁复,我在实现状态标识 + 对应的数量时,也发现上述写法不利于将 label 绑定…

vue学习之路 - 4.基本操作（下）

vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 v-if v-else v-else-if v-for v-on v-bind v-model 以上指令前面都已说明其作用,并且使用过,这里将不再赘述. 下面我们看看 vue 的一些其他常用指令的用法: 在学习 v-text 和 v-cloak 之前我们先看看{{ }}的使用所存在的问题. {{…

Vue学习之路之登录注册实例代码

Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wang1006008051/article/details/77962942/ vue登录路由验证的实现:https://www.jb51.net/article/130487.htm [vue+axios]一个项目学会前端实现登录拦截:https://blog.csdn.net/qq67331852…

Vue学习之路---No.4（分享心得，欢迎批评指正）

这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一定要跟在v-if后面才有效 2.v-show和v-if的区别( v-show不会渲染dom,只会改变display属性:所以v-if切换速度比v-show慢,而v-show初次渲染比v-if慢 ) 3.v-for循环,及循环中每一个参数所对应的值,这里不具体指出,详情请看学习之路No.3 4.当我们…

后端开发者的Vue学习之路（一）

目录 前言: iview组件库示例 element组件库示例 Vue的介绍 兼容性: 学习Vue需要的前置知识: MVVM模型 补充: 安装/导入 导入Vue 安装 两种方式的区别: HelloWorld示例 代码分析: 代码效果: 实例中可以定义的内容 定义数据 定义方法methods 生命周期与生命周期钩子函数 补充: 渲染 插入文本 v-text v-html 用v-bind绑定属性: v-bind的简写 把对象的所有属性绑定到元素: 条件渲染 循环 计算属性 与函数的区别 与侦听属性的区…

Vue学习之路第一篇（学习准备）

1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimetext,后来学习Vue发现很多讲解Vue的人用的都是微软的 ”Visual Studio Code“ ,那么我们也不妨下载一个,用它来作为我们的编辑工具. Visual Studio Code:一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台…

Vue学习之路---No.1（分享心得，欢迎批评指正）

首先为了打消大家对Vue.js存在的顾虑,先通过大家所熟知的JQ作为对比. 都知道JQ的语法相对简单.清楚.使用方便.功能齐全: 那么Vue.js呢,同样的,Vue.js与JQ在很多地方都是相同之处,JQ能处理的事情,Vue.js同样能处理 但是,令人兴奋的就在于,Vue.js在处理某些需求,完成某些功能的时候,比JQ更简单,更快捷,更方便. 那么,我们首先来了解一下Vue.js的关键句 --- --- --- "数据驱动视图". 按照通俗一点的解释就是,视图随着数据的改变而改变. 我…

Vue学习之路---No.2（分享心得，欢迎批评指正）

昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2.了解Vue的特色功能-------"双向绑定" 3.了解Vue的基础语法-------"{{bigSurprise}},el:'',data{},vm.project,method{},等 首先,昨天我们提到了很好用的双向绑定,但是如果在某些情况下我们不需要双向绑定应该怎么办呢,…

Vue学习之路---No.5（分享心得，欢迎批评指正）

同样,首先我们还是回顾一下昨天讲到的东西: 1.常用的Vue修饰器 2.当利用js方法不修改数据,但也可以改变视图时,我们需要整体返回再整体接收 (如: items.example1 = items.example1.filter(function(){})) 3.当我们不能直接对数组进行修改的时候,我们通常要么利用vue内置set(),要么利用整体接收来修改 4.对数组中的数据进行过滤和排序,可以用computed也可以用methods 下面我们开始今天的内容::: 事件和事件的方法:   <…

Vue学习之路---No.6（分享心得，欢迎批评指正）

我们还是先回顾一下上一次的重点: 1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理 2.当方法名带括号的时候,在方法中一定要传参:而不带括号的时候,vm会自动配置默认event 3.各类事件修饰器 之前我们提到过表单绑定,那么现在我们来深入了解一下,Vue这一令人惊奇的双向表单绑定功能: 直接进入正题:   <input v-model=" message "> <p>{{ message }}</p> 这是最简单的表单双向绑定,标签P中…

Vue学习之路---No.7（分享心得，欢迎批评指正）

老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换value值 2.而多选框和单选框有相同的原理,只是多选框是以数组的方式返回值 3.option如果没有设置value,那么渲染的值就为option中的内容 4.各类修饰器,详情见上回分解 回顾完上期的重点,我们来看一下今天的内容,之前几期我们对vue的基础进行了详细的学习:现在我们来看一看组件的知识: 组…

Vue 进阶之路（九）

之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist…

Vue 进阶之路（八）

之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"&…

Vue 进阶之路（七）

之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"><…

Vue 进阶之路（六）

上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"><…

Vue 进阶之路（五）

之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue">&l…

Vue 进阶之路（四）

之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色.按照以往的思路我们需要根据 js 找到这个 DOM 然后对其进行样式上的修改,那么在 vue 中该如何实现呢?我们来看下面的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu…

Vue 进阶之路（三）

之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstName = "hello",变量 lastName = "world",我们需要将这两个变量拼接到在前端展示,最基本的我们可以想到的就是: <!DOCTYPE html> <html lang="en"> <head>…

Vue 进阶之路（二）

之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/…

Vue 进阶之路（一）

vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码,但是在 vue 3.x 出来之前,还是想再复习一下 vue2.x ,好记性不如烂笔头,特此记录,与君共勉! vue 作为国人开发的框架,在很多使用习惯上使我们用起来十分顺手,又有中文官网加持,使我们在学习起来几乎没什么门槛,那接下来我们就开始一点点学习吧. vue 官网教程 https://cn.v…

后端开发者的Vue学习之路（五）

目录 上节内容回顾 使用第三方组件库 如何发起请求 请求错误处理 请求带参 以get的方式带参: 以post的方式带参: 封装处理 请求的配置 axios实例 实现调用自定义函数来发起请求 抽取axios请求到函数 抽取函数到js文件 抽取axios对象到js文件 响应的数据 拦截器 拦截请求 拦截响应 补充: 首发日期:2019-01-29 作者:http://www.cnblogs.com/progor/ 修改: 2019-02-11:发现发起请求的封装中的export default 写错…

后端开发者的Vue学习之路（四）

目录 上节内容回顾: npm 介绍 安装 常用命令: 补充: 基于npm的Hello World 项目结构分析 用法迁移 小提醒 ES6语法 知识补充 单文件组件 使用注意: 路由 开启路由 定义路由 使用路由 数据显示 路由跳转 带参路由 动态路径参数 查询参数 监听路由参数变化 嵌套路由 命名视图 编程式路由 404路由 补充: vuex 开启vuex并创建store 使用vuex 获取数据 改变数据 项目结构 补充: 首发日期:2019-01-28 修改: 2019-01-29:增加404…

后端开发者的Vue学习之路（三）

目录 上节内容回顾 组件 什么是组件 组件注册 全局注册组件 局部注册组件 使用细节 组件注册的命名规范: 组件中只有一个根元素 组件也是一个实例 组件在某些元素中渲染出错 组件间的数据传递 父子组件传递数据 子组件向父组件传输数据 非父子组件之间的传值 单向数据流 Props属性 命名规范: 大小写问题 参数校验 限制props的类型 设置默认值 要求数据必传 自定义验证函数: 传递静态或动态Prop 补充: 给组件绑定原生的事件 template 在template上使用v-if 使用v-f…

后端开发者的Vue学习之路（二）

目录 上篇内容回顾: 数据绑定 表单输入框绑定 单行文本输入框 多行文本输入框 复选框checkbox 单选框radio 选择框select 数据绑定的修饰符 .lazy .number .trim 样式绑定 class绑定 对象语法: 数组语法: style绑定 对象语法: 数组语法: 补充: 事件 绑定事件 事件修饰符 按键修饰符 事件绑定的简写 补充: Vue指令 数组操作 官网的话 补充: Vue的元素复用问题 数据残留问题 问题的解决: 首发日期:2019-01-20 上篇内容回顾:…

Vue学习之路2-项目初搭建

1.检查环境是否全部安装成功 2.创建项目 2.1.打开dos命令窗口,使用dos命令转到项目文件夹下: 2.2.输入创建项目命令:vue init webpack myproject1 创建不同的打包方式第一种情况: 创建不同的打包方式第二种情况: 2.3.启动项目,在项目目录下输入启动命令:npm start或者npm run dev npm start启动命令示例如下: npm start启动命令结果示例如下: npm run dev启动命令示例如下: npm run dev启动命令结果示…

Vue学习之路1-集成环境安装

1.前言 Vue 是一款友好的.多用途且高性能的javascript框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,它能够帮你创建可维护性和可测试性更强的代码库,Vue是渐进式的javascript框架库. 2.安装简介 Vue集成环境三大核心组件:node.js,npm,vue. 3.node.js安装 下载地址:https://nodejs.org/en/download/,根据操作系统选择实际需要的后缀名为.msi快捷安装包进行安装.node工具安装包括了npm工具,安…

Vue学习之路---No.3（分享心得，欢迎批评指正）

同样的,我们先来回顾一下昨天学习的内容: 1.利用v-once来组织双向绑定 2.filter{}过滤器的使用(详情请看上一章) 3.computed(计算属性),利用computed属性实现filters同样的效果 4.利用method{}来实现与computed和filters同样的效果 5.比较filters.computed.method的区别 6.利用v-bind{}属性绑定HTML自带属性:如class,style等 7.v-bind{}属性绑定HTML自带属性的三种写法------…

vue学习之路一：安装vue-element-admin项目

今天看到一个vue网站,觉得很好,立马又有学习vue的冲动了,话不多说,直接贴项目网址: https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md 根据文档,第一步就是安装项目啦! # 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm in…