【vue学习之路 - 1.初步感知】的更多相关文章

vue学习之路 - 1.初步感知

一.安装 这里使用node的npm包管理工具进行操作.操作前请先下载node. 在工程文件夹中使用以下命令安装vue: npm install vue 如下图所示:我在 helloworld 文件夹中安装vue: //  Vue不支持IE8及其以下版本,因为Vue使用了IE8不能模拟的ECMAScript5特性.Vue.js支持所有兼容ECMAScript5的浏览器. 二.Vue初步感知 1.Hello World 初步认识:vue相当于一个高级的模板引擎 <!DOCTYPE html> &l…

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学习之路第一篇（学习准备）

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

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

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

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

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

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学习之路（四）

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

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…

Vue学习之路5-v-model指令

1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据,并对一些极端场景进行一些特殊处理. 2. 表单输入绑定方式和方法 2.1 input框实现双向数据绑定示例: <template> <div> <p class="p1">{{title}}</p> <div class="…

Vue学习之路4-v-bind指令

1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v-bind:class="classProperty"></span >,解释:v-bind 是指令,: 后面的 class 是参数,classProperty 则在官方文档中被称为“预期值”. 2.2 缩写语法:<span :class="classPro…

vue学习之路 - 0.背景

1 单页面应用程序 Single Page Application (SPA) 从字面意义来看就是一个网站就一个页面,如: coding 网易云音乐 极致的用户体验,就像nativeapp一样 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷. 基于上面一点,SPA相对对服务器压力小. 良好的前后端分离.SPA和RESTful架构一起使用,后端不再负责模板渲染.输出页面工作,web前端和各种移动终端地位对…

vue学习之路之需要了解的知识汇总

一.vue是什么? 相关网页:  https://vuejs.bootcss.com/v2/guide/       及菜鸟教程       https://www.runoob.com/vue2/vue-tutorial.html vue.js是一套构建用户界面的渐进式框架:它只关注图层,采用自底向上增量开发的设计:它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用.其实抛开官方的一些不知所云的说…

Vue学习之路第十六篇：车型列表的添加、删除与检索项目

又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始,删除i个元素. ②:JavaScript中的findIndex() 方法:为数组中的每个元素都调用一次函数执行. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数. 如果没有符合条件的元素返回 -1. ③:箭头函数(=…

Vue学习之路第八篇：事件修饰符

学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡 页面代码: <div id="app" @click="clickDiv()"> <button @click=&…

Vue学习之路第三篇：插值表达式和v-text的区别

上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div id="app"> <p v-cloak> {{ msg }} </p> </div> 节点中我们定义了 Vue 的内置属性 “v-cloak” <style type="text/css"> [v-cloak]{ d…

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

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

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

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

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

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

后端开发者的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学习之路8-v-on指令学习简单事件绑定之属性

前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简单点说就是不让父节点及父节点以上的节点事件触发),本示例如果没有stop属性,父节点和爷爷节点事件将会触发,并在控制台输出内容,示例代码和示例结果如下: <template> <div> <p class="title1">{{title}}</p…

Vue学习之路7-v-on指令学习之简单事件绑定

前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不会在事件发生前被执行.在JavaScript中常见的事件句柄(Event Handlers)主要有: 属性名 描述(对应事件发生在何时...) onabort 图像的加载被中断 onchange 域的内容被改变 ondblclick 当用户双击某个对象时调用的事件句柄 onfocus 元素获得焦点…

Vue学习之路6-条件渲染

条件指令 所谓条件指令是指满足某个条件时执行哪部分代码,不满足条件时执行哪部分条件代码.vue条件指令有v-if,v-else-if,v-else三个,v-if条件渲染用来指示元素是否移除或者插入,根据表达式的值的真假条件渲染元素. v-if示例 方式一使用v-if显示标签,当初始化值为true时,则显示第一个标签,当初始化值为false时,则显示第二个标签: <template> <div> <p class="title1">{{title}}&…

Vue学习之路3-浅析Vue-cli搭建项目后的目录结构

1.前言 Vue并不限制你的代码结构.但是,它规定了一些需要遵守的规则:1.应用层级的状态应该集中到单个store对象中.2.提交mutation是更改状态的唯一方法,并且这个过程是同步的.3.异步逻辑都应该封装到action里面. 2.项目文件目录显示如下 3.项目文件解析 3.1 build文件 build:文件夹下存放webpack的一些配置,webpack是前端网站的一种项目编译.运行.打包工具.build.js:是我们完成项目之后需要运行的, 可以将我们的项目文件打包成静态文件,存放在…